Vue.js自定義指令學(xué)習(xí)使用詳解

更新時(shí)間：2019年10月19日 08:54:49 作者：吳聲子夜歌

這篇文章主要為大家詳細(xì)介紹了Vue.js自定義指令的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

自定義指令

自定義指令的注冊(cè)方法和組件很像，也分全局注冊(cè)和局部注冊(cè)，比如注冊(cè)一個(gè)v-focus指令用于在<input>、<textarea>元素初始化時(shí)自動(dòng)獲得焦點(diǎn)，共有兩種寫(xiě)法：

//全局注冊(cè)
Vue.directive('focus',{
 //指令選項(xiàng)
});


//局部注冊(cè)
var app = new Vue({
 el: '#app',
 directive: {
 focus: {
 //指令選項(xiàng)
 }
 }
});

自定義指令的選項(xiàng)是由幾個(gè)鉤子函數(shù)組成的，每個(gè)都是可選的。

自定義指令的各個(gè)選項(xiàng)如下：

bind： 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted： 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必在于document中）。
update： 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新。
componentUpdated： 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind： 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

可以根據(jù)需求在不同的鉤子函數(shù)內(nèi)完成邏輯代碼，例如上面的v-focus，我們希望在元素插入父節(jié)點(diǎn)時(shí)就調(diào)用，那用到的最好是inserted。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <title>自定義指令</title>
</head>
<body>
 <div id="app">
 <input type="text" v-focus>
 </div>
 <script>
 Vue.directive('focus',{
  inserted: function (el) {
  //聚焦元素
  el.focus();
  }
 });

 var app = new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

每個(gè)鉤子函數(shù)都有幾個(gè)參數(shù)可用，具體如下：

el： 指令所綁定的元素，可以用來(lái)直接操作DOM

binding： 一個(gè)對(duì)象，包含以下屬性：

    name：指令名，不包括v-前綴
    valule：指令的綁定值，例如v-my-directive=“1 + 1”，value的值是2
    oldValue：指令綁定的前一個(gè)值，僅在update和componentUpdated鉤子中可用。無(wú)論值是否改變都可用
    expression：綁定值的字符串形式。例如v-my-directive=“1 + 1”，expression的值是”1 + 1“
    arg：傳給指令的參數(shù)。例如v-my-directive:foo，arg的值是foo
    modifiers：一個(gè)包含修飾符的對(duì)象。例如v-my-directive.foo.bar，修飾符對(duì)象modifiers的值是{ foo:true, bar:true}

vnode： Vue編譯生成的虛擬節(jié)點(diǎn)。

oldVnode： 上一個(gè)虛擬節(jié)點(diǎn)僅在update和componentUpdated鉤子中可用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <title>自定義指令</title>
</head>
<body>
 <div id="app">
 <div v-test:msg.a.b="message"></div>
 </div>
 <script>
 Vue.directive('test',{
  bind: function (el, binding, vnode) {
  var keys = [];
  for(var i in vnode){
   keys.push(i);
  }
  el.innerHTML = 
   'name:' + binding.name + '<br/>' +
   'value:' + binding.value + '<br/>' +
   'expression:' + binding.expression + '<br/>' +
   'argument:' + binding.arg + '<br/>' + 
   'modifiers:' + JSON.stringify(binding.modifiers) + '<br/>' + 
   'vnode keys' + keys.join(',');
  }
 });

 var app = new Vue({
  el: '#app',
  data: {
  message: 'some text'
  }
 });
 </script>
</body>
</html>