hello
 

在html中，我們看到了兩個(gè)指令v-css和v-focus

我們自定義指令時(shí)候，一定前面要帶上v-

Vue.directive("css",{
 //鉤子函數(shù) ,el就是當(dāng)前元素
 inserted(el,binding){
 //el綁定的元素本身
 //binding就是css指令里面的的對(duì)象元素
 let styleobj=binding.value,arr=[];
 for(let key in styleobj){
  arr.push(key+":"+styleobj[key])
  }
 arr=arr.join(";");
 el.style.cssText=arr;
 },
 bind(el,binding) {
 //指令綁定在元素上時(shí)候執(zhí)行，只執(zhí)行一次
 }
});
 new Vue({
　　 el:'#app',
 data:{
  show:true
 },
 directives:{
 focus:{
  inserted(el,binding){
  //el綁定的元素本身
  //binding就是css指令里面的的對(duì)象元素
  el.focus();
  }
  }
 }
 });

在js里面我們可以看到

Vue.directive("css",{}）

我們?cè)?new Vue外部定義了這樣一段代碼,這就是我們?nèi)肿远x指令的模板方式

• css是自定義指令的名字

• {}里面我們寫上鉤子函數(shù)就可以

我們所有的鉤子函數(shù)里面，基本都會(huì)有2個(gè)參數(shù)el,binding

• el: 指令所綁定的元素，可以用來直接操作 DOM 。

• binding 綁定元素本身的一個(gè)對(duì)象

• 

從上面我們可以看到，binding里面保留綁定指令的name和value，這些很重要

局部自定義指令

directives:{
 name:{

 }
 }

區(qū)別在于，我們寫在new Vue里面，里面api操作和上面的全局自定義指令一樣

下面我們開始看代碼運(yùn)行結(jié)果

我們可以看到樣式引用上去了

文本框也獲取了焦點(diǎn)

關(guān)于“vue.js內(nèi)部自定義指令與全局自定義指令的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。