Vue中指令操作dom
2019-01-01 本文已影响0人
咸鱼前端
<body>
<div id="app">
<button v-color="flag">变色</button>
<div v-drag class="dragDiv"></div>
<div v-drag class="dragDiv"></div>
</div>
<script type="text/javascript" src="node_modules/axios/dist/axios.js"></script>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
directives: {
color:function(el,bindings){
el.style.background = bindings.value
//el代表的是绑定了这个自定义事件的dom元素,bingings代表color现在的属性，例如expression，name，rawName，value
},
drag:function(el){
el.onmousedown = function(e){
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function(e){
el.style.left = e.pageX - disx+"px";
el.style.top = e.pageY-disy+"px";
}
document.onmouseup = function(){
document.onmousedown = document.onmousemove = null;
}
e.preventDefault();//避免一些默认行为，这里先停止一下
}
}
},
el: "#app",
data: {
flag:"blue"
}
})
</script>
</body>
