[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;
        }
      }

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

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