Vuejs 1.0中的自定义指令主要有两种:
1.属性自定义指令 2.元素自定义 指令
1.属性自定义指令
Vue.directive(name(仅仅是自定义名 没有v-),function(参数){
this.el // 获取原生DOM元素
})
这里是 属性自定义指令 的举例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="vue1.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
<div id="box">
//自定义指令绑定必须以 v- 开头 ,再加上自定义的指令名
<span v-red>第一个自定义指令</span>
<span v-can="obj">战俘</span>
</div>
</body>
</html>
<script type="text/javascript">
// 调用自定义指令名为red的指令,并执行这个函数方法
Vue.directive('red',function(){
//通过el.style.给这个元素添加属性,就像CSS一样
this.el.style.background = 'red';
})
//想通过一个指令传递多个属性 可以用对象的方法
//这里 现在 data中定义了一个obj对象,把想要的属性都放到这个对象里,再通过自定义指令函数传递obj参数 通过.语法获得obj的各种属性
Vue.directive('can', function(obj){
// 传参
this.el.innerHTML = obj.msg;
this.el.style.background = obj.color;
});
new Vue({
data:{
obj:{
msg:'kiki',
color:'red'
}
}
}).$mount("#box");
</script>
第二种自定义属性指令写法:
<div id='box'>
<span v-red=' "pink" '>简化形式,不用在data中写数据,可以直接通过单双引号的套用直接传递进去想要的属性值,前提是要和自定义指令的函数方法的参数一致</span>
</div>
<script>
//自定义指令
Vue.directive('red' , function(color){
this.el.style.background=color;
}
var vm = new Vue({
el:'#box',
data:{
}
})
</script>
2.元素自定义 指令———————
Vue.elementDirective(name,{
bind:function(){}
})元素自定义指令 (不常用)自定义标签 <标签名>
<body>
<div id="box">
<-- 自定义标签 --> <rose>战俘</rose>
</div>
</body>
</html>
<script type="text/javascript">
// 自定义元素指令 自定义标签名,需要执行的函数方法
Vue.elementDirective('rose',{
//需要写bind 去绑定
bind:function(){
this.el.style.background = "pink";
}
});
new Vue({
}).$mount("#box");
</script>
键盘码指令:
@keydown.enter/a/c/v等
<input type="text" name="" @keydown.enter='show()'/>
自定义键盘信息:
<body>
<div>
<input type='text' @keydown.enter='show()'>
</div>
</body>
<script>
// 获取键盘码 eg:只要键盘任意键摁下,就会console.log出它的键盘码
// document.onkeydown = function(ev){
// console.log(ev.keyCode);
// }
// 自定义键盘信息
Vue.directive('on').keyCodes.enter= 13;
new Vue({
methods:{
show:function(){
alert(1);
}
}
}).$mount("#box");
</script>
“`