自定义指令及应用场景

• 【作用是什么】：可以对普通 DOM 进行底层操作，例如聚焦输入框。

• 【怎么用】：可以通过 Vue.directive 全局注册一个指令，或者组件内部通过 directives 进行局部注册，它常用的钩子有 inserted，表示被绑定元素插入父节点时调用，还有 update，它表示指令所在组件的 VNode 更新时调用。

• 【场景】：我在实际项目中，用自定义指令处理过图片懒加载，原理就是当图片进入可视区的时候把图片的地址给图片的 src 属性就好啦。

• 【注意】：自定义指令相关的钩子在 Vue3 中发生了变化，主要体现在和组件的生命周期钩子保持了一致，更加容易记忆和理解了

如何实现

注册一个自定义指令有全局注册与局部注册

在main.js全局注册主要是通过Vue.directive方法进行注册

Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
  },
})

组件使用就是 v-focus

局部注册:

//inserted  已经插入了
 direactives:{
    //局部注册指令:
    focus: {
        inserted(el){
            el.focus
        }
    }
}

使用 就是 v-focus

自定义指令-指令的值

export default {
    directives:{
    color:{
    //参数1:指令绑定的元素对象
    //参数2:指令相关的值
    inserted(el,binding){
    el.style.color=binding.value
},
//当值改变时,触发的事情
    update(el,binding){
    el.style.color=binding.value
}
}

}
,
    data(){
        return{
            color1:'red',
            color2:'orange'
}
}
}

 

<div>
<h1>v-color='color1'>指令的值1</h1>
<h1>v-color='color2'>指令的值2</h1>
</div>

看效果