[Vue] : 自定義指令

自定義指令

• 使用Vue.directive()定義全局的指令v-focus
• 參數1 ：指令的名稱，注意，在定義的時候，名稱前面不需要加 v- 前綴，但在調用的時候，必須在指令名稱前加上 v- 前綴來進行調用
• 參數2： 是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作。
• 常用的指令相關函數有bind, inserted, update。
• 在每個函數中，第一個參數，永遠是 el ，表示被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象
• bind: 每當指令綁定到元素上的時候，會立即執行這個 bind 函數，只執行一次，樣式相關的可以在bind中設置
• inserted: 元素插入到DOM中的時候，會執行 inserted 函數【觸發1次】，和JS行為有關的操作，最好在 inserted 中去執行，放置 JS行為不生效
• updated: 當VNode更新的時候，會執行 updated， 可能會觸發多次
• font-weight是一種函數簡寫 方式

1. 自定義全局和局部的自定義指令：

    // 自定義全局指令 v-focus，為綁定的元素自動獲取焦點：
    Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用
        el.focus();
      }
    });

    // 自定義局部指令 v-color 和 v-font-weight，為綁定的元素設置指定的字體顏色 和 字體粗細：
      directives: {
        color: { // 為元素設置指定的字體顏色
          bind(el, binding) {
            el.style.color = binding.value;
          }
        },
        'font-weight': function (el, binding2) { // 自定義指令的簡寫形式，等同於定義了 bind 和 update 兩個鈎子函數
          el.style.fontWeight = binding2.value;
        }
      }

2. 自定義指令的使用方式：

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">