vue的directive指令

最新推荐文章于 2024-06-27 22:30:00 发布

mldwyy

最新推荐文章于 2024-06-27 22:30:00 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/mldwyy/article/details/104942434

版权

1.directive的作用：
可以用于自定义全局指令
2.directive的使用：
2.1定义指令：

Vue.directive('指令名',{update(el,binding,vnode){}})

这里的el指的是添加了指定的元素结点；
这里的update是一个钩子函数，表示在使用指令的结点更新时调用，其他的钩子函数还有：(摘自vue官方文档)
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

2.2使用指令：

<div v-指令名='true'>{{msg}}</div>

3.实现加载等待的完整代码如下：

<body>
<div id="app">
    <button @click='update'>update</button>
    <div v-loading='isLoading'>{{msg}}</div>
</div>
</body>
<script>
    Vue.directive('loading',{
        update(el,binding,vnode){
            console.log(el,binding,vnode);
            if (binding.value) {
                const div = document.createElement('div')
                div.innerText = '加载中'
                div.setAttribute('id','loading')
                div.style.position = 'fixed'
                div.style.left = 0
                div.style.top = 0
                div.style.width = '100%'
                div.style.height = '100%'
                div.style.display = 'flex'
                div.style.justifyContent = 'center'
                div.style.alignItems = 'center'
                div.style.color = 'white'
                div.style.background = 'rgba(0,0,0,.7)'
                document.body.append(div)
            } else {
                document.body.removeChild(document.getElementById('loading'))
            }
        }
    })
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'',
            isLoading:false
        },
        methods:{
            update() {
                this.isLoading=true
                setTimeout(()=>{
                    this.msg='hello'
                this.isLoading=false
                },3000)
            }
        }
    })

</script>

mldwyy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的directive指令

1.directive的作用：可以用于注册全局指令2.directive的使用：定义指令：这里的update表示在使用指令的结点更新时调用，还有Vue.directive('指令名',{update(el,binding,vnode){}})使用指令：<div v-指令名='isLoading'>{{msg}}</div>Vue.directive('lo...
复制链接

扫一扫