<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div v-zyh.a.b="msg"></div>
<button v-add.click="handleClick">点击</button>
<div class="box" v-color="color"></div>
</div>
<hr>
<div id="app1">
<div v-zyh.a.b="msg"></div>
<button v-add.click="handleClick">点击</button>
<div class="box" v-color="color"></div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
Vue.directive("zyh",(el,{modifiers,value})=>{
let {a,b} = modifiers;
el.innerText = value;
if(a){
el.style.color="#c33";
}
if(b){
el.style.fontWeight="900"
}
})
Vue.directive("add",(el,{modifiers,value})=>{
let {click} = modifiers;
if(click){
el.addEventListener("click",value);
}
})
// Vue.directive("color",(el,{modifiers,value})=>{
// value = value || '#000';
// el.style.background= value
// })
new Vue({
el:"#app",
data:{
msg:'1905',
color:"#c33"
},
methods:{
handleClick(){
alert(1);
}
},
directives:{
"color"(el,{modifiers,value}){
value = value || '#000';
el.style.background= value
}
}
})
new Vue({
el:"#app1",
data:{
msg:'1905',
color:"#c33"
},
methods:{
handleClick(){
alert(1);
}
}
})
/*
自定义指令编写的方式有2种
1、全局自定义指令
全局的指令必须要在实例化之前进行定义
Vue.directive(参数1,参数2)
参数1: 指令的名称
参数2: 指令实现的函数
参数1: el 指令作用的元素
参数2: 对象 {modifiers:修饰符 value:表达式的结果}
2、局部自定义指令
在vue中添加一个熟悉 directives key值是指令名称 value是指令实现的函数
*/
</script>