详解Vue中的自定义指令

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

var vm = new Vue({
 el: '#example',
 directives:{
  focus:{
   inserted: function (el) {
    el.focus()
   }   
  }
 }
})

<p id="example">
 <input v-focus></p>

<script>// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) {  // 聚焦元素  el.focus()
 }
})var vm = new Vue({
 el: '#example',
})</script>

name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

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

<script>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: '#example',
 data: {
  message: 'hello!'
 }
})</script>

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

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

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