溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue自定義指令如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue自定義指令如何使用”文章吧。
通過前面的學習，我們都有了一定的Vue知識，我們都知道可以在Vue實例創建后，在template標簽中寫我們的界面，當我們需要控制某個dom元素的顯示或者隱藏時，我們可以使用v-if指令。循環打印一個列表時，我們可以使用v-for指令等…,然而這些指令都是Vue給我們提供的，我們其實可以自己定義我們的指令，其實我理解這個自定義指令就是把某個功能做一個封裝，以這個指令提供給調用者使用。減少相同代碼的重復編寫。在Vue中，自定義指令可以有全局定義和局部定義兩種方式，下面我們一起看下如何定義自定義指令
我們以一個簡單的輸入框自動焦的例子來演示Vue的自定義指令，具體的場景是：界面中有一個輸入框，當界面加載出來后，讓輸入框自動獲取焦點，我們先看下一般的實現方法,代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>自定義指令</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
mounted(){
this.$refs.input.focus();
},
template:
`
<div>
<input ref="input"/>
</div>
`
});
const vm = app.mount('#root');
</script>運行結果讀者可以自己運行看下效果，然后去掉focus函數調用，再運行看效果
我們在輸入框中使用ref屬性的方式，當頁面加載完后，使用this.$refs.input.focus(),獲取到input輸入框，然后調用focus方法讓輸入框獲取焦點。
使用上面的方法雖然能完成我們的需求，但是寫起來比較麻煩，而且需要在我們的app實例的mounted()方法中增加聚焦的邏輯，使用自定義指令可以更簡單的實現上面的輸入框自動獲取焦點的功能，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>自定義指令</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
display:true
}
},
template:
`
<div v-show="display">
<input v-focus/>
</div>
`
});
// 定義全局的自定義指令
app.directive('focus',{
mounted(el){
console.log(el);
el.focus();
console.log('mounted');
}
});
const vm = app.mount('#root');
</script>如上面代碼所示，使用app.directive(‘指令名稱’,{ xxxx});的方式可以自定義的指令，使用時在對應的dom元素上添加v-指令名稱就可以了，就如本例子中，調用的方法如下：
<input v-focus/>
這時候運行代碼會發現效果和我們之前做的一模一樣，這個寫法更簡單。在文中我們看到了mounted函數，這個函數是Vue生命周期的函數嗎，意思是當界面掛載完成時會回調它，el參數就是我們使用自定義指令的那個Dom元素
mounted(el){
console.log(el);
el.focus();
console.log('mounted');
}其實定義自定義指令時不只可以重寫mounted()函數，還可以重寫其他的函數，如下所示：
app.directive('focus',{
beforeMount(el){
console.log('beforeMount');
},
mounted(el){
console.log('mounted');
},
beforeUpdate(){
console.log('beforeUpdate');
},
updated(){
console.log('updated');
},
beforeUnmount(){
console.log('beforeUnmount');
},
unmounted(){
console.log('unmounted');
}
});在瀏覽器中運行上面代碼，打開console，如下
我們可以在對應的生命周期回調中做對應的事情。
在上面的代碼中我們定義自定義指令用的是全局的方式，其實我們還有局部的方式，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>自定義指令</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const direc = {
focus:{
mounted(el){
el.focus();
}
}
};
const app = Vue.createApp({
data(){
return{
display:true
}
},
directives:direc,
template:
`
<div v-show="display">
<input v-focus/>
</div>
`
});
const vm = app.mount('#root');
</script>使用局部定義自定義屬性的方式是：
const direc = {
focus:{
mounted(el){
el.focus();
}
}
};然后使用的時候需要加上：
const app = Vue.createApp({
...
directives:direc,
...
});我們接下來使用Vue的自定義指令實現一個小功能，就是動態改變輸入框的位置，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>自定義指令</title>
<style>
.header{
position: absolute;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
pxValue:50
}
},
template:
`
<div>
<div v-pos:left="pxValue" class="header">
<input />
</div>
</div>
`
});
app.directive('pos',{
mounted(el,binding){
el.style[binding.arg] = binding.value + 'px';
},
updated(el,binding){
el.style[binding.arg] = binding.value + 'px';
}
});
// 上面代碼等價于下面注釋掉的代碼
// app.directive('pos',(el,binding)=>{
// console.log(binding.arg,'binding')
// el.style[binding.arg]=(binding.value+'px');
// })
const vm = app.mount('#root');
</script>首先我們定義一個樣式，使用絕對定位的方式確定輸入框的位置：
<style>
.header{
position: absolute;
}
</style>使用一個pxValue表示輸入框位置的值，然后可以通過
v-pos:left="pxValue"的方式確定輸入框是距離左邊還是右邊或者距離其他參照物。然后自定義指令的時候，拿到屬性傳過來的值和pxValue，改變輸入框位置：
app.directive('pos',{
mounted(el,binding){
el.style[binding.arg] = binding.value + 'px';
},
updated(el,binding){
el.style[binding.arg] = binding.value + 'px';
}
});這里也可以寫成：
app.directive('pos',(el,binding)=>{
console.log(binding.arg,'binding')
el.style[binding.arg]=(binding.value+'px');
})然后使用的時候就可以如下：
<div v-pos:left="pxValue" class="header"> 或者 <div v-pos:right="pxValue" class="header"> 或者 <div v-pos:top="pxValue" class="header">
運行之后，可以修改對應的值查看效果：
以上就是關于“Vue自定義指令如何使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
