例：自定义键盘信息
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(111);
}
}
});
}
<input type="text" @keydown.ctrl="show">
<hr>
<input type="text" @keydown.myenter="show | debounce 2000">
自定义指令
1、Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象
2、钩子函数：将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令
bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用
Vue.directive('my-directive',{
bind : function(){
//准备工作
//例如，添加事件处理器或只需要运行一次的高耗任务
},
update : function(){
//值更新时的工作
//也会以初始值为参数调用一次
},
unzind : function(){
//清理工作
//例如，删除bind()添加的事件监听器
}
})
//调用
<div v-my-directive="someValue"></div>
//只需要update函数，可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})
<!-- 如果指令需要多个值，可以传入一个js对象 -->
<!-- 指令可以使用合法的js表达式 -->
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>
当指令使用字面修饰符，值将按普通字符串处理并传递给update方法，update方法只调用一次，因为普通字符串不能影响数据变化
<body id="example">
<div id="demo" v-demo.literal="foo bar baz"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value); //foo bar baz
})
var demo = new Vue({
el : '#demo'
})
</script>
3、以属性的形式使用自定义属性
<body id="demo">
<my-directive class="hello" name="hi"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
//api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
})
var demo = new Vue({
el : '#demo'
})
</script>
4、自定义属性用在对象上，对象内部属性变化的时候触发update，在指令定义对象中指定deep:true
<body id="demo">
<div v-my-directive="a"></div>
<button @click="change">change</button>{{a,b,c}}
</body>
<script>
Vue.directive('my-directive',function(){
deep : true,
update : function(obj){
//当obj的嵌套属性变化时候调用
console.info(obj.b.c);
}
})
var demoVM = new Vue({
el : '#demo',
data : {
a : {b : {c : 2}}
},
method : {
change : function(){
demoVM.a.b.c = 4;
}
}
})
</script>
5、acceptStatement让自定义指令接受内联语句
<body id="demo">
<div v-my-directive="a++"></div>
{{a}}
</body>
<script>
Vue.directive('my-directive',function(){
acceptStatement : true,
update : function(fn){
//当obj的嵌套属性变化时候调用
console.info(fn.toString())
fu();
}
})
var demoVM = new Vue({
el : '#demo',
data : {
a : 5
}
})
</script>
6、v-on绑定多个事件时，要是是不同的事件类型，例如点击，focus，change，会按照业务需求进行
选择，要是绑定了2个甚至多个click事件，那么v-on只会绑定第一个click事件
附自定义拖拽指令
<body>
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
</div>
</body>
<script>
window.onload=function(){
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',
data:{
msg:''
}
});
};
</script>
字面指令
如果在创建自定义指令的时候传入 isLiteral: true ，那么特性值就会被看成直接字符串，并被赋值给该指令的 expression。字面指令不会试图建立数据监视。
例子：
<div v-literal-dir="foo"></div>
Vue.directive('literal-dir', {
isLiteral: true,
bind: function () {
console.log(this.expression) // 'foo'
}
})
动态字面指令
然而，在字面指令含有 Mustache 标签的情形下，指令的行为如下：
指令实例会有一个属性，this._isDynamicLiteral被设为true；
如果没有提供update函数，Mustache 表达式只会被求值一次，并将该值赋给this.expression。不会对表达式进行数据监视。
如果提供了update函数，指令将会为表达式建立一个数据监视，并且在计算结果变化的时候调用update。
双向指令
如果你的指令想向 Vue 实例写回数据，你需要传入 twoWay: true 。该选项允许在指令中使用
this.set(value)。
Vue.directive('example', {
twoWay: true,
bind: function () {
this.handler = function () {
// 把数据写回 vm
// 如果指令这样绑定 v-example="a.b.c",
// 这里将会给 `vm.a.b.c` 赋值
this.set(this.el.value)
}.bind(this)
this.el.addEventListener('input', this.handler)
},
unbind: function () {
this.el.removeEventListener('input', this.handler)
}
})
元素指令
有时候，我们可能想要我们的指令可以以自定义元素的形式被使用，而不是作为一个特性。这与 Angular 的 E 类指令的概念非常相似。元素指令可以看做是一个轻量的自定义组件（后面会讲到）。你可以像下面这样注册一个自定义的元素指令：
Vue.elementDirective('my-directive', {
// 和普通指令的 API 一致
bind: function () {
// 对 this.el 进行操作...
}
})
使用时我们不再用这样的写法:
<div v-my-directive></div>
而是写成:
<my-directive></my-directive>
元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。
网友评论