Vue - Vue3 与 Vue2 自定义指令（自定义指令实现、自定义指令钩子函数）

一、Vue3 与 Vue2 自定义指令文档

1. Vue3 自定义指令文档：https://cn.vuejs.org/guide/reusability/custom-directives.html

2. Vue2 自定义指令文档：https://v2.cn.vuejs.org/v2/guide/custom-directive.html

二、Vue3 与 Vue2 自定义指令实现

1、全局自定义指令实现

1. Vue3 全局自定义指令实现

// 注册自定义指令 v-focus// 当元素挂载后自动聚焦app.directive('focus',{mounted(el){el.focus()}})

<inputv-focustype="text"placeholder="这个输入框会自动聚焦"/>

2. Vue2 全局自定义指令实现

Vue.directive('focus',{inserted(el){el.focus()}})

<inputv-focustype="text"placeholder="这个输入框会自动聚焦"/>

2、局部自定义指令实现

1. Vue3 局部自定义指令实现

<template> <input v-focus type="text" placeholder="这个输入框会自动聚焦" /> </template> <script setup lang="ts"> const vFocus = { mounted(el) { el.focus(); }, }; </script>

2. Vue2 局部自定义指令实现

<template> <input v-focus type="text" placeholder="这个输入框会自动聚焦" /> </template> <script> export default { name: 'LocalDirectiveDemo', directives: { focus: { inserted(el) { el.focus() } } } } </script>

三、Vue3 与 Vue2 自定义指令钩子函数

1. Vue3 自定义指令钩子函数

2. Vue2 自定义指令钩子函数