Vue自定義指令的使用實(shí)例介紹

更新時(shí)間：2023年04月18日 08:34:53 作者：海塔燈

作為使用Vue的開發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開心的摸魚

何為自定義指令

通過(guò)前面的學(xué)習(xí)，我們都有了一定的Vue知識(shí)，我們都知道可以在Vue實(shí)例創(chuàng)建后，在template標(biāo)簽中寫我們的界面，當(dāng)我們需要控制某個(gè)dom元素的顯示或者隱藏時(shí)，我們可以使用v-if指令。循環(huán)打印一個(gè)列表時(shí)，我們可以使用v-for指令等…,然而這些指令都是Vue給我們提供的，我們其實(shí)可以自己定義我們的指令，其實(shí)我理解這個(gè)自定義指令就是把某個(gè)功能做一個(gè)封裝，以這個(gè)指令提供給調(diào)用者使用。減少相同代碼的重復(fù)編寫。在Vue中，自定義指令可以有全局定義和局部定義兩種方式，下面我們一起看下如何定義自定義指令

實(shí)例解析

1.基本知識(shí)介紹

我們以一個(gè)簡(jiǎn)單的輸入框自動(dòng)焦的例子來(lái)演示Vue的自定義指令，具體的場(chǎng)景是：界面中有一個(gè)輸入框，當(dāng)界面加載出來(lái)后，讓輸入框自動(dòng)獲取焦點(diǎn)，我們先看下一般的實(shí)現(xiàn)方法,代碼如下：

<!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>

運(yùn)行結(jié)果讀者可以自己運(yùn)行看下效果，然后去掉focus函數(shù)調(diào)用，再運(yùn)行看效果

我們?cè)谳斎肟蛑惺褂?code>ref屬性的方式，當(dāng)頁(yè)面加載完后，使用this.$refs.input.focus(),獲取到input輸入框，然后調(diào)用focus方法讓輸入框獲取焦點(diǎn)。

使用上面的方法雖然能完成我們的需求，但是寫起來(lái)比較麻煩，而且需要在我們的app實(shí)例的mounted()方法中增加聚焦的邏輯，使用自定義指令可以更簡(jiǎn)單的實(shí)現(xiàn)上面的輸入框自動(dòng)獲取焦點(diǎn)的功能，代碼如下：

<!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});的方式可以自定義的指令，使用時(shí)在對(duì)應(yīng)的dom元素上添加v-指令名稱就可以了，就如本例子中，調(diào)用的方法如下：

<input v-focus/>

這時(shí)候運(yùn)行代碼會(huì)發(fā)現(xiàn)效果和我們之前做的一模一樣，這個(gè)寫法更簡(jiǎn)單。在文中我們看到了mounted函數(shù)，這個(gè)函數(shù)是Vue生命周期的函數(shù)嗎，意思是當(dāng)界面掛載完成時(shí)會(huì)回調(diào)它，el參數(shù)就是我們使用自定義指令的那個(gè)Dom元素

 mounted(el){
            console.log(el);
            el.focus();
            console.log('mounted');
        }

其實(shí)定義自定義指令時(shí)不只可以重寫mounted()函數(shù)，還可以重寫其他的函數(shù)，如下所示：

    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');
        }
    });

在瀏覽器中運(yùn)行上面代碼，打開console，如下

我們可以在對(duì)應(yīng)的生命周期回調(diào)中做對(duì)應(yīng)的事情。

在上面的代碼中我們定義自定義指令用的是全局的方式，其實(shí)我們還有局部的方式，代碼如下：

<!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();
            }
        }
    };

然后使用的時(shí)候需要加上：

 const app = Vue.createApp({
   ...
       directives:direc,
   ...
    });

2.使用自定義指令實(shí)現(xiàn)改變輸入框位置

我們接下來(lái)使用Vue的自定義指令實(shí)現(xiàn)一個(gè)小功能，就是動(dòng)態(tài)改變輸入框的位置，代碼如下：

<!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';
        }  
    });
    // 上面代碼等價(jià)于下面注釋掉的代碼
    // app.directive('pos',(el,binding)=>{
    //     console.log(binding.arg,'binding')
    //     el.style[binding.arg]=(binding.value+'px');
    // })
    const vm = app.mount('#root');
</script>

首先我們定義一個(gè)樣式，使用絕對(duì)定位的方式確定輸入框的位置：

    <style>
        .header{
            position: absolute;
        }
    </style>

使用一個(gè)pxValue表示輸入框位置的值，然后可以通過(guò)

v-pos:left="pxValue"的方式確定輸入框是距離左邊還是右邊或者距離其他參照物。然后自定義指令的時(shí)候，拿到屬性傳過(guò)來(lái)的值和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');
    })

然后使用的時(shí)候就可以如下：

 <div v-pos:left="pxValue" class="header">
或者  <div v-pos:right="pxValue" class="header">
或者  <div v-pos:top="pxValue" class="header">

運(yùn)行之后，可以修改對(duì)應(yīng)的值查看效果，這里留給讀者去自己體驗(yàn)：

總結(jié)

本文主要介紹了Vue使用自定義指令的兩種方法，一種是全局自定義指令的使用方式，另一種是局部自定義指令的使用方式。需要注意的是，局部自定義指令定義完后需要在Vue.createApp({directives:局部自定義指令的變量名});才可以使用自定義指令。最后我們使用了一個(gè)動(dòng)態(tài)改變輸入框位置的例子展示了自定義指令的使用方式。

到此這篇關(guān)于Vue自定義指令的使用實(shí)例介紹的文章就介紹到這了,更多相關(guān)Vue自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: