自定义指令
使用Vue的静态方法directive,我们可以定义属于自己的指令。
格式:Vue.directive(指令的名字, 回调函数)
例子:
<div id='app'> <span v-red>vue</span> </div> <script src='../js/vue.js'></script> <script> Vue.directive('red', function(){ this.el.style.color = 'red'; }); new Vue({ el : '#app' }); </script>
标签使用了v-red指令后,字体颜色会变红。回调函数里的this.el就是被绑定的v-red的span。 需要注意的是,directive函数里的指令名字不要带v-
指令传参
指令后面加上 = “”可以以字符串的形式传参。(而且也只能以字符串的形式传递参数)
如 :
v-set="{size:'40px', color:'blue'}"
例子 :
<div id='app'> <span v-set='{size : "40px", color : "blue"}'>hello</span> </div> <script src='../js/vue.js'></script> <script> Vue.directive('set', function(json){ this.el.style.fontSize = json.size; this.el.style.color = json.color; }); new Vue({ el : '#app' }); </script>
自定义拖拽指令
<div id='app'> <div class='box' v-drag></div> </div> <script src='../js/vue.js'></script> <script> Vue.directive('drag', function(){ var div = this.el; div.onmousedown = function(e){ disX = e.clientX - div.offsetLeft; disY = e.clientY - div.offsetTop; document.onmousemove = function(e){ var l = e.clientX - disX; var t = e.clientY - disY; div.style.left = l + 'px'; div.style.top = t + 'px'; } document.onmouseup = function(){ document.onmousedown = document.onmousemove = null; } } }); new Vue({ el : '#app' }); </script>