Vue3 高级语法（二）—— 自定义指令、Teleport、Vue插件

一、认识自定义指令

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

注意：在Vue中，代码的复用和抽象主要还是通过组件；
通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；

自定义指令分为两种：

自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

比如我们来做一个非常简单的案例：当某个元素挂载完成后可以自定获取焦点

实现方式一：如果我们使用默认的实现方式；
实现方式二：自定义一个 v-focus 的局部指令；
实现方式三：自定义一个 v-focus 的全局指令；

二、实现方式一：聚焦的默认实现

三、实现方式二：局部自定义指令

实现方式二：自定义一个 v-focus 的局部指令

这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可；
它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）；
自定义指令有一个生命周期，是在组件挂载后调用的 mounted，我们可以在其中完成操作；

四、方式三：自定义全局指令

自定义一个全局的v-focus指令可以让我们在任何地方直接使用

五、指令的生命周期

六、指令的参数和修饰符

如果我们指令需要接受一些参数或者修饰符应该如何操作呢？

info是参数的名称；
.aaa.bbb是修饰符的名称；
后面是传入的具体的值；

在我们的生命周期中，我们可以通过 bindings 获取到对应的内容：

七、自定义指令练习

自定义指令案例：时间戳的显示需求：

在开发中，大多数情况下从服务器获取到的都是时间戳；
我们需要将时间戳转换成具体格式化的时间来展示；
在Vue2中我们可以通过过滤器来完成；
在Vue3中我们可以通过计算属性（computed）或者自定义一个方法（methods）来完成；
其实我们还可以通过一个自定义的指令来完成；

我们来实现一个可以自动对时间格式化的指令v-format-time：

这里我封装了一个函数，在首页中我们只需要调用这个函数并且传入app即可；

八、认识Teleport

在组件化开发中，我们封装一个组件A，在另外一个组件B中使用：那么组件A中template的元素，会被挂载到组件B中template的某个位置；最终我们的应用程序会形成一颗DOM树结构；

但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置：

比如移动到body元素上，或者我们有其他的div#app之外的元素上；
这个时候我们就可以通过teleport来完成；

Teleport是什么呢？

它是一个Vue提供的内置组件，类似于react的Portals；
teleport翻译过来是心灵传输、远距离运输的意思；
它有两个属性：
— to：指定将其中的内容移动到的目标元素，可以使用选择器；
— disabled：是否禁用 teleport 的功能；

和组件结合使用：
我们可以在 teleport 中使用组件，并且也可以给他传入一些数据；

九、多个teleport

如果我们将多个teleport应用到同一个目标上（to的值相同），那么这些目标会进行合并：

十、认识Vue插件

通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：

对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
函数类型：一个function，这个函数会在安装插件时自动执行；

插件可以完成的功能没有限制，比如下面的几种都是可以的：

添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现；
添加全局资源：指令/过滤器/过渡等；
通过全局 mixin 来添加一些组件选项；
一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

十一、插件的编写方式

Vue3 高级语法（二）—— 自定义指令、Teleport、Vue插件相关推荐

Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
Vue3 高级语法以及自定义组件
文章目录 1 .render函数 1. 1 h函数 1 .1 .1 h()函数的基本使用 1 .1 .2 h()函数中组件与插槽的使用 1 .2 jsx语法糖 1 .2 .1 jsx的配置(旧版本) ...
Vue高级语法(一) | 自定义指令详解
文章目录 Vue中自定义指令
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
Vue2（五）：收集表单数据、过滤器、自定义指令、Vue的生命周期
Vue2学习笔记:第五章一.收集表单数据 1.不同标签的value属性 2.v-model的三个修饰符二.过滤器 1.什么是过滤器? 2.案例:过滤器格式化时间戳三.自定义指令 1.内置指令 2 ...
vue技术点（3）—vuex、插槽、自定义指令、vue动画、keep-alive使用、mixin
目录 1,vuex 1.1,vuex介绍 1.2,vuex的各个模块 1.3,Vuex实例应用 2,组件插槽 2.1,具名插槽 2.2,插槽作用域 3,自定义指令 4,vue动画 4.1,vue过渡动 ...
Vue3 高级语法（一）—— h函数、jsx
一.认识h函数 Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数 ,它比模板更接近编译器: 前面我们讲 ...
[Vue]自定义指令
前言系列文章目录: [Vue]目录老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao ...