免费的网站制作平台/新疆今日头条新闻
目录
- 01-ref属性在元素和组件上的分别使用
- 02-利用nextTick监听DOM更新后的情况
- 03-自定义指令与自定义全局属性及应用场景
- 04-复用组件功能之Mixin混入
- 05-插件的概念及插件的实现
- 06-transition动画与过渡的实现
- 07-动态组件与keep-alive组件缓存
- 08-异步组件与Suspense一起使用
- 09-跨组件间通信方案 Provide_Inject
- 10-Teleport实现传送门功能
- 11-虚拟DOM与render函数及Diff算法虚拟DOM
01-ref属性在元素和组件上的分别使用
Vue是基于MVVM设计模式进行实现的,视图与数据不直接进行通信,但是Vue并没有完全遵循这一原则,而是允许开发者直接进行原生DOM操作。
- 在Vue中可通过
ref
属性来完成这一行为,通过给标签添加ref
属性,然后再通过vm.$refs
来获取DOM - 把
ref
属性添加给组件,可以获取到组件的实例对象
,间接地实现组件之间的通信
<template><div><h2>ref属性</h2><button @click="handleClick">点击</button><div ref="elem">aaaaaaaaa</div><div ref="elem2">bbbbbbbbb</div><my-head ref="elem3"></my-head></div>
</template><script>import MyHead from '@/2_头部组件.vue'export default {methods: {handleClick(){// ref属性添加到元素身上,可以获取到当前元素的原生DOMconsole.log( this.$refs.elem );console.log( this.$refs.elem2 );//ref属性添加到组件身上,可以获取到当前组件的vm对象(实例对象)this.$refs.elem3.handleMessage('根组件的数据');}}}
</script>
2_头部组件.vue文件:
<template><div>hello myhead</div>
</template><script>export default {data(){return {message: '头部组件的消息'}},methods: {handleMessage(data){console.log(data);}}}
</script>
02-利用nextTick监听DOM更新后的情况
- 主要作用:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它
- 默认情况下,数据的更新会产生一个很小的异步延迟,所以直接在数据改变后取获取DOM是得不到DOM更新后的结果,而得到的是DOM更新前的结果。
- 如何才能得到DOM更新后的结果呢,可以有两种方案:
- 第一种就是利用生命周期
updated
这个钩子函数 - 第二种就是利用我们讲的
nextTick
方法,支持两种风格即回调和promise
。
- 第一种就是利用生命周期
03-自定义指令与自定义全局属性及应用场景
- 除了核心功能默认内置的指令 (例如
v-model
和v-show
),Vue 也允许注册自定义指令,来实现一些封装功能。 - 自定义指令的实现
- 实现一个简单的
v-color
指令,用于给元素添加背景色
- 下面我们来完成一个实际可以应用的指令,按钮权限指令,一般情况下这种指令不会局部使用,而是全局使用,所以可以通过vue来实现一个全局的按钮权限指令
- 实现一个简单的
- 自定义全局属性
- 添加一个可以在应用的任何组件实例中访问的全局
property
,这样在引入一些第三方模块的时候,就不用每一次进行import操
作,而是直接通过this
对象去访问全局属性即可,下面举一个例子,实现一个http
的全局属性。
- 添加一个可以在应用的任何组件实例中访问的全局
04-复用组件功能之Mixin混入
- 它是选项式API的一种复用代码的形式,通过混入
mixin
的方式,我们可以将一些公共的数据、方法或计算属性复用到多个组件中,提高代码的可维护性和重用性.
- mixin存在的问题就是不够灵活,不支持传递参数,这样无法做到差异化的处理,所以目前比较推荐的复用操作还是选择使用组合式API中的use函数来完成复用的逻辑处理
05-插件的概念及插件的实现
- 插件是自包含的代码,通常向 Vue 添加全局级功能。例如:全局方法、全局组件、全局指令、全局
mixin
等等。基 - 于Vue的第三方模块都是需要通过插件的方式在Vue中进行生效的,比如:
Element Plus
、Vue Router
、Vuex
等等。
06-transition动画与过渡的实现
- Vue中通过两个内置的组件来实现动画与过渡效果,分别是:
<transition>
和<transition-group>
07-动态组件与keep-alive组件缓存
- 动态组件
- 动态组件可以实现在同一个容器内动态渲染不同的组件,依一个内置组件
<component>
的is
属性的值,来决定使用哪个组件进行渲染。
- 动态组件可以实现在同一个容器内动态渲染不同的组件,依一个内置组件
keep-alive
组件
当我们点击的时候,就会进行组件的切换。在每次切换的过程中都会重新执行组件的渲染,这样组件操作的行为就会还原,而我们如何能够保证组件不变呢?可以利用<keep-alive>
对组件进行缓存,这样不管如何切换,都会保持为初始的组件渲染,这样可以很好的保留之前组件的行为。
组件的切换也可以配合<transition>
完成动画的切换。
08-异步组件与Suspense一起使用
- 异步组件
-
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。
-
对于大型项目来说,如果能实现按需载入的话,那么势必会对性能有所提升,在Vue中主要就是利用
defineAsyncComponent
来实现异步组件的。
-
Suspense
组件- 由于异步组件是点击切换的时候才去加载的,所以可能会造成等待的时间,那么这个时候可以配合一个
loading
效果,在Vue中提供了一个叫做<Suspense>
的组件用来完成loading
的处理。
- 由于异步组件是点击切换的时候才去加载的,所以可能会造成等待的时间,那么这个时候可以配合一个
09-跨组件间通信方案 Provide_Inject
正常情况下,我们的组件通信是需要一级一级的进行传递,通过父子通信的形式,那么如果有多层嵌套的情况下,从最外层把数据传递给最内层的组件就非常的不方便,需要一级一级的传递下来,那么如何才能方便的做到跨组件通信呢?
可以采用Provide
和 inject
依赖注入的方式来完成需求
10-Teleport实现传送门功能
Teleport
组件Teleport
可以实现传送门功能,也就是说逻辑属于当前组件中,而结构需要在组件外进行渲染,例如:按钮模态框组件。
- 逻辑组件
- 但是往往我们需要的并不是普通组件的调用方式,而是逻辑组件的调用方式:
- 但是往往我们需要的并不是普通组件的调用方式,而是逻辑组件的调用方式:
11-虚拟DOM与render函数及Diff算法虚拟DOM
- 虚拟DOM
- Vue框架帮我们完成了大量的DOM操作,那么在底层Vue并没有直接操作真实的DOM,因为真实的DOM直接去操作是非常好性能的,所以最好在JS环境下进行操作,然后在一次性进行真实DOM的操作。
- 内置的
render
函数可以把字符串转换成虚拟DOM。
- Vue框架帮我们完成了大量的DOM操作,那么在底层Vue并没有直接操作真实的DOM,因为真实的DOM直接去操作是非常好性能的,所以最好在JS环境下进行操作,然后在一次性进行真实DOM的操作。
Diff
算法-
当更新的时候,一个依赖发生变化后,副作用会重新运行,这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树,将它与旧树进行比较,然后将必要的更新应用到真实 DOM 上去。
-
而两个虚拟DOM进行对比的时候,需要加入一些算法提高对比的速度,这个就是
Diff
算法。
-
- 在脚手架下我们推荐使用:
相关文章:

Vue3语法系统进阶 - 全面掌握Vue3特性
目录 01-ref属性在元素和组件上的分别使用02-利用nextTick监听DOM更新后的情况03-自定义指令与自定义全局属性及应用场景04-复用组件功能之Mixin混入05-插件的概念及插件的实现06-transition动画与过渡的实现07-动态组件与keep-alive组件缓存08-异步组件与Suspense一起使用09-跨…...

第9天----【位运算进阶之----按位取反(~)】(附补码,原码讲解)
今天我们来谈谈按位取反这件事。 简单来说,按位取反就是先将一个数写成其二进制表达形式,然后1变0,0变1。下面就让我们展开深入地讨论吧! 文章目录 一、预备知识:1. 原码:定义:优缺点ÿ…...

如何获取当前 JAR 包的存放位置?
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言代码中如何获取打包后的jar包存放的位置? 前言 代码中如何获取打包后的jar包存放的位置? 要获取当前运行的 JAR 包所存放的位置&#…...

微调llama2模型教程:创建自己的Python代码生成器
本文将演示如何使用PEFT、QLoRa和Huggingface对新的lama-2进行微调,生成自己的代码生成器。所以本文将重点展示如何定制自己的llama2,进行快速训练,以完成特定任务。 一些知识点 llama2相比于前一代,令牌数量增加了40%࿰…...

Java【手撕双指针】LeetCode 57. “两数之和“, 图文详解思路分析 + 代码
文章目录 前言一、两数之和1, 题目2, 思路分析3, 代码展示 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 📗 Java数据结构: 顺序表, 链表…...

大数据(一)定义、特性
大数据(一)定义、特性 本文目录: 一、写在前面的话 二、大数据定义 三、大数据特性 3.1、大数据的大量 (Volume) 特性 3.2、大数据的高速(Velocity)特性 3.3、大数据的多样化 (Variety) 特性 3.4、大数据的价值 (value) 特性 3.5、大…...

【C++】构造函数和初始化列表的性能差距
构造函数和初始化列表的性能差距对比测试 1.说明 在C类和对象中,你可能听到过更加推荐用初始化列表来初始化类内成员。如果类内成员是自定义类型,则只能在初始化列表中调用自定义类型的构造函数。 但初始化列表和在构造函数体内直接赋值有无性能差距呢…...

Linux下套接字TCP实现网络通信
Linux下套接字TCP实现网络通信 文章目录 Linux下套接字TCP实现网络通信1.引言2.具体实现2.1接口介绍1.socket()2.bind()3.listen()4.accept()5.connect() 2.2 服务器端server.hpp2.3服务端server.cc2.4客户端client.cc 1.引言 套接字(Socket)是计算机网络中实现网络通信的一…...

❤ vue清除定时器Bug
❤ vue清除定时器Bug 页面加载,清除定时器 clearTimeout(intm) 问题 遇见的需求是:webapp 从A页面进入B页面,B页面点击按钮,加载完B页面的加载效果进入c,从C页面返回A页面,仍然显示B页面的加载效果 结果定时器一直…...

IDEA创建Spring,Maven项目没有resources文件夹
有时新建Spring或Maven项目时,会出现目录中main下无resources文件夹的情况,来一起解决一下: FIles|Project Structure 在Modules模块找到对应路径,在main下创建resources,右键main,选择新文件夹 输入文件…...

Unity 结构少继承多组合
为什么不推荐使用继承? 继承是面向对象的四大特性之一,用来表示类之间的 is-a 关系,可以解决代码复用的问题。虽然继承有诸多作用,但继承层次过深、过复杂,也会影响到代码的可维护性。所以,对于是否应该在…...

保研之旅2:中科院声学所“声学和信息学科”夏令营
💥💥💞💞欢迎来到本博客❤️❤️💥💥 本人持续分享更多关于电子通信专业内容以及嵌入式和单片机的知识,如果大家喜欢,别忘点个赞加个关注哦,让我们一起共同进步~ &#x…...

android adb自动连接手机安装apk bat
1.新建bat文件adb echo off:apk文件名称 在setting.txt获取 set apkFileName"":设置文件 set settingFileE:\apk\bat\setting.txt:启动页面 applicationid/启动页面路径 set startActivitycom.aaa.aaa/com.aaa.aaa.ui.common.SplashActivity:读取settingFile第一行的…...

用心维护好电脑,提高学习工作效率
无论是学习还是工作,电脑都是IT人必不可少的重要武器,一台好电脑除了自身配置要经得起考验,后期主人对它的维护也是决定它寿命的重要因素! 一、我的电脑 系统制造商: ASUSTeK COMPUTER INC. 系统型号: ZenBook UX481FAY 1.1 如…...

以太坊硬分叉后的可重入漏洞攻击
以太坊硬分叉后的可重入漏洞攻击 以太坊君士坦丁堡升级将降低部分 SSTORE 指令的 gas 费用。然而,这次升级也有一个副作用,在 Solidity 语言编写的智能合约中调用 address.transfer()函数或 address.send()函数时存在可重入漏洞。在目前版本的以太坊网络…...

k8s 常用命令(三)
1、查看版本信息:kubectl version [rootmaster ~]# kubectl version [rootmaster ~]# kubectl version Client Version: version.Info{Major:"1", Minor:"21", GitVersion:"v1.21.3", GitCommit:"ca643a4d1f7bfe34773c74f7952…...

API 网关基础
目录 一、网关概述二、网关提供的功能三、常见网关系统3.1 Netflix Zuul3.2 Spring Cloud Gateway3.3 Kong3.4 APISIX3.5 Shenyu 一、网关概述 API网关是一个服务器,是系统的唯一入口。 从面向对象设计的角度看,它与外观模式类似。API网关封装了系统内部…...

【Linux】权限问题
Linux权限 一、Linux 权限的概念二、Linux 权限管理1. 文件访问者的分类2. 文件类型和访问权限(事物属性)3. 文件访问权限的相关设置方法 三、默认权限1. 对文件和目录进行操作需要的权限2. 文件和目录的默认权限3. 粘滞位 一、Linux 权限的概念 Linux …...

线性代数的学习和整理10:各种特殊类型的矩阵(草稿-----未完成 建设ing)
目录 1 图形化分类 1.1对称矩阵 1.2 梯形矩阵 1.3 三角矩阵 1.3.1 上三角矩阵 1.4 对角线矩阵 2 按各自功能分 2.1 等价矩阵 2.2 增广矩阵 2.3 伴随矩阵 2.4 正交矩阵 2.5 正交矩阵 2.6 相似矩阵 1 图形化分类 1.1对称矩阵 1.2 梯形矩阵 1.3 三角矩阵 1.3.1 上…...

Go 自学:变量、函数、结构体、接口、错误处理
1. 打印变量数据类型 package mainimport "fmt"func main() {penniesPerText : 2.0fmt.Printf("The type of penniesPerText is %T\n", penniesPerText) }输出为: The type of penniesPerText is float64 2. 同时给多个变量赋值 package mai…...

pyqt Pyton VTK 使用 滑块 改变 VTK Actor 颜色
使用 PyQt5 vtk vtk球体 使用滑块 RGB 改变 Actor 颜色 CODE import sys from PyQt5.QtWidgets import * from PyQt5.QtWidgets import (QApplication, QCheckBox, QGridLayout, QGroupBox,QMenu, QPushButton, QRadioButton, QVBoxLayout, QWidget, QSlider,QLineEdit,QLabe…...

春秋云镜 CVE-2019-16113
春秋云镜 CVE-2019-16113 Bludit目录穿越漏洞 靶标介绍 在Bludit<3.9.2的版本中,攻击者可以通过定制uuid值将文件上传到指定的路径,然后通过bl-kernel/ajax/upload-images.php远程执行任意代码。 启动场景 漏洞利用 exp https://github.com/Kenun…...

【JavaEE基础学习打卡06】JDBC之进阶学习PreparedStatement
目录 前言一、PreparedStatement是什么二、重点理解预编译三、PreparedStatement基本使用四、Statement和PreparedStatement比较1.PreparedStatement效率高2.PreparedStatement无需拼接参数3.PreparedStatement防止SQL注入 总结 前言 📜 本系列教程适用于JavaWeb初学…...

Postgresql12基于时间点恢复
1、环境 centos 7系统 postgresql 12 docker 20.10.6 2、整体思路 1)进行一个pgdata目录的全量备份 2)通过wal日志恢复到故障发生之前某个时间点 3、操作步骤 配置postgresql.conf文件 #日志级别 wal_level replica #归档开关 archive_mode on …...

【MySQL系列】Select语句单表查询详解(二)ORDERBY排序
💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …...

C++学习第十九天----简单文件输入/输出和今日工作问题
1.写入到文本文件中 cout用于控制台输出; 必须包含头文件iostream; 头文件iostream定义了一个用于处理输出的ostream类; 头文件iostream声明了一个名为cout的ostream变量(对象); 必须指明名称空间std&…...

基于风险的漏洞管理
基于风险的漏洞管理涉及对即将被利用的漏洞的分类响应,如果被利用,可能会导致严重后果。本文详细介绍了确定漏洞优先级时要考虑的关键风险因素,以及确保基于风险的漏洞管理成功的其他注意事项。 什么是基于风险的漏洞管理对基于风险的漏洞管…...

命令行——Git基本操作总结
介绍 我们的操作使用的是客户端TortoiseGit 操作的git ,实际上底层依旧是使用的命令行帮我们执行, 在早期 git 并没有窗口化工具,开发人员只能使用命令行模式 实际上,如果你掌握并熟练使用了命令行模式操作git 的话,你会发现某些操作命令行比窗口化操作要简单 所有你在工作中…...

验证评估守护关基安全 赛宁数字孪生靶场创新实践
近日,由赛宁网安主办,ISC互联网安全大会组委会协办的第十一届互联网安全大会(ISC 2023)安全运营实践论坛圆满结束。赛宁网安产品总监史崯出席并作出主题演讲:《基于数字孪生靶场如何开展验证评估》,同时…...

R语言09-R语言中的字符函数和分布相关函数
字符函数 paste() 和 paste0(): 将多个字符向量连接成一个字符串,paste0() 直接连接,而 paste() 可以通过 sep 参数指定分隔符。 vector1 <- c("Hello", "world") vector2 <- c("R", "programming") re…...