<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>directive用法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" v-loading=isLoading> <div>{{data}}</div> <button @click="update">更新</button> </div> </body> </html> <script> new Vue({ el:"#app", data() { return{ isLoading:false, data:'' } }, methods:{ update() { this.isLoading = true setTimeout(() => { this.data = '获取到的用户数据' this.isLoading = false },3000) } } }) Vue.directive('loading',{ update(el,binding,vonde) { console.log(el,binding,vonde) if(binding.value) { const div = document.createElement('div') // createElement() 方法通过指定名称创建一个元素 div.innerText = '加载中...' div.setAttribute('id','loading') // setAttribute() 方法添加指定的属性，并为其赋指定的值。 div.style.position = 'fixed' div.style.top = 0 div.style.left = 0 div.style.width = '100%' div.style.height = '100%' div.style.display = 'flex' div.style.justifyContent = 'center' // justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 div.style.alignItems = 'center' // align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 div.style.color = 'white' div.style.background = 'rgba(0,0,0,0.7)' document.body.append(div) } else { document.body.removeChild(document.getElementById('loading')) //removeChild() 方法可从子节点列表中删除某个节点。 } } }) </script>