vue 自定義指令 directives 及其常用鈎子函數

說明

除了核心功能預設内置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令

使用的地方：有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令

鈎子函數

• inserted

  ：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

• bind

  ：隻調用一次，指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設定。

• update

  : 所在元件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模闆更新。

• componentUpdated

  ：指令所在元件的 VNode 及其子 VNode 全部更新後調用。

• unbind

  ：隻調用一次，指令與元素解綁時調用。

1. vue 全局定義

• 使用：

  <span v-指令名稱> welcome </span>

  也可以

  v-指令名稱="傳遞的參數"

• 定義：

  Vue.directive(指令名稱，{指令鈎子：功能函數})

<div id="root">
        <span v-red>welcome</span>
    </div>
    <script type="text/javascript">
        Vue.directive('red',{       //定義 ⬅⬅⬅
            inserted:function(el){  //鈎子函數 ⬅⬅⬅
                el.style.background = 'red';
            }
        });
        var vm = new Vue({
       		el:"#root"
            data:{
            
            },
        })
    </script>
           

1. 局部定義（vue-cli）

• 使用：

  <div v-指令名稱='傳遞的參數'></div>

  // 傳遞參數可以根據功能需求進行操作
• 定義：

  directives{指令名稱:{鈎子函數:功能函數}}

<template>
  <div class="hello">
  	<div v-test='name'></div>
  </div>
</template>
<script>

export default {
  data () {
    return {
     name:'userName',
    }
  },
  directives:{     //自定義指令 ⬅⬅⬅
  	test:{
	    inserted: function (el,binding) { //e為綁定元素，可以對其進行dom操作
	       console.log(binding)          //一個對象，包含很多屬性屬性(在下面)
	    },
	    bind: function (el, binding, vnode) {
		    el.innerHTML =binding.value
		  }
  	}
  },
  methods:{
 	... ...
  }
}
</script>
           

1. 鈎子函數裡面的參數

• el

  ：指令所綁定的元素，可以用來直接操作 DOM。

• binding

  ：一個對象，包含以下 property：
  • name：指令名，不包括 v- 字首。
  • value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
  • expression：字元串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 “foo”。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

• vnode

  ：Vue 編譯生成的虛拟節點。

• oldVnode

  ：上一個虛拟節點，僅在 update 和 componentUpdated 鈎子中可用。