自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令

比如我们让输入框自动聚焦

// 注册一个全局自定义指令 `v-focus`
Vue.directive(\'focus\', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

除了全局注册，我们也可以进行局部注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后我们再模板中添加这个属性

<input v-focus>

钩子函数

钩子函数的参数

下面我们来看一个例子

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

实际代码如下

Vue.directive(\'demo\', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      \'name: \'       + s(binding.name) + \'<br>\' +
      \'value: \'      + s(binding.value) + \'<br>\' +
      \'expression: \' + s(binding.expression) + \'<br>\' +
      \'argument: \'   + s(binding.arg) + \'<br>\' +
      \'modifiers: \'  + s(binding.modifiers) + \'<br>\' +
      \'vnode keys: \' + Object.keys(vnode).join(\', \')
  }
})

new Vue({
  el: \'#hook-arguments-example\',
  data: {
    message: \'hello!\'
  }
})

实际效果

动态指令参数

这个一般是用在自定义指令上的，可以给自定义指令，然后指定不同的参数。
比如下面这个

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

我们在vue中可以这样调用

Vue.directive(\'pin\', {
  bind: function (el, binding, vnode) {
    el.style.position = \'fixed\'
    var s = (binding.arg == \'left\' ? \'left\' : \'top\')
    el.style[s] = binding.value + \'px\'
  }
})

new Vue({
  el: \'#dynamicexample\',
  data: function () {
    return {
      direction: \'left\'
    }
  }
})

函数简写

这个就是直接省去了bind这个函数绑定，相当于默认绑定，我们可以直接简写。
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样

Vue.directive(\'color-swatch\', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量

这个就是给指令传递一个对象过去

<div v-demo="{ color: \'white\', text: \'hello!\' }"></div>

然后下面可以对这个内容进行处理

Vue.directive(\'demo\', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})