vue.js中指令Directives详解
前端之家收集整理的这篇文章主要介绍了
vue.js中指令Directives详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念，说起MVVM，第一时间想到的便是，等已经被广泛运用的MVVM框架，之前我也没有在这方面有很多了解，最近在做项目的过程中接触了,这是一个小巧精致，性能优异的MVVM框架，可以说对初学者是比较容易入门的，该框架的写得很好，但是中文版访问还不太稳定，翻译也有待改进，所以自己一遍学习，一遍记录自己的思考，与各位共享学习的经验。
第一篇主要是想谈谈vue.js中的Directives即指令，在vue.js中指令就是一个通知库进行某些具体的dom操作的口令，在html中表现为如下形式：
Directives分为1.Reactive Directives、2.Literal Directives、3.Empty Directives，下面结合具体的api阐述他们的作用：
1.Reactive Directives（响应式指令）
Reactive Directives可以绑定在Vue实例或者在Vue实例上下文中求值的表达式上，当绑定的对象发生改变时，指令中的update()会在下一个系统单位时间发生异步响应，我们来看看具体的用法：
v-text:更新元素的textContent，事实上在html中{{mustache}}形式的插入值也会被编译为针对一个textNode的v-text指令。
v-html:更新元素的innerHTML，由于可能插入恶意代码，使用时要注意保证来源安全。
v-show:根据绑定值的true或false来决定所在元素在网页中正常显示还是显示为空。
v-class：这个指令有一个可选参数，无参数时将绑定值（一般为class名）添加到所在元素的classlist当中，并且一旦检测绑定值有改动，便随之改变classlist里对应的class；提供参数时参数的true或false将决定绑定值（class）是否被添加到所在元素的classlist中，示例如下：
v-attr:更新所在元素的某些属性（由参数表示）。
v-style:更新所在元素的样式，会智能添加浏览器供应商前缀，方便我们书写样式。这个指令有一个可选参数，无参数时，若绑定值为String则将绑定值设置为元素的style.cssText，若绑定值为Object则将Object中的样式键值对放入元素的style object当中；
提供参数时，参数指明了css属性的对应值:
v-on:为元素添加并更新事件监听器，参数可以是一个处理函数或者一个函数语句。
我们可以为处理函数提供参数，其中this指的是当前的viewmodel，如下例中通过传入this参数改变元素的text值：
我们还可以传入$event表示触发处理函数的DOM事件，如下例传入$event阻止事件冒泡：
在监听键盘事件时由于要判断按键值，可以结合filter写成如下两种形式：
当viewmodel销毁时，v-on绑定的事件会自动消除，我们不必亲自去清理这些绑定事件，这也防止了内存的泄露。
v-model:为表单元素创建一个双向绑定，详细介绍请看
v-if:根据绑定值的true或false来插入或移除元素，如例子中我们将根据test的正确与否决定两个
元素是否插入当中
v-repeat:为绑定数组或对象中的每一个item创建一个子viewmodel，或者为绑定的数字值创建对应数量的子viewmodel。并根据绑定值的改变随时更新。没有提供参数时子viewmodel会直接使用绑定数组中的分配单元作为它的$data，如果值不是一个对象，则会创建一个数据包装对象，而值会被设置在别名为$value的 key 上。
如果提供了参数，我们将创建一个数据包装对象，将参数作为对象的key，从而访问对象模板中的属性：
v-with：这个指令只能结合接下来讲到的v-component指令使用，作用是让子viewmodel可以继承父viewmodel的数据，我们可以传入父viewmodel的属性对象或单个属性，在子viewmodel中访问：
继承对象：
{{name}} {{email}}
继承单个属性：
{{myName}} {{myEmail}}
v-events：这个指令也只能结合接下来讲到的v-component指令使用，它使得父viewmodel能够监听子viewmodel上的事件，我们要注意区分v-on与v-events,v-events监听的是通过vm.$emit()创建的 Vue 组件系统事件，而不是 DOM 事件。我们举例说明：
当子viewmodel调用this.$emit('change',…)时会触发父viewmodel的onChildChange()方法，并且把emit函数中附加的参数传给onChildChange()方法。
2.Literal Directives(字面指令)
字面指令并没有绑定到某一个对象上，字面指令是把它们的参数作为纯字符串传给bind()函数中执行一次，字面指令可以接受{{mustache}}表达式，但是该表达式只会在编译阶段执行一次，不会绑定数据的改变：
下面看一看具体的api：
v-component：之前提到过，这是使用我们提前声明并注册好的组件构造器将当前元素编译为子viewmodel，从而实现数据继承，之后的文章会详细介绍组件系统。
v-ref：在父viewmodel中创建子viewmodel的引用，方便父viewmodel中的$对象访问子组件：
这个指令只能与v-component和v-repeat一起使用，与v-repeat一起使用时，其value是与绑定数据数组对应的子组件数组。
v-el：为当前dom元素创建一个引用，供其自身vue实例使用，例如
v-partial：将当前dom元素中的innerHTML替换为事先注册的partial，有两种写法，{{ mustache}}可以让dom元素随数据改变而更新:
另一种写法则没有数据跟随更新的效果：
{{> my-partial}}
v-transition：为当前dom元素在指定参数值作用时添加动画效果，后续文章会详细介绍
3.Empty Directives(字面指令)
v-pre：这个指令是通知编译器跳过当前dom元素和其所有子元素，这是为了在我们编程过程中对无需编译的元素节省编译时间
v-cloak：在当前元素编译完成之前改指令都会存在，我们一般使用这个指令来在元素编译未完成时隐藏原始的 {{ Mustache }} 模板，可以在css中这样写：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/40598.html
