vue.js內(nèi)部自定義指令與全局自定義指令的示例分析

發(fā)布時(shí)間：2021-07-26 09:38:27 來源：億速云閱讀：109 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)vue.js內(nèi)部自定義指令與全局自定義指令的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

directive

這個(gè)單詞是我們寫自定義指令的關(guān)鍵字哦

自定義指令為我們提供了幾個(gè)鉤子函數(shù)，這時(shí)候你一定好奇什么是鉤子函數(shù)，說簡單點(diǎn)，就是集中表現(xiàn)狀態(tài)

bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind: 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

下面我們開始上代碼，讓我們更好的理解自定義指令怎么做

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
 
 <div class="ab" v-css="{'color':'red','font-size':'30px'}">
 hello
 </div>
 <input type="text" v-focus>
 </div>
 
</body>
</html>

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

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

Vue.directive("css",{
 //鉤子函數(shù) ,el就是當(dāng)前元素
 inserted(el,binding){
 //el綁定的元素本身
 //binding就是css指令里面的的對象元素
 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指令里面的的對象元素
  el.focus();
  }
  }
 }
 });

在js里面我們可以看到

Vue.directive("css",{}）

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

css是自定義指令的名字
{}里面我們寫上鉤子函數(shù)就可以

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

el: 指令所綁定的元素，可以用來直接操作 DOM 。
binding 綁定元素本身的一個(gè)對象

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

局部自定義指令

directives:{
 name:{

 }
 }

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

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

vue.js內(nèi)部自定義指令與全局自定義指令的示例分析

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

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

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

向AI問一下細(xì)節(jié)

vue.js內(nèi)部自定義指令與全局自定義指令的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽