vue.js笔记——指令
本文作者：IMWeb devinran 原文出处：IMWeb社区 未经同意，禁止转载
vue.js笔记——指令
跟ng的指令系统类似，vue也拥有一套指令系统。
所谓指令，其实本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。
简单示例
<p v-text="msg"></p>这里v是vue的前缀（如果是Q.js就是q前缀= =），text是指令ID，msg是expression。msg作为viewModel，当它的值发生改变时，就触发指令text，重新计算标签的textContent(innerText)。
这里expression可以使用内联方式，在任何依赖的属性变化时都会触发指令更新。
<p v-text="'hello ' + user.name + ', ' + time"></p>内联表达式中只能访问当前上下文的vue实例的属性和方法 内联表达式只能是单一语句
对于某些指令需要在表达式之前添加参数，比如事件绑定：
<span v-on="click:openComment"></span>使用逗号分割绑定多重指令
<div v-on="click:onClick, keyup:onKeyup, keydown:onKeydown"></div>字面量指令不会创建数据绑定，它的值只是一个字符串字面量
<player v-ref="StringId"></player>自定义指令
类似ng，vue也允许注册自定义指令。
Vue.directive(id, definition)两个参数分别是指令 ID 与定义对象。其中定义对象可以定义几个可选钩子函数，如下：
钩子函数 | 描述 |
|---|---|
bind | 构造函数，第一次绑定时调用 |
update | bind之后以初始值调用一次，之后每当绑定值变化时调用 |
unbind | 析构函数，解绑时调用 |
eg:
Vue.directive('my-directive', {
bind: function () {
...
},
update: function (newValue, oldValue) {
...
},
unbind: function () {
...
}
})很多情况下我们只需要定义update，直接传入一个函数即可。
Vue.directive('my-directive', function (value) {
...
})绑定指令的实例拥有以下属性：
属性 | 描述 |
|---|---|
el | 绑定指令的DOM元素 |
vm | 上下文ViewModel |
expression | 指令表达式 |
arg | 参数 |
name | 指令ID |
modifiers | 指令的修饰符 |
descriptor | 指令的解析结果 |
eg:
<div id="chat" v-chat="msg">world</div>Vue.directive('chat', function (value) {
console.log(this.el); //world
console.log(this.arg); //hello
console.log(this.name); //chat
console.log(this.expression); //msg
});
var chat = new Vue({
el: '#chat',
data: {
msg: 'hello'
}
});多个指令值可以传入对象字面量
<div id="chat" v-chat="{flower: true, image: false}">world</div>Vue.directive('chat', function (value) {
console.log(value.flower); //true
console.log(value.image); //false
})ng里面对于指令的定义有一个restrict（限定符）概念，这个参数定义了指令所能存在的形式：
//Angular.js代码
angular.module('webcourse', []).directive('chat', function() {
return {
restrict: 'EACM', //看这里看这里看这里
template: ...,
scope: {},
....
};
});这个EACM分别是四种指令形式：
<!-- E : element 元素 -->
<chat></chat>
<!-- A : attribute 属性 -->
<div chat="expression"></div>
<!-- C : class 类名 -->
<div class="chat: expression"></div>
<!-- M : comment 元素 -->
<-- directive: chat expression -->
<!-- 不要问我为什么comment不是C而是M，Cross-Site Scripting为啥叫XSS，恩？有本事叫CSS？ -->
<!-- 拯救强迫症：M就当是markdown可以了吧可以了吧可以了吧 -->扯上面ng这么多其实就是想说vue支持的元素指令，其实就相当于ng的E。
Vue.elementDirective('chat', function() {
...
});然后
<chat></chat>其他选项
属性 | 描述 |
|---|---|
params | 引入需要的属性值 |
deep | 深层监听 |
twoWay | 需要对属性值赋值修改（容我吐槽twoway这个名字实在太low了） |
acceptStatement | 允许使用内联语句 |
priority | 指令优先级，高的先执行 |
terminal | 自定义编译元素和后代元素的逻辑，比较高级的技巧 |
<div v-chat="expression" dataId="hello"></div>Vue.directive('chat', {
params: ['a'],
twoWay: true,
bind: function () {
console.log(this.params.dataId); // -> "hello"
this.set(this.el.value);
}
})以上大概是vue.js指令系统的一个入门= =
其它部分且听下回分解= =