基础

Vue.js允许自定义指令，实质上是让你教 Vue一些新技巧：怎样将数据的变化映射到 DOM 的行为。可以使用 Vue.directive(id, definition) 的方法传入指令 id 和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数（全部可选）：

bind：仅调用一次，当指令第一次绑定元素的时候。

update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值；以后每当绑定的值发生变化就会被调用，获得新值与旧值两个参数。

unbind：仅调用一次，当指令解绑元素的时候。

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

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

<div v-my-directive="someValue"></div>

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

Vue.directive('my-directive', function (value) {
  // 这个函数用作 update()
})

js代码如下：

Vue.directive('my-directive', {
  bind: function () {
    console.log('my-directive')
  },
  update: function (value) {
    this.el.innerHTML ='value - '+ value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    my-directive: 'hello!'
  }
})

自定义一个helloworld的指令。

Vue.js 互动版

基础