Vue.js 60分钟轻松入门

Vue.js简介

Vue.js是一个流行的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的每个组件的过程。

1.定义视图

2.定义模型

3.创建一个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中的内容也会随之更新。

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

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

Vue.js的常用说明

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

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

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

垂直中频指令

V-show指令

V-else指令

v-用于说明

V-bind指令

V-on指令

Vue.js具有良好的可扩展性，我们还可以开发一些自定义指令，这将在下一篇文章中介绍。

垂直中频指令

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

V-if='expression'expression是返回bool值的表达式，可以是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-elsename : { { name } }/h1 h1-分割线/h1h1v-show=' name。的索引(' keep ')=0 div/body script src=' http : js/Vue . js '/script script var VM=new Vue({ El : ' # app '，data: { age: 28，name: 'keepfool '，sex 3360 ' male ' })/script/HTMlV-else元素以html呈现，具体取决于之前使用的是v-if还是v-show指令。在这段代码中，v-if为真，后面的v-else不会呈现为HTML；v-show是tui，但是下面的v-else仍然呈现为HTML。

v-用于说明

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

v-for=“项目中的项目”项目是一个数组，项目是当前被遍历的数组元素。

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href=' style/demo。CSS '/head/body div id=' app '表和tr th name/th Thage/th ThSex/th/tr/t body tr-v for=' person in people ' TD { { person }。姓名} }/TD TD { {人。年龄} }/TD TD { {人。sex } }/TD/tr/t body/table/div/body script src=.我们在选项对象的数据属性中定义了一个人数组，然后在#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/head body div id=' app ' ul class=' pagining ' Li v-for='页数中的n ' a href=' javascripit : void(0)' v-bind : class=' active number===n 1？活动“:”{ { 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！-点击事件直接绑定一个方法-按钮' :click='问候语'问候语/按钮/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)' v-bind : class=' active number===n ^ 1？active' : '''{{ n 1 }}/a！-缩写语法-a href=' javascripit : void(0)' : 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 '/头体div id=' app '字段集图例创建新人员/图例div class='表单-组'标签名称3360/标签输入类型=' text ' v-model=' New Person。name/div class=' form-group '标签age 3360/标签输入类型=' text ' v-model=' New Person。age '/div div class=' form-group ' label se x :/label 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的MVVM模型和它的双向绑定机制，然后以一个你好世界示例开始了我们的Vue.js之旅，接着我们了解了几个比较常用的指令，最后根据这些知识我们构建了一个简单的示例。

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。