全域性指令

　　 使用directive註冊全域性指令，我們自定義了指令v-focus：、

<div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
</div>
 
<script>
// 註冊一個全域性自定義指令 v-focus
Vue.directive('focus', {
  // 當繫結元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 建立根例項
new Vue({
  el: '#app'
})
</script>
 

區域性指令

　　 在Vue例項中使用directives選項來註冊區域性指令，這樣指令只能在這個例項中使用：

<div id="app">
  <p>頁面載入時，input 元素自動獲取焦點：</p>
  <input v-focus>
</div>
 
<script>
// 建立根例項
new Vue({
  el: '#app',
  directives: {
    // 註冊一個區域性的自定義指令 v-focus
    focus: {
      // 指令的定義
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>
 

指令鉤子

　　 在一個指令中，你可以指定下面的鉤子函式，如上述兩個示例中都具有inserted函式。

鉤子引數

　　 每個鉤子函式都有兩個常用引數，分別是el和binding。

　　 el代表DOM節點本身，即元素。

　　 binding是一個指令物件，含有如下屬性：

　　 除此之外，還有兩個不太常用的引數，如下：

　　 vnode：Vue編譯生成的虛擬節點。

　　 oldValue：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

指令簡寫

　　 如果你的指令只包含inserted鉤子函式，則可以進行簡寫：

v-rounoob="{color:'red'}"

Vue.directive('runoob', function (el, binding) {
  // 設定指令的背景顏色
  el.style.backgroundColor = binding.value.color
})