自定義指令

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

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

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

全局注冊指令：
在main.js中為vue對象添加：

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

使用直接在標簽上面寫v-指令名稱即可：

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

局部注冊與使用：

<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中寫指令directives:{//指令名稱"focus":{//在指令被插入到頁面中時調(diào)用inserted(el){//el代表內(nèi)添加v-focus的元素，為它聚焦    el.focus()}}}
}
</script>

實現(xiàn)一個自定義指令

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

<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中寫指令directives:{//指令名稱"color":{//在指令被插入到頁面中時調(diào)用inserted(el,binding){//el代表內(nèi)添加v-color的元素，為它添加字體顏色  el.style.color=binding.value},//在屬性值更新時調(diào)用update(el,binding){//為color更新顏色el.style.color=binding.value},}}
}
</script>

效果：

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

v-loading指令封裝

分析:

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

具體步驟實現(xiàn):
1.準備一個loading 類，通過偽元素定位，設置寬高，實現(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.開啟關(guān)閉 loading 狀態(tài)(添加移除蒙層)，本質(zhì)只需要添加移除類即可

export default {name: "App",data() {return {//顯示內(nèi)容msg: "你好!vue",//判斷是否加載成功isloading:true};},created(){//模擬發(fā)送請求，返回數(shù)據(jù)花費了3秒鐘setTimeout(() => {console.log(this.msg);//接收數(shù)據(jù)成功，將數(shù)據(jù)改為false顯示頁面this.isloading = false;}, 3000);},//在directives中寫指令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é)合自定義指令的語法進行封裝復用
為標簽添加v-loading = “數(shù)據(jù)”

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

效果進入頁面時：

模擬請求完成之后：