想必喜欢前端开发的朋友或多或少都接触过MVVM的概念。说到MVVM，第一时间想到的是已经被广泛使用的MVVM框架，比如angularjs和knockoutjs。我以前对这个不太了解。最近接触到了Vue.js，这是一个小巧精致的MVVM框架，性能非常出色。可以说初学者入门很容易。框架的英文文档写得很好，但中文版本不稳定，翻译有待改进。所以，自己学习，反复记录自己的想法，把自己的学习经验分享给大家。

第一篇文章主要想讲讲vue.js中的指令，也就是指令。在vue.js中，指令是一个密码，用来通知库执行一些特定的dom操作，在html中以如下形式显示：

元素前缀-指令id=' [argument:]表达式[|筛选器.]'/元素指令分为1。反应指令，2。字面指令和3。空指令及其功能将在下面用特定的API进行解释：

1.反应指令(反应指令)

反应指令可以绑定到Vue实例或在Vue实例的上下文中评估的表达式。当绑定对象发生变化时，指令中的update()将在下一个系统单位时间内异步响应。让我们来看看具体的用法：

V-text:更新元素的文本内容。事实上，html中以{ {小胡子}}形式插入的值也将被编译成textNode的v-text指令。

V-html:更新元素的内部html。因为可能会插入恶意代码，所以在使用时要注意保证源代码的安全性。

V-show:根据绑定值的真假来判断网页中元素是正常显示还是显示为空。

v类：该指令有一个可选参数。如果没有参数，则将绑定值(通常是类名)添加到元素的classlist中，一旦检测到绑定值发生变化，就改变classlist中对应的类；参数的True或false将决定绑定值(类)是否添加到元素的类列表中，如下例所示：

Spanv-class=' red: haserror，bold:很重要，hidden :是hidden'/spanv-attr3360更新元素的一些属性(用参数表示)。

Canvas v-attr=' width:w，height :h '/Canvas-style :更新元素的样式会智能添加浏览器供应商前缀，方便我们编写样式。该指令有一个可选参数。如果没有参数，如果绑定值为String，则将绑定值设置为元素的style.cssText如果绑定值为Object，则将Object中的样式键值对放入元素的样式对象中；

div v-style=' Mystyle '/div//Mystyle可以是String: ' color:red' font-weight : bold；'//或anobject : {color :' red '，camel case和dash case都起作用fontweight :' bold '，' font-size' :' 2em'}当提供参数时，该参数指示css属性：的相应值

div-style=' top : top ' px '，left: left' px '，background-color:' RGB (0，0，' BG ')'/div-3360为元素添加和更新事件侦听器，参数可以是处理函数或函数语句。

div id=' demo ' a v-on=' click : onclick '触发处理程序/a v-on=' click:n '触发表达式/a/div我们可以为处理函数提供参数，这里指的是当前的ViewModel。在下面的示例中，通过传入此参数来更改元素的文本值：

ul id=' list ' Li v-repeat=' items ' v-on=' click : toggle(this)' { { text } }/Li/n new Vue({ El : ' # list '，data : { items : [{ text : ' one '，done: true }，{ text: 'two '，done: false } ] }，methods : { toggle : function(item)Item.done} }})我们还可以传入$event来指示触发处理程序的DOM事件。例如，传入$event以防止事件冒泡：

按钮v-on='点击：提交('你好！$ event)'提交/按钮/*.*/{methods: {submit:函数(msg，e){ e . stopperpagation()} } }/*.*/在听键盘事件时，因为判断键值，可以结合滤镜写成以下两种形式：

！-仅当keyCode为13时调用vm.submit()，输入v-on='keyup:submit | key 13 '！-同上-input v-on=' keyup : submit | key enter '当ViewModel被销毁时，v-on绑定事件会自动消除，所以我们不用亲自清理这些绑定事件，这也防止了内存泄漏。

V-model:为表单元素创建双向绑定。详情请见此处

V-if:根据真或假绑定值插入或移除元素。例如，我们将根据测试是否正确来决定是否在模板中插入两个P元素

模板v-if=' test ' p hello/p pworld/p/模板v-repeat:为绑定数组或对象中的每一项创建一个子视图模型，或者为绑定数值创建相应数量的子视图模型。并根据绑定值的变化随时更新。当未提供参数时，子视图模型将直接使用绑定数组中的分配单元作为其$data。如果该值不是对象，将创建一个数据包装对象，该值将在具有别名$值的键上设置。

ul Li v-repeat=' user ' { { name } } { { email } }/Li/ul如果提供了参数，我们将创建一个数据包装对象，参数作为对象的关键字，以便访问对象模板中的属性：

ul Li v-repeat=' user : users ' { user。name}} {{user。email}}/Li/ulv-with:此指令只能与下一条v-component指令结合使用，该指令用于使子视图模型继承父视图模型的数据。我们可以传入父视图模型的属性对象或单个属性，并在子视图模型中访问它：

//父数据看起来像{user: {name:' foobar '，email:' [email protected]'}}继承的对象：

my-component v-with='user '！-无需“用户”即可访问属性。`-{ { name } } { { email } }/my-component继承了一个属性：

my-component v-with=' my name : user . name，my mail : user . email '！-您可以使用新密钥访问属性-{ {我的姓名} } { {我的电子邮件} }/我的组件v-events:此指令只能与下一个v-component指令结合使用。它使父视图模型能够监听子视图模型上的事件。我们应该注意区分v-on和V-events。V-events侦听vm创建的Vue组件系统事件。$emit()，而不是DOM事件。让我们举几个例子：

！-在父模板内部-div v-component=' child ' v-events=' change : OnChildChange '/div当子视图模型调用这个时。$ emit ('change '，)，它将触发父视图模型的onchildchange()方法，并将发出函数中的附加参数传递给onChildChange()方法

2.文字指令(文字指令)

文字指令没有绑定到对象。文字指令将其参数作为纯字符串传递给bind()函数执行一次。文字指令可以接受表达式{ {小胡子}}，但该表达式在编译阶段只执行一次，不会绑定数据更改：

让我们看看具体的api:

V-component:如前所述，这是利用我们预先声明和注册的组件构造函数，将当前元素编译成子ViewModel，从而实现数据继承。下面的文章将详细介绍组件系统。

V-ref:在父视图模型中创建子视图模型的引用，方便父视图模型中的$对象访问子组件；

div id=' parent ' div v-component=' user-profile ' v-ref=' profile '/div/div var parent=new Vue({ El : ' # parent ' })//Access子组件var child=parent。$.配置文件本说明只能用于v型部件和v型重复。当与v-repeat一起使用时，它的值是对应于绑定数据数组的子组件数组。

V-el:为它自己的vue实例创建当前dom元素的引用，例如，div v-el='hi '可以生成vm。$$.在访问dom元素时

V-partial:有两种方法可以用注册的partial替换当前dom元素中的innerHTML。{{小胡子}}可以在数据更改时更新dom元素：

！-内容将根据虚拟机而变化。partial id-div v-partial=' { { partial id } } '/div另一种写入方法对数据更新没有影响：

div { { my-partial } }/div v-transition:当指定的参数值起作用时，向当前dom元素添加动画效果，这将在下面的文章中详细介绍

3.空指令(文字指令)

V-pre:这条指令告诉编译器跳过当前的dom元素及其所有子元素，这是为了节省在我们的编程过程中不需要编译的元素的编译时间

v-斗篷：在当前元素被编译之前，变更指令将存在。当元素编译没有完成时，我们通常使用这个指令来隐藏原始的{{小胡子}}模板。它可以用css编写如下：

[v形斗篷] { display: none }

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