3.2.1　指令的注冊

自定義指令在Vue中占據(jù)重要的位置。下面將介紹指令的注冊，包括如何對全局指令及局部指令進(jìn)行注冊。

1．局部注冊

局部注冊自定義指令：作用在局部，默認(rèn)只會在當(dāng)前頁面的Vue實(shí)例生效；其寫法跟全局注冊不同，它是用directives寫在Vue實(shí)例中，這時directive要加“s”變?yōu)閺?fù)數(shù)。指令名不用字符串格式，指令名和directives都是以對象的形式來寫，其中的鉤子函數(shù)寫法和全局一樣。當(dāng)指令寫好后，直接在html元素中使用v-指令名即可。

局部注冊自定義指令，代碼如下：

    directives:{
       content:{
        inserted:el=>{
        el.value='請輸入內(nèi)容';
        }
       }
    }

在頁面中用v-指令名引用即可，代碼如下：

    <input type="text" v-focus v-content/>

2．全局注冊

全局注冊自定義指令：作用在全局，寫法是在Vue實(shí)例前用Vue.directive()方法，directive不用加“s”。在這個方法中傳入兩個參數(shù)，第一個參數(shù)是指令名，指令名要求是字符串；第二個參數(shù)是一個對象，在對象中屬性為鉤子函數(shù)，這很像Ajax中的success回調(diào)函數(shù)，在鉤子函數(shù)中傳入?yún)?shù)（如el、binding、VNode、oldVnode），根據(jù)參數(shù)進(jìn)行編寫。

全局注冊自定義指令，代碼如下：

提示：全局注冊用directive，末尾是沒有“s”的，局部注冊是有“s”的。

    Vue.directive('focus',{
       inserted:function(el){
       el.focus()//添加焦點(diǎn)事件，也可以給DOM元素添加其他，例如在<input>標(biāo)簽中用到el.value='請輸入內(nèi)容'
       }
    })