Vue.js 60分钟快速入门教程

Vuejs是一个流行的JavaScript MVVM库，它是用数据驱动和基于组件的思想构建的。与Angular.js相比，Vue.js提供了一个更简单、更容易理解的API，使我们能够快速入门和使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，那么在学习Vue.js的时候请放弃手动操作DOM的想法，因为Vue.js是数据驱动的，所以不需要手动操作DOM。它通过一些特殊的HTML语法绑定DOM和数据。一旦您创建了绑定，DOM将与数据保持同步，并且每当数据发生变化时，DOM都会相应地更新。

当然，在使用Vue.js的时候，也可以和其他库一起使用，比如jQuery。

本文的演示和源代码已经放入GitHub。如果你觉得这篇文章不错，请点赞，或者给GitHub加个星！

v-for Demo v-绑定演示页面演示GitHub源码

MVVM模式

下图不仅总结了MVVM模型-视图-视图模型，还描述了视图模型如何与视图和模型交互.

ViewModel是Vue.js的核心，它是Vue的一个实例。Vue实例作用于一个HTML元素，该元素可以是HTML的主体元素，也可以是具有指定id的元素。

创建ViewModel后，双向绑定是如何实现的？

首先，我们把上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从视图方面来说，ViewModel中的DOM Listeners工具会帮助我们监控页面上DOM元素的变化，如果有变化，就改变Model中的数据；

在模型端，当我们更新模型中的数据时，数据绑定工具将帮助我们更新页面中的DOM元素。

你好世界示例

要理解一门语言或学习一项新技术，这是我们编写Hello World示例的唯一方法。

该代码输出“你好，世界！”在屏幕上。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body！-这是我们的视图-div id=' app“{ message } }/div/body script src=' http : js/vue . js '/script script//这是我们的模型var示例数据={message:' hello world！'}//创建一个Vue实例或' ViewModel' //它将View与model newVue ({el:' # app '，data : example data })/script/html使用Vue的过程就是定义MVVM的每个组件的过程。

定义视图定义模型创建一个Vue实例或“视图模型”，用于连接视图和模型。创建Vue实例时，需要传入一个选项对象，该对象可以包含数据、挂载元素、方法、模块生命周期钩子等等。

在本例中，选项对象的el属性指向View，el: '#app '表示Vue实例将装载到div id='app './div；属性数据指向模型，数据：示例数据表明我们的模型是一个示例数据对象。

Vue.js有很多数据绑定语法。最基本的形式是文本插值。使用一对大括号语法，{{ message }}将在运行时被数据对象的message属性替换，因此“Hello World！”将在页面上输出。

Vue.js已经更新到2.0版本，但由于还不是正式版本，所以本文中的代码都是1.0.25版本。

双向绑定示例

MVVM模式本身实现了双向绑定，v-model指令可以在Vue.js中使用，在表单元素上创建双向数据绑定。

！-这是我们的视图-div id=' app ' p{{ message }}/p input type=' text ' v-model=' message '/div将message绑定到一个文本框，当文本框的值发生变化时，p { { message } }/p中的内容也会随之更新。

/p

另一方面，如果消息的值改变了，文本框的值也会更新，所以我们可以在Chrome控制台上尝试一下。

Vue实例的数据属性指向exampleData，这是一种引用类型，它会更改exampleData对象的属性，还会影响Vue实例的数据属性。

Vue.js的常用说明

上面使用的v-model是Vue.js的常用指令，那么指令是什么呢？

Vue.js的指令以v-开头，它们作用于HTML元素。这些说明提供了一些特殊功能。当将指令绑定到元素时，指令将向绑定的目标元素添加一些特殊行为。我们可以将指令视为特殊的HTML属性。

Vue.js提供了一些常用的内置指令。接下来，我们将介绍以下内置说明：

V-if指令v-show指令v-else指令v-for指令v-bind指令v-on指令Vue.js具有很好的可扩展性，我们还可以开发一些自定义指令，这将在后面的文章中介绍。

垂直中频指令

V-if是一个条件呈现指令，它根据真或假表达式删除和插入元素。它的基本语法如下：

v-if=“表达式”

表达式是返回布尔值的表达式，可以是bool属性或返回bool的表达式。例如：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' h1 hello，Vue.js！/h1 h1 v-if='yes'Yes！/h1 h1 v-if='no'No！/h1 h1 v-if=' age=25 ' age : { { age } }/h1 h1 v-if=' name . indexof(' jack ')=0 ' name : { { name } }/h1/div/body script src=' http : js/vue . js '/script script var VM=new vue({ El : ' # app '，data: {yes: true，no: false，

这段代码使用了四个表达式：

数据的“是”属性为真，所以“是！”将被输出；数据的“否”属性为假，因此“否！”不会被输出；表达式age=25返回true，因此将输出“age : 28”；表达式name.indexOf('jack')=0返回false，因此不会输出“Name: keepfool”。注意：v-if指令根据条件表达式的值执行元素的插入或删除。

这可以从呈现的HTML源代码中看出。只有三个h1元素呈现在表面上，而具有假v-if值的h1元素不会呈现为HTML。

要再次验证这一点，您可以在Chrome控制台中更改age属性，使表达式age=25的值为false，您可以看到h1Age: 28/h1元素已被删除。

年龄在选项对象的数据属性中定义。为什么Vue实例可以直接访问？

这是因为每个Vue实例都表示其选项对象中的数据属性。

V-show指令

V-show也是一个条件渲染指令。与v-if指令不同，使用v-show指令的元素将始终呈现为HTML，这只是为元素设置CSS样式属性。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' h1 hello，Vue.js！/h1 h1 v-show='yes'Yes！/h1 h1 v-show='no'No！/h1 h1 v-show=' age=25 ' age : { { age } }/h1 h1 h1 v-show=' name . indexof(' jack ')=0 ' name : { { name } }/h1/div/body脚本src='http:js/vue.js'/脚本var vm=new Vue({ el: '#app '，data: { yes: true，no: false，

在Chrome控制台中，更改年龄属性，使表达式age=25的值为假。可以看到，h1Age: 24/h1元素设置为style='display:none '的样式。

V-else指令

您可以使用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须紧跟在v-if或v-show元素之后，否则无法识别。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' h1 v-if=' age=25 ' age : { { age } }/h1 h1 v-else name : { { name } }/h1 h1 h1-h1分割线-/h1 h1 v-show=' name。indexof(' keep ')=0 ' name : { { name } }/h1 h1 v-elsesex 3360 { { sex } }/h1/div/body script src=' http : js/Vue。js '/脚本脚本var VM=new Vue({ El : ' # app '，data: { age: 28，name: ' keepfool '，Sex:元素是否渲染在超文本标记语言中，取决于前面使用的是垂直中频还是电视节目指令。这段代码中垂直中频为没错，后面的否则不会渲染到超文本标记语言电视节目为星期二，但是后面的否则仍然渲染到超文本标记语言了。

v-for指令

v-for指令基于一个数组渲染一个列表，它和Java脚本语言的遍历语法相似：

v-for="项目中的项目"

项目是一个数组，项目是当前被遍历的数组元素。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href=' style/demo。CSS ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '/head body div id=' app ' table d tr th name/th Thage/th ThSex/th/tr/d t body tr-for=' person in people ' TD { { person。姓名} }/TD { {人。年龄} }/TD {人}我们在选项对象的数据属性中定义了一个人数组，然后在#app元素内使用v-for遍历人数组，输出每个人对象的姓名、年龄和性别。

查看演示

垂直装订指令

垂直装订指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是超文本标记语言元素的特性（属性),例如：v-bind:class

v-bind :参数="表达式"

下面这段代码构建了一个简单的分页条，v形装订指令作用于元素的班级特性上。

这个指令包含一个表达式，表达式的含义是：高亮当前页。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href=' style/demo . CSS ' rel='外部nofollow' rel='外部nofollow' rel='外部no follow/head body div id=' app ' ul class='分页Li v-for=' pageCount中的n ' a href=' javascripit : void(0)' rel='外部nofollow' rel='外部nofollow' rel='外部no follow ' v-bind active ' : ' ' { { n1 } }/a/Li/ul/div/body脚本src=' http : js/Vue。js /脚本var vm=new Vue({ el: '#app '，data: { activeNumber: 1，页数： 10 } })/script/html注意v-for='页数中的不这行代码，页数是一个整数，遍历时n从0开始，然后遍历到页数1结束。

查看演示

v-on指令

v-on指令用于给监听数字正射影像图事件，它的用语法和垂直装订是类似的，例如监听a元素的点击事件：

v-:点击=“做点什么”有两种形式调用方法：绑定一个方法（让事件指向方法的引用),或者使用内联语句。

迎接按钮将它的单击事件直接绑定到问候()方法，而你好按钮则是调用说()方法。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' pinput type=' text ' v-model=' message '/p p！-点击事件直接绑定一个方法-按钮v-:点击='问候'问候/按钮/p p！-点击事件使用内联语句-按钮v-:点击='说'('嗨')'嗨/按钮/p/div/正文脚本src=' http : js/vue.js '/脚本var vm=new Vue({ el: '#app '，data: { message: 'Hello，Vue。“js！”}, //在`方法` s对象中定义方法methods : { greet : function(){//////方法内`这个`指向vm alert(this.message) }，say:函数(消息){警报(消息)} } })/脚本/html

垂直装订和v-on的缩写

Vue.js为最常用的两个指令垂直装订和v-on提供了缩写方式垂直装订指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

！-完整语法-a href=' javascripit : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' v-bind : class=' active number===n ^ 1？active' : '''{{ n 1 }}/a！-缩写语法-a href=' javascripit : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' : class=' active number===n ^ 1 '？active' : '''{{ n 1 }}/a！-完整语法-按钮v-:单击='问候'问候/按钮！-缩写语法- button @click='问候语'问候语/按钮综合示例

现在我们已经介绍了一些Vue.js的基础知识了，结合以上知识我们可以来做个小演示。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href=' style/demo . CSS ' rel='外部nofollow' rel='外部nofollow' rel='外部无后续/标题正文div id=' app '字段集图例创建新人员/图例div class='表单-组'标签名称：/标签输入类型=' text ' v-model=' New Person。name/div class=' form-group '标签://div div class=' form-group '标签se x :/标签select v-model=' new person。“性”选项值='男式'男式/选项值='女式'女式/选项/select/div class=' form-group '标签/标签按钮@ click=' create person ' create/button/div/field set table和tr th name/th thege/th thSex/th thDelete/th/tr/t body tr-v for=' people in people ' TD { { person。名称} }/{ 0姓名： '比尔，年龄： 26,性别： '男性' },{姓名： '特蕾西，年龄： 22,性别： '女性' },{姓名： '克里斯，年龄： 36,性别： '男性' }] },方法： { create person 3360 function(){ this。人推(这个。新人)；//添加完新人对象后，重置新人对象this.newPerson={name: ' '，age: 0，sex: '男性' }，deletePerson:函数（索引){ //删一个数组元素this.people .拼接(索引，1);} } })/脚本/html

以上所述是小编给大家介绍的Vue.js 60分钟快速入门教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！