[JavaScript知识库]vue2和vue3自定义指令的区别

相同 ： 指令的原理和功能一样

不同 ：

一、vue2 ：

语法: Vue.directive( ‘自定义指令名字’ , { 配置项 } )

// 注册一个全局的指令
Vue.directive('focus', {      // 这里取得focus 是自定义名字
  inserted: function(el, binding) {
    // 这里的el相当于是 DOM  元素  可以操作它
    
    el.focus()   // 自动获取焦点
    el.style.background = binding.value
    
    console.log('focus', el, binding)
  }
})

使用：

<input v-foucs="'xxxx'" />  xxx指的就是binding.value

二、vue3 ：

语法: const app = createApp() app.directive(‘指令名’,配置对象)

// app.directive('指令名',配置对象)
app.directive('imgLazy', {
  mounted (el, binding) {
    // el是指令绑定到的dom元素
    // binding 是一个对象, binding.value是: <dom v-imgLazy="binding.value的值" />
    console.log(el, binding, 'imgLazy...')
  }
})
// 2. 使用格式 <div v-imgLazy>

使用：

<dom v-imgLazy="binding.value的值" />