// 注冊(cè)一個(gè)全局自定義指令 v-focusVue.directive('focus', { // 當(dāng)綁定元素插入到 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>// 注冊(cè)一個(gè)全局自定義指令 v-focusVue.directive('focus', { // 當(dāng)綁定元素插入到 DOM 中。 inserted: function (el) {  // 聚焦元素  el.focus()
 }
})var vm = new Vue({
 el: '#example',
})</script>

name: 指令名，不包括 v- 前綴。
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。
expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 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!"
})