<!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>
