首先需要注意的是不管是自定义局部属性还是全局属性,中间的字母都不要大写(首字母可以),否则会报错
具体内容如有需要请看另一篇文章:https://blog.csdn.net/hst_gogogo/article/details/94456377
一、自定义全局指令
自定义全局指令需在Vue.directive()中注册,需要接受两个参数,分别为'指令名称'以及钩子函数(4个:bind、inserted、update、unbind,链接作用域与DOM,用于创建可以操作DOM的指令),具体用法见如下代码及注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zz{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">
<!--第二步:使用指令,方式一:这里的blue是实参,obj.arg的值即为blue-->
<p v-color:blue>蓝色文字</p>
<p v-color:yellow>黄色文字</p>
<p v-color:pink>粉色文字</p>
<p v-color:lime>绿色文字</p>
<p v-color:orange>橙色文字</p>
<!--Property or method "purple" is not defined on the instance but referenced during render-->
<!--方式二:purple看作一个变量,没有定义,需要在data中定义,然后obj.value的值为purple-->
<p v-color='purple'>紫色文字</p>
<button @click="showOrHide()">点击显示或隐藏正方形</button>
<!--<div id="zz" v-if="{{ifExists}}"></div>-->
<div id="zz" v-if='ifExists'></div>
</div>
<script src="../0701LessCouse/js/vue.js"></script>
<script>
// 第一步:定义指令: Vue.directive('指令名',{钩子函数(4个,均可选)})
Vue.directive('color',{
bind:function(el,obj){
//指令绑定到标签上
console.log('绑定成功。。。')
},
inserted(el,obj){
//标签插入到页面中,在此处书写自己的代码
// el当前标签 ,,obj.arg参数,可以取其他名字
console.log(el,obj);
if(obj.arg){
el.style.color = obj.arg;
}else{
el.style.color = obj.value;
}
},
update(el,obj){
// 数据更新
console.log('数据更新喽。。。')
},
unbind(el,obj){
console.log('解除绑定啦~~~')
}
});
// 要实例化Vue对象
new Vue({
el:'#box',
data:{
purple:'purple',
ifExists:true
},
methods:{
showOrHide(){
// this.ifExists = !this.ifExists;
this.ifExists = false;
}
}
})
</script>
</body>
</html>
全局的自定义指令可以在多个过载了Vue实例的DOM对象中使用。
二、自定义局部指定
自定义局部指令定义在directives中,用法和全局指令一样,只不过只能在通过el:'#app'获取的挂载元素内部使用:如下例中的自定义指令就只能在id为box这个div内部的元素中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
<p v-color:red>红色文字</p>
<p v-color:pink>粉色文字</p>
<p v-color:lime>绿色文字</p>
<div v-Obgcolors:pink></div>
</div>
<script src="../0701LessCouse/js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
directives:{
color:{
inserted(el,obj){
el.style.color = obj.arg;
}
},
Obgcolors:{
inserted(el,obj){
console.log(el,obj);
if(obj.arg){
el.style.background = obj.arg;
}else{
el.style.background = obj.value;
}
}
}
}
})
</script>
</body>
</html>