除了核心指令(v-model和v-for)等外,Vue也允许我们自定义指令。
<div id="box"> <span v-text="msg"></span> </div> <script type="text/javascript"> var vm = new Vue({ data:{ msg:'hello', }, }).$mount('#box'); </script>
这里的v-text也是默认的指令,是用来输出msg的,等同于直接写{{msg}}。
需求:我们现在来自定义一个指令v-red,来修改HTML元素的背景色为红色:
<div id="box"> <span v-text="msg"></span> <span v-red>welcome</span> </div> <script type="text/javascript"> Vue.directive('red',{ inserted:function(el){ el.style.background = 'red'; } }); var vm = new Vue({ data:{ msg:'hello', }, }).$mount('#box'); </script>
注意我们定义的指令名是red,但在使用的是是v-red,这是Vue的规范。
下面我们在定义一个指令v-drag,来实现HTML元素的拖拽
Vue.directive('drag',{ inserted:function(el){ var oDiv = el; oDiv.onmousedown = function(ev){ var disX = ev.clientX - oDiv.offsetLeft; var disY = ev.clientY - oDiv.offsetTop; document.onmousemove = function(ev){ var l = ev.clientX - disX; var t = ev.clientY - disY; oDiv.style.left = l + 'px'; oDiv.style.top = t + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; }; } }); var vm = new Vue({ el:'#box', });
然后你可以在模板中DIV元素上使用v-drag属性:
<div :style="{width:'100px',height:'100px',background:'blue',position:'absolute',right :0,top:0}" v-drag> </div>