image.png
Directive指令
1.0自定義指令
兩種寫法
1.1聲明一個全局指令
Vue.directive('x',directiveOptions)
自己試寫當(dāng)用戶點(diǎn)擊時打印一個x
Vue.directive('x', {)
inserted: function(el) {
el.addEventListener('click',()=>{console.log('x')})
},//當(dāng)元素被插入到頁面眷篇，就監(jiān)聽click事件，元素是全局指令，把v-x放到哪個元素上桥爽，el就是那個元素
})
到中文文檔搜索directive
image.png
屬于元素綁定自定義事件
image.png
1.2聲明一個局部指令
<script>//.src/components/HelloWorld.vue
export default{
name: "HelloWorld",
directives:{
'x': {
inserted(el){
el.addEventListener('click',()=>{console.log('x')})
}
},
},
局部指令在這里聲明贮勃，只能在這個組件中用（HelloWorld.vue）忆矛，組件中的組件也不行
1.3directiveOptions有哪些屬性
image.png
2.0.v-on如何實(shí)現(xiàn)綁定事件
不用v-on的v-on
new Vue({
directives:{
'on2':{
inserted(el,info){
el.addEventListener(info.arg,info.value)//
聲明一個on2的指令舌剂，當(dāng)元素被插入到頁面气破，就監(jiān)聽這個元素的一個事件聊浅，對應(yīng)方法是用戶傳的值（info.arg,info.value）
info.value就是要打印的hi
}
}
}
})
info會展示用戶信息
image.png
v-on不會只有一行代碼這么簡單，存在事件委托现使，
添加了事件監(jiān)聽低匙，要記得在恰當(dāng)?shù)臅r間刪掉，否則添加的越來越多
image.png
當(dāng)從頁面消失就刪除
2.1指令的作用
image.png
mounted(){
this. $el.querySelector('#h1).addEventListener('click',()=>console.log('x'))
},
beforeDestroy(){
3.0混入mixin
image.png
