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,同时提供上面提到的一个或多个功能;

十一、插件的编写方式

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自己封装的一个原生JS拖动方法。

代码: 1 function drag(t,p){2 3 var point p || null,4 target t || null,5 resultX 0,6 resultY 0;7 8 (!point)? point target : ; //如果没有拖动点,则拖动点默认为整个别拖动元素9 10 function getPos(…

nvidia的jetson系列的方案_NVIDIA Jetson Xavier NX开发者套件主要应用于自主机器边缘计算产品系列...

NVIDIA副总裁,边缘计算业务总经理Deepu Talla表示:“NVIDIA已在多个行业中创建并优化了大量AI软件。如今,有了云原生技术的加持,我们在嵌入式和机器人领域的客户就能通过高性能、低功耗的Jetson系列产品,受益于软件的创…

Vue-Router4 学习笔记

一、URL的hash 前端路由是如何做到URL和内容进行映射呢?监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性; 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新; hash的优势就是兼容性更好&am…

转:VC中MessageBox的常见用法

一、关于MessageBox 消息框是个很常用的控件,属性比较多,本文列出了它的一些常用方法,及指出了它的一些应用场合。 1.MessageBox("这是一个最简单的消息框!"); 2.MessageBox("这是一个有标题的…

python subprocess communicate_Python中的Subprocess模块

以前我一直用os.system()处理一些系统管理任务,因为我认为那是运行linux命令最简单的方式.我们能从Python官方文档里读到应该用subprocess 模块来运行系统命令.subprocess模块允许我们创建子进程,连接他们的输入/输出/错误管道,还有获得返回值。subprocess模块打算来…

Vuex4学习笔记

一、Vuex的状态管理 二、Vuex的安装 我们这里使用的是vuex4.x,安装的时候需要添加 next 指定版本; npm install vuexnext三、创建Store 每一个Vuex应用的核心就是store(仓库): store本质上是一个容器,它…

在局域网搭建一个带 web 操作页面的 git 版本服务器 - Gitlab

以下内容为本人的著作,如需要转载,请声明原文链接 微信公众号「englyf」https://mp.weixin.qq.com/s/Br0ETd_aNffEZoTAba03Bw 最近到了新团队,只有几部新电脑,然后啥也没有了。老江说需要一个管理工程代码的 git 版本服务器&…

div中iframe高度自适应问题

网页分为上、中、下三部分,上、下高度固定中间高度自适应;中间分为左、右两部分,左边宽度固定,右边宽度自适应。现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外部div的宽度和高…

python日志模块备份_Python Logging模块 输出日志颜色、过期清理和日志滚动备份

#coding:utf-8importloggingfrom logging.handlers importRotatingFileHandler # 按文件大小滚动备份import colorlog #控制台日志输入颜色importtimeimportdatetimeimportoscur_path os.path.dirname(os.path.realpath(__file__)) #log_path是存放日志的路径log_path os.path…

JS高级——手写call()、apply()、bind()

0、call、apply、bind的区别 bind,call,apply的作用都是用来改变this指向的 call方法 call方法的第一个参数是this的指向 后面传入的是一个参数列表(注意和apply传参的区别)。当一个参数为null或undefined的时候,函数中…

ubyntu 链接mysql_ubuntu mysql远程连接

ubuntu mysql远程连接http://blog.csdn.net/helen_shw/archive/2010/01/22/5224524.aspxkikikiki-desktop:/etc/apache2mysql error number 2003Cant connect to MySQL server xxx.xxx.xxx.xxx (10061)在ubuntu 9.04中默认安装了mysql,默认只能本地访问,…

js文章QQ空间分享

<!--示例一--> <div id"ckepop" classfeixiangjias> <a href"javascript:" class"jiathis jiathis_txt jtico jtico_jiathis" target"_blank">分享到&#xff1a;</a> <a class"jiathis_button_qzo…

JS高级——深入剖析函数中的this指向问题

一、this到底指向什么呢&#xff1f; 我们先说一个最简单的&#xff0c;this在全局作用域下指向什么&#xff1f; 这个问题非常容易回答&#xff0c;在浏览器中测试就是指向window 但是&#xff0c;开发中很少直接在全局作用于下去使用this&#xff0c;通常都是在函数中使用…

日志测试法

/*** 写入日志*/ function write2log($content,$filenamelog) {$myfile fopen($filename.".txt", "a") or die("Unable to open file!");$txt date(Y-m-d H:i:s)."\t".$content."\r\n";fwrite($myfile, $txt);fclose($myf…

JS高级——arguments参数详解

一、认识arguments arguments 是一个 对应于 传递函数的参数 的 类数组(array-like)对象。 array-like意味着它不是一个数组类型&#xff0c;而是一个对象类型&#xff1a; 但是它却拥有数组的一些特性&#xff0c;比如说length&#xff0c;比如可以通过index索引来访问&…

php 函数有命名空间吗_解析 ThinkPHP 的命名空间

php中文网最新课程每日17点准时技术干货分享大家都知道由于PHP语法里不支持函数重载机制&#xff0c;如果一个应用里有两个同名的方法&#xff0c;怎么办呢&#xff1f;在Yii 框架为了避免名字重复引起问题&#xff0c;全部的类前边都有 C 字样&#xff0c;而在ThinkPHP里就引入…

JS高级——纯函数、柯里化(手写自动柯里化函数)、组合函数(手写自动组合函数)

一、理解JavaScript纯函数 函数式编程中有一个非常重要的概念叫纯函数&#xff0c;JavaScript符合函数式编程的范式&#xff0c;所以也有纯函数的概念&#xff1b; 在react开发中纯函数是被多次提及的&#xff1b;比如react中组件就被要求像是一个纯函数&#xff08;为什么是…

(五)uboot移植补基础之shell

1、shell介绍&#xff1a;shell是操作系统的终端命令行 (1)shell可以理解为软件系统提供给用户操作的命令行界面&#xff0c;可以说它是人机交互的一种方式。(2)我们可以使用shell和操作系统、uboot等软件系统进行交互。具体来说就是我们通过shell给软件系统输入命令然后回车执…

三包围结构的字是什么样的_拼音带kun的字大全_50个拼音含kun的字组词

原标题&#xff1a;拼音带kun的字大全_50个拼音含kun的字组词1、昆(kūn)&#xff0c;8画&#xff0c;上下结构&#xff0c;部首&#xff1a;曰(日)组词&#xff1a;昆虫(kūn chng) | 昆曲(kūn qǔ) | 昆山(kūn shān) | 昆仲(kūn zhng) | 昆吾(kūn w) | 昆仑(kūn ln) |2…

JS高级——with语句、eval函数、严格模式

一、with语句 with语句的作用&#xff1a;扩展一个语句的作用域链。 不建议使用with语句&#xff0c;因为它可能是混淆错误和兼容性问题的根源。并且&#xff0c;在浏览器开启严格模式下&#xff0c;使用with会报错&#xff1a; 二、eval函数 eval是一个特殊的函数&#x…