溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue.directive中怎么自定義指令，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
一、什么是全局API？
全局API并不在構造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，比如我們今天要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給我們的API函數來定義新的功能。
二、Vue.directive自定義指令
我們在第一季就學習了內部指令，我們也可以定義一些屬于自己的指令，比如我們要定義一個v-jspang的指令，作用就是讓文字變成綠色。
在自定義指令前我們寫一個小功能，在頁面上有一個數字為10，數字的下面有一個按鈕，我們每點擊一次按鈕后，數字加1.
三、自定義指令中傳遞的三個參數
el: 指令所綁定的元素，可以用來直接操作DOM。
binding: 一個對象，包含指令的很多信息。
vnode: Vue編譯生成的虛擬節點。
四、自定義指令的生命周期
自定義指令有五個生命周期（也叫鉤子函數），分別是 bind,inserted,update,componentUpdated,unbind
bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化動作。
inserted:被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于document中）。
update:被綁定于元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
componentUpdated:被綁定元素所在模板完成一次更新周期時調用。
unbind:只調用一次，指令與元素解綁時調用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>vue.directive 自定義指令</title>
</head>
<body>
<h2>vue.directive 自定義指令</h2>
<hr>
<div id="app">
<div v-jspang="color" id="aaa">
{{num}}
</div>
<p>
<button @click='jia'>加分</button>
</p>
<p>
<button onclick='unbind()'>解綁</button>
</p>
</div>
<script type="text/javascript">
function unbind(){
app.$destroy();
}
//自定義指令
Vue.directive('jspang',{
bind:function(el,binding,vnode){//被綁定
/**
var s=JSON.stringify;
el.innerHTML =
'name:' + s(binding.name) +'<br>' +
'value:' + s(binding.value) +'<br>' +
'expression:' + s(binding.expression) +'<br>' ;
**/
el.style='color:'+binding.value;
console.log('1 - bind');
},
inserted:function(){//綁定到節點
console.log('2 - inserted');
},
update:function(){//組件更新
console.log('3 - update');
},
componentUpdated:function(){//組件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解綁
console.log('5 - unbind');
}
})
var app=new Vue({
el:'#app',
data:{
color:'green',
num:10
},
methods:{
jia:function(){
this.num++;
}
}
})
</script>
</body>
</html>bind:function(){//被綁定
console.log('1 - bind');
},
inserted:function(){//綁定到節點
console.log('2 - inserted');
},
update:function(){//組件更新
console.log('3 - update');
},
componentUpdated:function(){//組件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解綁
console.log('1 - bind');
}看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
