Vue.js自定義指令的基本使用詳情
更新時間：2022年05月27日 14:16:33 作者：??奔跑吧雞翅????
這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下
函數(shù)式
需求1：定義一個v-big指令，和v-text功能類似，但會把綁定的數(shù)值放大10倍
<div id="root">
<h2>當(dāng)前的n值是<span v-text="n"></span></h2>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<button @click="n++">點我n+1</button>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
n:1
},
directives:{
/*big:function () {
}*/
//big函數(shù)合適會被調(diào)用？
//1、指令與函數(shù)成功綁定時（一上來）
//2、指令所在的模板被重新解析時
big(element,binding){
element.innerHTML = binding.value * 10
}
}
})
</script>
對象式
需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素默認(rèn)獲取焦點
<div id="root">
<input type="text" v-bind:value="n"><br/>
<input type="text" v-fbind:value="n"><br/>
<button @click="n++">點我n+1</button>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
n:1
},
directives:{
fbind:{
bind(element,binding){
//指令與函數(shù)成功綁定時（一上來）
console.log("bind");
element.value = binding.value
},
inserted(element,binding){
//指令所在元素被插入頁面時
console.log("inserted");
element.focus()
},
update(element,binding){
//指令所在元素被重新解析時
console.log("update");
element.value = binding.value
}
}
}
})
</script>
使用時的一些坑
命名 如果指令是多個單詞：
<h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>
那么需要這樣寫：
'big-number':function (element,binding){
element.innerHTML = binding.value * 10
}或者：
'big-number' (element,binding){
element.innerHTML = binding.value * 10
}this
directives:{
fbind:{
bind(element,binding){
//此處的this是window
console.log("bind");
element.value = binding.value
}
}
}全局指令：
像過濾器一樣，我們把剛才的兩個指令改為全局指令
Vue.directive('big', function (element, binding) {
element.innerHTML = binding.value * 10
})Vue.directive('fbind',{
bind(element,binding){
element.value = binding.value
},
inserted(element,binding){
element.focus()
},
update(element,binding){
element.value = binding.value
}
})總結(jié)
一、定義語法:
(1).局部指令
new Vue({
directives:{
指令名:配置對象
}
})或：
new Vue({
directives:{
指令名:回調(diào)函數(shù)
}
})(2).全局指令
Vue.directive(指令名,配置對象)或 Vue.directive(指令名,回調(diào)函數(shù))
二、配置對象中常用的3個回調(diào):
- (1).bind：指令與元素成功綁定時調(diào)用
- (2).inserted：指令所在元素被插入頁面時調(diào)用
- (3).update：指令所在模板結(jié)構(gòu)被重新解析時調(diào)用
三、備注:
- 1.指令定義時不加
v-，但使用時要加v- - 2.指令名如果是多個單詞，要使用
kebab-case命名方式，不要用camelCase命名
到此這篇關(guān)于Vue 自定義指令的基本使用詳情的文章就介紹到這了,更多相關(guān)Vue 自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)
最近工作上需要在el-dialog基礎(chǔ)上進(jìn)行些功能的改動,下面這篇文章主要給大家介紹了關(guān)于vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue+Element-ui實現(xiàn)分頁效果實例代碼詳解
這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
ant design vue 清空upload組件圖片緩存的問題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue-router是Vue官方的路由插件，本文將結(jié)合實例代碼，介紹Vue-cli4路由配置，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue iview組件表格 render函數(shù)的使用方法詳解
下面小編就為大家分享一篇vue iview組件表格 render函數(shù)的使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue--點擊當(dāng)前增加class,其他刪除class的方法
今天小編就為大家分享一篇vue--點擊當(dāng)前增加class,其他刪除class的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 倒計時結(jié)束跳轉(zhuǎn)頁面實現(xiàn)代碼
在商場大家經(jīng)?？吹酵＼囀召M倒計時支付頁面,今天小編通過本文給大家分享vue 倒計時結(jié)束跳轉(zhuǎn)頁面功能,感興趣的朋友一起看看吧2023-10-10
el-select 下拉框多選實現(xiàn)全選的實現(xiàn)
這篇文章主要介紹了el-select 下拉框多選實現(xiàn)全選的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08