Vue3的高级语法补充

Posted 2021-07-25 coder斌

Vue3的高级语法补充（二）

• • 自定义指令
  • • 传统实现方式
  • 局部指令
  • • 指令的生命周期钩子
    • 全局指令
    • 自定义指令修饰符和传值
  • teleport的使用
  • Vue插件

自定义指令

在vue中可以使用 v-for、v-if、v-show、v-model等等指令，这些都是Vue已经定义好的指令，只需要使用就行了。当然我们自己也可以定义自己的指令。

利用官方文档内的案例做演示：input标签挂载完自动获取焦点。

传统实现方式

局部指令

在指令的生命周期函数内，标签获取焦点。

在使用是就 v-+ 定义名字 使用

指令的生命周期钩子

取自官方：类比组件的生命周期

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。

• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

• mounted：在绑定元素的父组件被挂载后调用。

• beforeUpdate：在更新包含组件的 VNode 之前调用

• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmount：在卸载绑定元素的父组件之前调用

• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

生命周期的参数：

• el:指令绑定到的元素
• binding：在下面会使用到，包含了 自定义指令后的修饰符、指令携带的数据之类的。
• VNode：指令绑定元素的最新的Vnode。
• prevNode：指令绑定元素的改变前的Vnode。

例子查看：

最后一个为 NULL 是因为第一次挂载，之前没有旧的 prevNode。

全局指令

全局指令在所有组件都可以使用。

自定义指令修饰符和传值

• 所有的修饰符都放在 binding.modifers
• v-focus="'name'"中的 ‘name’ 就放在 binding.value内。

teleport的使用

有时在当前标签内写的 html代码，希望它挂载到另一个地方，就可以使用Vue 全局标签 teleport ,to是一个选择器。

在 class=“app” 内些的内容，跑到 id=“main” 内去了

• teleport标签内部为 组件也一样使用。
• 多个 teleport应用到同一个目标上，会合并。

Vue插件

向Vue全局添加一些功能，可以使用插件。插件有两种编写方式：

• 对象类型：对象内一定要有 install方法。因为在main.js内。通过use方法安装插件的使用，vue会从这个导出的对象中，拿到install方法，并且把app传过去。

---

• 函数类型：

---

在插件内部，将值或方法放入全局，是所有组件都可以使用。