Vue.js每天必学之指令系统与自定义指令

基础

除了内置指令，Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。

可以用 Vue.directive(id,deFinition) 方法注册一个全局自定义指令，它接收两个参数指令 ID 与定义对象。也可以用组件的 directives 选项注册一个局部自定义指令。

钩子函数

定义对象可以提供几个钩子函数（都是可选的）：

•bind：只调用一次，在指令第一次绑定到元素上时调用。

•update： 在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。

•unbind：只调用一次，在指令从元素上解绑时调用。

示例

rush:js;"> Vue.directive('my-directive',{ bind: function () { // 准备工作 // 例如，添加事件处理器或只需要运行一次的高耗任务 },update: function (newValue,oldValue) { // 值更新时的工作 // 也会以初始值为参数调用一次 },unbind: function () { // 清理工作 // 例如，删除 bind() 添加的事件监听器 } })

在注册之后，便可以在 Vue.js 模板中这样用（记着添加前缀 v-）：

当只需要 update 函数时，可以传入一个函数替代定义对象：

rush:js;"> Vue.directive('my-directive',function (value) { // 这个函数用作 update() })

指令实例属性

所有的钩子函数将被复制到实际的指令对象中，钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性： •el: 指令绑定的元素。 •vm: 拥有该指令的上下文 viewmodel。 •expression: 指令的表达式，不包括参数和过滤器。 •arg: 指令的参数。 •name: 指令的名字，不包含前缀。 •modifiers: 一个对象，包含指令的修饰符。 •descriptor: 一个对象，包含指令的解析结果。

你应当将这些属性视为只读的，不要修改它们。你也可以给指令对象添加自定义属性，但是注意不要覆盖已有的内部属性。

示例：

rush:js;"> Vue.directive('demo',{ bind: function () { console.log('demo bound!') },update: function (value) { this.el.innerHTML = 'name - ' + this.name + '
' + 'expression - ' + this.expression + '
' + 'argument - ' + this.arg + '
' + 'modifiers - ' + JSON.stringify(this.modifiers) + '
' + 'value - ' + value } }) var demo = new Vue({ el: '#demo',data: { msg: 'hello!' } })

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令可以使用任意合法的 JavaScript 表达式：

rush:js;"> Vue.directive('demo',function (value) { console.log(value.color) // "white" console.log(value.text) // "hello!" })

字面修饰符

当指令使用了字面修饰符，它的值将按普通字符串处理并传递给 update 方法。update 方法将只调用一次，因为普通字符串不能响应数据变化。

teral="foo bar baz">

rush:js;"> Vue.directive('demo',function (value) { console.log(value) // "foo bar baz" })

元素指令

有时我们想以自定义元素的形式使用指令，而不是以特性的形式。这与 Angular 的 “E” 指令非常相似。元素指令可以看做是一个轻量组件。可以像下面这样注册一个自定义元素指令：

rush:js;"> Vue.elementDirective('my-directive',{ // API 同普通指令 bind: function () { // 操作 this.el... } })

不这样写：