自定義指令

像 v-html，v-if，v-for都是vue內(nèi)置指令，而我們也可以封裝自定義指令，提升編碼效率。

什么是自定義指令？
自己定義的一些指令，可以進(jìn)行一些dom操作，擴(kuò)展格外的功能。比如讓圖片懶加載，讓input自動(dòng)聚焦。
自定義指令又分為全局注冊(cè)和局部注冊(cè)。

使用方法則是與內(nèi)置指令一樣，直接在標(biāo)簽上寫(xiě)v-指令名即可。

全局注冊(cè)指令：
在main.js中為vue對(duì)象添加：

//focus是指令名稱
Vue.directive('focus',{
//inserted是指令的生命周期函數(shù)，指再頁(yè)面中插入此元素時(shí)調(diào)用inserted(el){
//為元素聚焦el.focus()}
} 
)

使用直接在標(biāo)簽上面寫(xiě)v-指令名稱即可：

    <input  type="text" v-focus :value="msg"  ref="inp">

局部注冊(cè)與使用：

<template><div><!-- 添加v-指令名稱 v-focus --><input  type="text" v-focus :value="msg"  ref="inp"></div>
</template><script>
export default {data(){return{}},props:{msg:String},mounted(){},//在directives中寫(xiě)指令directives:{//指令名稱"focus":{//在指令被插入到頁(yè)面中時(shí)調(diào)用inserted(el){//el代表內(nèi)添加v-focus的元素，為它聚焦    el.focus()}}}
}
</script>

實(shí)現(xiàn)一個(gè)自定義指令

定義一個(gè)color指令為標(biāo)簽修改顏色，color指令需要一個(gè)顏色值，傳入不同的值，標(biāo)簽文字顯示不同顏色
通過(guò)binding.value可以取到當(dāng)前指令的值，再通過(guò)value去修改標(biāo)簽。
代碼：

<template><div><div v-color="color1">你好 vue</div>  <div v-color="color2">你好 vue</div>  </div>
</template><script>
export default {data(){return{color1:'red',color2:'blue'}},props:{msg:String},mounted(){},//在directives中寫(xiě)指令directives:{//指令名稱"color":{//在指令被插入到頁(yè)面中時(shí)調(diào)用inserted(el,binding){//el代表內(nèi)添加v-color的元素，為它添加字體顏色  el.style.color=binding.value},//在屬性值更新時(shí)調(diào)用update(el,binding){//為color更新顏色el.style.color=binding.value},}}
}
</script>

效果：

其中修改data的color1和color2就會(huì)修改字體顏色。
總結(jié)：

v-loading指令封裝

分析:

1.本質(zhì)loading 效果就是一個(gè)蒙層，蓋在了盒子上
2.數(shù)據(jù)請(qǐng)求中，開(kāi)啟loading狀態(tài)，添加蒙層
3.數(shù)據(jù)請(qǐng)求完畢，關(guān)閉loading狀態(tài)，移除蒙層

具體步驟實(shí)現(xiàn):
1.準(zhǔn)備一個(gè)loading 類，通過(guò)偽元素定位，設(shè)置寬高，實(shí)現(xiàn)蒙層

.loading:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background:#fff url('./assets/91jiazai.png') no-repeat center;
}

2.開(kāi)啟關(guān)閉 loading 狀態(tài)(添加移除蒙層)，本質(zhì)只需要添加移除類即可

export default {name: "App",data() {return {//顯示內(nèi)容msg: "你好!vue",//判斷是否加載成功isloading:true};},created(){//模擬發(fā)送請(qǐng)求，返回?cái)?shù)據(jù)花費(fèi)了3秒鐘setTimeout(() => {console.log(this.msg);//接收數(shù)據(jù)成功，將數(shù)據(jù)改為false顯示頁(yè)面this.isloading = false;}, 3000);},//在directives中寫(xiě)指令directives:{//指令名稱"loading":{inserted(el,binding){//如果值為true添加偽類 ，否則不添加binding.value?el.classList.add('loading'):el.classList.remove('loading')},update(el,binding){//如果值為true添加偽類 ，否則不添加binding.value?el.classList.add('loading'):el.classList.remove('loading')}}}
};

3.結(jié)合自定義指令的語(yǔ)法進(jìn)行封裝復(fù)用
為標(biāo)簽添加v-loading = “數(shù)據(jù)”

<template><div id="app"><div class="box" v-loading="isloading">{{ msg }}</div>
</div>
</template>

效果進(jìn)入頁(yè)面時(shí)：

模擬請(qǐng)求完成之后：