...大约 2 分钟
Vue.directive
vue.directive是为了创建指令,就是平常用的v-model和v-show,这个静态方法可以创建自定义的指令。
列如要实现这样一个效果,在打开页面时候,出现一个加载loading,在数据请求完成之后自动的隐藏掉,可能大概会想到,写一个组件,每个页面引入一次,这样做绝对是没问题,但是是不是模版中每个组件都要引入是不是太麻烦了,实际上我们完全可以写一个指令来取代之。下边事具体的写法:
Vue.directive('loading', {
update(el, binding, vNode, oldVNode) {
if (binding.value) {
const lDiv = document.createElement('div');
lDiv.id = "loading";
lDiv.innerHTML = "加载中..."
lDiv.style.position = 'fixed';
lDiv.style.top = 0;
lDiv.style.width = "100%";
lDiv.style.height = "100%";
lDiv.style.backgroundColor = '#333';
lDiv.style.fontSize = "20px";
lDiv.style.color = "#fff";
document.body.appendChild(lDiv)
} else { document.body.removeChild(document.getElementById("loading"))
}
},
})
new Vue({
el: "#app",
data() {
return {
isLoading: false,
data: ""
}
},
methods: {
update() {
this.isLoading = true;
setTimeout(() => {
try {
let a = void (0);
console.log(a.b)
} catch (error) {
this.isLoading = false
}
}, 3000)
}
},
})
<div id=app>
<div v-loading="isLoading">{{data}}</div>
<button @click="update">更新数据</button>
</div>
以上为定义了一个v-loading的指令,一般在update函数中放数据请求,但是在接受返回值的时候建议用try{}catch(err){}
进行包括,catch里边放隐藏代码
自定义指令不只有update的方法,还有inserted(当被绑定的元素插入到 DOM 中时触发),等等好多方法具体请参考vue官方文档-自定义指令
同时我把vue关于块的源码页贴出来,分析此时directive中,第二个参数是不是只能是对象,并且我们自定义的指令存在哪里

从上边代码可一看出,vue在自定义指令函数实际上是个匿名函数,他在一个闭包函数中type就是directive,id即为指令的id,definition就是我们传进来的对象;
先判断definition不为真就把他在this.options中定义的返回传进来的函数,总之当definition是一个函数时候,就把他绑定bind方法和update方法值都是它本身,如果都不是的话就options中的directive对象中增加这个对象,最终返回这个对象;
通过阅读源码发现,我们自定义的组件都在this.options.directive对象里边,那我们在控制台打印,如图:
显然看到前两个是默认的,也是最常用的,最后一个是自定义的,这时候任何时候都能用到这个指令了。
Powered by Waline v2.15.8