vue自定義全局指令directive和局部指令directives

一、解釋

directive全局指令：使用自定義全局指令實現文本框獲取焦點功能

 

directives:自定義局部指令 v-color 和 v-font-weight，為綁定的元素設置指定的字體顏色 和 字體粗細

 

二、自定義全局指令實例

 <!-- 注意： Vue中所有的指令，在調用的時候，都以 v- 開頭 -->
          <input type="text" class="form-control" v-model="keywords" id="search" v-focus >

    // 使用  Vue.directive() 定義全局的指令  v-focus
    // 其中：參數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴, 
    // 但是： 在調用的時候，必須 在指令名稱前 加上 v- 前綴來進行調用
    //  參數2： 是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作
    Vue.directive('focus', {
  
        // 注意： 在每個 函數中，第一個參數，永遠是 el ，表示 被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象

      inserted: function (el) {  // inserted 表示元素 插入到DOM中的時候，會執行 inserted 函數【觸發1次】
        el.focus()
        // 和JS行為有關的操作，最好在 inserted 中去執行，放置 JS行為不生效
      },
    })

 

三、自定義局部指令實例

 

<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>

 

     directives: { // 自定義私有指令
        'fontweight': { // 設置字體粗細的
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
        'fontsize': function (el, binding) { // 注意：這個 function 等同於 把 代碼寫到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }

 

 四、函數簡寫

在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鈎子。比如這樣寫:

 

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