跳至主要內容

Mr.Cao...大约 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官方文档-自定义指令open in new window

同时我把vue关于块的源码页贴出来,分析此时directive中,第二个参数是不是只能是对象,并且我们自定义的指令存在哪里

自定义指令源码截图
  • 从上边代码可一看出,vue在自定义指令函数实际上是个匿名函数,他在一个闭包函数中type就是directive,id即为指令的id,definition就是我们传进来的对象;

  • 先判断definition不为真就把他在this.options中定义的返回传进来的函数,总之当definition是一个函数时候,就把他绑定bind方法和update方法值都是它本身,如果都不是的话就options中的directive对象中增加这个对象,最终返回这个对象;

  • 通过阅读源码发现,我们自定义的组件都在this.options.directive对象里边,那我们在控制台打印,如图:

    {Vue}

显然看到前两个是默认的,也是最常用的,最后一个是自定义的,这时候任何时候都能用到这个指令了。

上次编辑于:
贡献者: Caofangshuai
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8