Vue自定义指令
Vue指令的声明周期函数:
Vue.directive('gqs',{
bind() {
// 当指令绑定到 HTML 元素上时触发.**只调用一次**
console.log('bind triggerd')
},
inserted() {
// 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
console.log('inserted triggerd')
},
updated() {
// 所在组件的`VNode`更新时调用.
console.log('updated triggerd')
},
componentUpdated() {
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
console.log('componentUpdated triggerd')
},
unbind() {
// 只调用一次,指令与元素解绑时调用.
console.log('unbind triggerd')
}
})
-unbind()
一个把元素从DOM删除触发unbind().—> 仅仅是删除.
-componentUpdated()
一个显示设置元素的隐藏和显示的时候触发 componentUpdated() —> block | none 都触发.位置发生了改变,也会触发(改变是与Vue操作相关)
显示/隐藏 (v-if & v-show)
样式改变 (:class={active:isActive})
内容改变 (v-model=“text”)