vue.js中指令Directives详解
想必喜欢前端开发的⼩伙伴们都或多或少接触过MVVM这个概念，说起MVVM，第⼀时间想到的便是，等已经被⼴泛运⽤的MVVM框架，之前我也没有在这⽅⾯有很多了解，最近在做项⽬的过程中接触了，这是⼀个⼩巧精致，性能优异的MVVM框架，可以说对初学者是⽐较容易⼊门的，该框架的写得很好，但是中⽂版访问还不太稳定，翻译也有待改进，所以⾃⼰⼀遍学习，⼀遍记录⾃⼰的思考，与各位共享学习的经验。
第⼀篇主要是想谈谈vue.js中的Directives即指令，在vue.js中指令就是⼀个通知库进⾏某些具体的dom操作的⼝令，在html中表现为如下形式：
<element
prefix-directiveId="[argument:] expression [| ]">
</element>
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来决定所在元素在⽹页中正常显⽰还是显⽰为空。
fontweight属性boldv-class：这个指令有⼀个可选参数，⽆参数时将绑定值（⼀般为class名）添加到所在元素的classlist当中，并且⼀旦检测绑定值有改动，便随之改变classlist⾥对应的class；提供参数时参数的true或false将决定绑定值（class）是否被添加到所在元素的classlist中，⽰例如下：
<span v-class="
red : hasError,
bold : isImportant,
hidden : isHidden
"></span>
v-attr：更新所在元素的某些属性（由参数表⽰）。
<canvas v-attr="width:w, height:h"></canvas>
v-style：更新所在元素的样式，会智能添加浏览器供应商前缀，⽅便我们书写样式。这个指令有⼀个可选参数，⽆参数时，若绑定值为String则将绑定值设置为元素的style.cssText，若绑定值为Object则将Object中的样式键值对放⼊元素的style object 当中；
<div v-></div>
// myStyles can either be a String:
"color:red; font-weight:bold;"
// or an Object:
{
color: 'red',
// both camelCase and dash-case works
fontWeight: 'bold',
'font-size': '2em'
}
提供参数时，参数指明了css属性的对应值:
<div v-></div>
v-on：为元素添加并更新事件，参数可以是⼀个处理函数或者⼀个函数语句。
<div id="demo">
<a v-on="click: onClick">Trigger a handler</a>
<a v-on="click: n++">Trigger an expression</a>
</div>
我们可以为处理函数提供参数，其中this指的是当前的ViewModel，如下例中通过传⼊this参数改变元素的text值：
<ul id="list">
<li v-repeat="items" v-on="click: toggle(this)">{{text}}</li>
</ul>
new Vue({
el: '#list',
data: {
items: [
{ text: 'one', done: true },
{ text: 'two', done: false }
]
},
methods: {
toggle: function (item) {
item.done = !item.done
}
}
})
我们还可以传⼊$event表⽰触发处理函数的DOM事件，如下例传⼊$event阻⽌事件冒泡：
<button v-on="click: submit('hello!', $event)">Submit</button>
/* ... */
{
methods: {
submit: function (msg, e) {
e.stopPropagation()
}
}
}
/* ... */
在监听键盘事件时由于要判断按键值，可以结合filter写成如下两种形式：
<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on="keyup:submit | key 13">
<!-- same as above -->
<input v-on="keyup:submit | key enter">
当ViewModel销毁时，v-on绑定的事件会⾃动消除，我们不必亲⾃去清理这些绑定事件，这也防⽌了内存的泄露。
v-model：为表单元素创建⼀个双向绑定，详细介绍请看
v-if：根据绑定值的true或false来插⼊或移除元素，如例⼦中我们将根据test的正确与否决定两个<p>元素是否插⼊<template>当中
<template v-if="test">
<p>hello</p>
<p>world</p>
</template>
v-repeat：为绑定数组或对象中的每⼀个item创建⼀个⼦ViewModel，或者为绑定的数字值创建对应数量的⼦ViewModel。并根据绑定值的改变随时更新。没有提供参数时⼦ViewModel会直接使⽤绑定数组中的分配单元作为它的$data，如果值不是⼀个对象，则会创建⼀个数据包装对象，⽽值会被设置在别名为$value的 key 上。
<ul>
<li v-repeat="users">
{{name}} {{email}}
</li>
</ul>
如果提供了参数，我们将创建⼀个数据包装对象，将参数作为对象的key，从⽽访问对象模板中的属性：
<ul>
<li v-repeat="user : users">
{{user.name}} {{ail}}
</li>
</ul>
v-with：这个指令只能结合接下来讲到的v-component指令使⽤，作⽤是让⼦ViewModel可以继承⽗ViewModel的数据，我们可以传⼊⽗ViewModel的属性对象或单个属性，在⼦ViewModel中访问：
// parent data looks like this
{
user: {
name: 'Foo Bar',
email: 'foo@bar'
}
}
继承对象：
<my-component v-with="user">
<!-- you can access properties without `user.` -->
{{name}} {{email}}
</my-component>
继承单个属性：
<my-component v-with="myName: user.name, myEmail: ail">
<!-- you can access properties with the new keys -->
{{myName}} {{myEmail}}
</my-component>
v-events：这个指令也只能结合接下来讲到的v-component指令使⽤，它使得⽗ViewModel能够监听⼦ViewModel上的事件，我们要注意区分v-on与v-events,v-events监听的是通过vm.$emit()创建的 Vue 组件系统事件，⽽不是 DOM 事件。我们举例说明：
<!-- inside parent template -->
<div v-component="child" v-events="change: onChildChange"></div>
当⼦ViewModel调⽤this.$emit('change', …)时会触发⽗ViewModel的onChildChange()⽅法，并且把emit函数中附加的参数传给onChildChange()⽅法。
2.Literal Directives(字⾯指令)
字⾯指令并没有绑定到某⼀个对象上，字⾯指令是把它们的参数作为纯字符串传给bind()函数中执⾏⼀次，字⾯指令可以接受{{mustache}}表达式，但是该表达式只会在编译阶段执⾏⼀次，不会绑定数据的改变：
下⾯看⼀看具体的api：
v-component：之前提到过，这是使⽤我们提前声明并注册好的组件构造器将当前元素编译为⼦ViewModel，从⽽实现数据继承，之后的⽂章会详细介绍组件系统。
v-ref：在⽗ViewModel中创建⼦ViewModel的引⽤，⽅便⽗ViewModel中的$对象访问⼦组件：
<div id="parent">
<div v-component="user-profile" v-ref="profile"></div>
</div>
var parent = new Vue({ el: '#parent' })
// 访问⼦组件
var child = parent.$.profile
这个指令只能与v-component和v-repeat⼀起使⽤，与v-repeat⼀起使⽤时，其value是与绑定数据数组对应的⼦组件数组。
v-el：为当前dom元素创建⼀个引⽤，供其⾃⾝vue实例使⽤，例如<div v-el="hi">可以使得vm.$$.hi访
问到该dom元素
v-partial：将当前dom元素中的innerHTML替换为事先注册的partial，有两种写法，{{ mustache}}可以让dom元素随数据改变⽽更新:
<!-- content will change based on vm.partialId -->
<div v-partial="{{partialId}}"></div>
另⼀种写法则没有数据跟随更新的效果：
<div>{{> my-partial}}</div>
v-transition：为当前dom元素在指定参数值作⽤时添加动画效果，后续⽂章会详细介绍
3.Empty Directives(字⾯指令)
v-pre：这个指令是通知编译器跳过当前dom元素和其所有⼦元素，这是为了在我们编程过程中对⽆需编译的元素节省编译时间
v-cloak：在当前元素编译完成之前改指令都会存在，我们⼀般使⽤这个指令来在元素编译未完成时隐
藏原始的 {{ Mustache }}模板，可以在css中这样写：
[v-cloak] { display: none }
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。