vue2和vue3的自定义指令

vue2自定义指令

Vue.directive('指令名称'，{
    // 指令挂载到dom会自动触发
    inserted(el){
        // el指的就是真实的dom元素
    }
})

vue3自定义指令

vue3用的不是vue.了，而用的是app，是由 createApp 方法执行之后得到的实例，用它身上的 directive 方法

createApp().directive('指令名称',{
    mounted(el, binding){
        // el：指令挂载的那个dom元素
        // binding.value：指令=后面绑定的表达式的值
    }
})

vue2自定义插件

函数定义法：

function plugin(){

}

对象定义法：

// 定义插件
const plugin = {
    // 注册插件后会自动传过来一个参数
    install(Vue){
        // 可以进行全局组件注册
        Vue.component()
        // 可以进行全局指令注册
        Vue.directive()
        // 可以给原型链挂函数
        vue.prototype.$http = function(){}
    }
}

// 注册插件
Vue.use(plugin)

vue3自定义插件

在directives/index.js中定义插件

// 定义插件，按需导出
export const directivePlugin = {
    // 注册插件后会自动传过来一个参数
    install(app){
        console.log('执行')
    }
}

在main.js中

// 导入
import { directivePlugin  } from '@/directives'
// createApp生成应用实例对象 -> 调用use方法注册各种插件 -> 挂载到真实的dom
createApp(App).use(directivePlugin).mount('#app')