自定义指令是vue给我们提供的操作dom的空间。可以用来封装插件。
我们来模拟下，element-ui的loading的指令服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"></script>
<style>
.active{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<jos v-josson.fulls="flag"></jos>
</div>
</body>
<script>
Vue.directive("josson",{
inserted:function(el,binding,vnode){
console.log(binding)
if(binding.value){
var img = document.createElement("img");
img.src ="../timg.gif"
if(binding.modifiers.full){
img.className = "active"
}
el.appendChild(img);
}
},
update:function(el,binding,vnode){
if(binding.value){
var img = document.createElement("img");
img.src ="../timg.gif"
img.className = "active"
el.appendChild(img);
}else{
var imgs = el.getElementsByTagName("img")[0];
console.log(imgs)
el.removeChild(imgs);
}
}
})
Vue.component("jos",{
props:["a"],
data:function(){
return {
flag :true
}
},
template:"<h1>josson</h1>",
methods:{
}
})
var app=new Vue({
el:"#app",
data:{
flag:true
},
methods:{
}
})
</script>
</html>
