Vue 自定義指令功能完整實(shí)例
更新時(shí)間：2019年09月17日 08:38:43 作者：Json____
這篇文章主要介紹了Vue 自定義指令功能,結(jié)合完整實(shí)例形式分析了vue.js自定義指令相關(guān)實(shí)現(xiàn)與使用操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Vue 自定義指令功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義指令</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>自定義指令</h1>
<hr>
<div id="app">
<div v-json="color">{{num}}</div>
<p><button @click="add">加一</button></p>
</div>
<p>
<button οnclick="unbind()">解綁</button>
</p>
</body>
</html>
<script>
function unbind(){
//vue 提供的解綁指令
app.$destroy()
}
//自定義指令 有五個(gè)鉤子函數(shù)（聲明周期）
//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)用,而無論綁定值是否發(fā)生變化 通過比較更新前后的綁定值，可以 忽略不必要的模板更新
//componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用
// unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用
Vue.directive('json',{
bind:function(el,binding){//被綁定
console.log('1 - bind');
el.style='color:'+binding.value;
},
inserted:function(){//綁定到節(jié)點(diǎn)
console.log('2 - inserted');
},
update:function(){//組件更新
console.log('3 - update');
},
componentUpdated:function(){//組件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解綁
console.log('5 - unbind');
}
});
//自定義指令
// Vue.directive('json',function(el,binding){
// el.style='color:'+binding.value;
// });
var app = new Vue({
el:'#app',
data:{
num:1,
color:'red'
},
methods:{
add:function(){
this.num++
}
}
})
</script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下2023-04-04
vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05
vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說明
這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在vue項(xiàng)目中引入highcharts圖表的方法
今天小編就為大家分享一篇關(guān)于在vue項(xiàng)目中引入highcharts圖表的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
淺析Vue為什么需要同時(shí)使用Ref和Reactive
這篇文章主要想來和大家一起探討一下Vue為什么需要同時(shí)使用Ref和Reactive，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
這篇文章主要介紹了vue中實(shí)現(xiàn)checkbox回顯效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過程，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02
使用Vue簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁組件
上拉加載更多的分頁功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實(shí)現(xiàn)過嗎,本文我們來簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁組件吧2024-11-11
本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)，感興趣的朋友跟隨小編一起看看吧2019-05-05