Vue-自定义指令(属性指令和元素指令)
2019-05-17 本文已影响0人
瑟闻风倾
1. 自定义指令属性指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-focus v-color="keyColor" placeholder="请输入名称关键字进行搜索" v-model="keyName">
</div>
</body>
<script type="text/javascript">
/*1.在Vue1.0中提供了一个接口Vue.directive(自定义指令名称，回调函数)来自定义属性指令。在定义属性指令名称时不需加v-前缀，但是在使用时需要加v-前缀。*/
//eg1:自定义一个v-focus的指令(只有指令名称)：实现当前使用v-focus指令的文本框自动获取焦点(未实现)
Vue.directive("focus",function(){
console.log("搜索框获取焦点");
//(1)获取当前使用了v-focus指令的dom对象
var inputObj = this.el;//this为当前自定义的指令对象
console.log(inputObj);
//(2)dom对象获取焦点
inputObj.focus();
});
//eg2:自定义一个v-color的指令(不仅有指令名称还有表达式构成的指令)：实现当前使用v-color指令的元素的文本颜色和data中定义好的颜色值一致
Vue.directive("color",function(){
//(1)获取当前使用了v-focus指令的dom对象
var inputObj = this.el;//this为当前自定义的指令对象
//(2)获取v-color="keyColor"中keyColor变量的值，并赋值给dom对象的文本颜色
//说明：this.vm.keyColor虽能直接获取变量keyColor的值，但当data中变量名keyColor被修改指令函数中也需对应进行修改，且无法解决多处用到v-color指令且颜色值不同的情况
//console.log(this.vm.keyColor);
console.log(this.expression);//获取当前指令的值keyColor(keyColor是data中的一个变量名）
inputObj.style.color = this.vm[this.expression];//vm为使用了当前指令的元素所在区域的调度者VM
});
//注意：自定义属性指令Vue.directive(自定义指令名称，回调函数)其实是Vue.directive(自定义指令名称，对象)的简略写法；
// 自定义元素指令只能通过Vue.elementDirective(自定义指令名称，对象)来定义
//eg3:自定义一个v-color的指令的简略写法
/*Vue.directive("color",{
bind:function(){
this.el.style.color = this.vm[this.expression];
}
});*/
var vm = new Vue({
el:"#app",
data:{
keyName:"",
keyColor:"blue"
}
});
</script>
</html>
2. 自定义元素(标签)指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<my-green>搜索条件：</my-green><input type="text" placeholder="请输入名称关键字进行搜索" v-model="keyName">
</div>
</body>
<script type="text/javascript">
/*2.在Vue1.0中提供了一个接口Vue.elementDirective(自定义指令名称，对象)来自定义元素(标签)指令。在定义元素指令名称时可以加v-前缀，使用时和名称保持一致。*/
//eg1:定义一个元素指令my-green：实现被元素包裹的内容文字颜色为绿色
Vue.elementDirective("my-green",{
bind:function(){
this.el.style.color = "green";
}
})
var vm = new Vue({
el:"#app",
data:{
keyName:""
}
});
</script>
</html>
