08 vue3自定义指令 teleport vue插件

认识自定义指令

在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue 也允许我们来自定义自己的指令。

注意：在Vue中，代码的复用和抽象主要还是通过组件；

通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令

自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；

自定义全局指令：app的 directive 方法，可以在任意组件中被使用

案例一：input输入框自动获取焦点

局部

 全局

案例二：时间格式化

在Vue2中我们可以通过过滤器来完成；

在Vue3中我们可以通过 计算属性（computed） 或者 自定义一个方法（methods） 来完成

还可以使用自定义指令

 format-time.js

 index.js中导出函数，注册全部全局自定义指令

 main.js

 指令的生命周期

 指令的参数和修饰符

 我们可以通过 bindings 获取到对应的内容

Teleport

 效果

 app插件 use

 使用

 

 

 

 局部使用