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

1、解釋

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

 

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

 

2、自定義全局指令實例

 <!-- 注意： 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行爲不生效
      },
    })

 

3、自定義局部指令實例

 

<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'
        }
      }

 

 4、函數簡寫

在不少時候，你可能想在 bind 和 update 時觸發相同行爲，而不關心其它的鉤子。好比這樣寫:

 

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