vue-知识点总结
历史
- 2015年 10月27 1.0.0 Evangelion 新福音战士
- 2016年 10月1日 2.0.0 Ghost in the Shell 攻壳机动队
- 2019年 2月 2.6
- 2020年 9月18日 3.0.0 One Piece(海贼王)
- 2021年 8月10日 3.2.0
.sync
where
父向子传递props, 需要双向绑定的时候(子组件想更新这个值)
how
<one-component :title.sync="xx"></one-component>相当于<one-component v-bind:title="xx"v-on:update:title="xx = $event"></one-component>子组件: this.$emit('update:title', newTitle) 更新
what
指令修饰符,vue2.3 提出, vue3.x被v-model替代

lazy trim number stop capture prevent self once native left/right/middle passive camel
MVC MVVM
- MVC(model 从数据库取数据 controller 逻辑代码 View 视图) c 把 m 展示 成 v
- MVVM
指令
- v-once: 只渲染一次
- v-slot 缩写是#
- v-pre 跳过编译
- v-cloak
组件间通信
简单的层级: 父子 孙子
1. props/$emit
2. 获取实例: $parent $children($children vue3.0移除了) $refs(vue3用ref, 同时子组件需要defineExpose暴露数据)
3. $attrs和$listener 这两个属性有点类似,一个得到的是没在props定义的属性, 一个得到的是自定义方法, 可以直接传方法, 这样子组件调用父组件的方法, 可以父子组件传值 $listeners在vue3被移除了
4. provie inject
复杂的层级
5. Vuex/pinia
6. eventBus(vue3被移除了$on $emit $once,但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter) 事件总线.利用了vue实例的$emit $on
7. 使用浏览器本地缓存,例如localStorage, 他是没有响应式的.

绑定样式
动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组:<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组:<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>
响应式
整体思路是数据劫持+观察者模式
对象内部通过 defineReactive 方法,使用 Object.defineProperty 将属性进行劫持(只会劫持已经存在的属性),数组则是通过重写数组方法来实现。当页面使用对应属性时,每个属性都拥有自己的dep属性,存放他所依赖的 watcher(依赖收集),当属性变化后会通知自己对应的 watcher 去更新(派发更新)。
怎么让数据不是响应式
// 方法一:将数据定义在data之外
data () {this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }return {}}// 方法二:Object.freeze()
data () {return {list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),}}
对象新属性无法更新视图:使用Vue.$set(obj, key, value),组件中this.$set(obj, key, value)
删除属性无法更新视图:使用Vue.$delete(obj, key),组件中this.$delete(obj, key)
参考
vue官方-sync修饰符
vue官方-迁移指南
「自我检验」熬夜总结50个Vue知识点,全都会你就是神!!!
相关文章:
vue-知识点总结
历史 2015年 10月27 1.0.0 Evangelion 新福音战士2016年 10月1日 2.0.0 Ghost in the Shell 攻壳机动队2019年 2月 2.62020年 9月18日 3.0.0 One Piece(海贼王)2021年 8月10日 3.2.0 .sync where 父向子传递props, 需要双向绑定的时候(子组件想更新这个值) how <one-comp…...
Dubbo源码解析-——SPI机制
文章目录一、什么是SPI机制二、Java原生的SPI机制2.1、javaSPI示例2.1.1、编写接口和实现类2.1.2、编写配置文件2.1.3、通过SPI机制加载实现类2.1.4、JAVA SPI 源码解析2.1.4.1、ServiceLoader#load2.1.4.2、ServiceLoader构造方法2.1.4.3、ServiceLoader#reload2.1.4.4、LazyI…...
赛后补题:CF1789C Serval and Toxel‘s Arrays
传送门:CF 题目描述: 题目较长,此处省略 输入: 3 3 2 1 2 3 1 4 2 5 1 1 1 1 1 10 10 4 6 9 12 16 20 2 10 19 7 1 3 5 4 2 17 2 18 6 11 7 1 8 17 5 5 5 5 2 2 输出: 13 1 705比赛的时候感觉已经想到了正解,但是没有想的很清楚,所以赛时没有打出来. 我认为这道题的突破口其…...
Linux学习(8.7)命令与文件的搜寻
目录 命令与文件的搜寻 which 文件档名的搜寻: whereis (寻找特定文件) locate find 以下内容转载自鸟哥的Linux私房菜 命令与文件的搜寻 which 这个命令是根据『PATH』这个环境变量所规范的路径,去搜寻『运行档』的档名~ 所以&am…...
Linux下 Makefile文件基本语法二
本文继续上一篇关于 Makefile 文件内容的介绍。上一篇文章如下: Linux下 Makefile 基本语法_凌雪舞的博客-CSDN博客 一. Makefile 上一篇文章介绍了 Makefile基本语法中的变量,模式规则,自动化变量。这里继续介绍 Makefile 的另外一些语…...
【前端】JavaScript构造函数
文章目录概念执行过程返回值原型与constructor继承方式原型链其他继承方式(还没写)参考概念 在JS中,通过new来实例化对象的函数叫构造函数。实例化对象,也就是初始化一个实例对象。构造函数一般首字母大写。 构造函数的目的&…...
STM32单片机之温湿度检测系统(DTH11、OLED、LCD1602)
LCD1602LCD1602引脚第 1 脚: VSS 为电源地 第 2 脚: VDD 接 5V 正电源 第 3 脚: VL 为液晶显示器对比度调整端,接正电源时对比度最弱,接地时对比度最高,对比度过高时会产生“鬼影”,使用时可以通过一个 10K 的电位器调整对比度。 第 4 脚&…...
vitepress 就这几步操作,博客就搭好啦?
Ⅰ、什么是vitepress 💎 vitepress 使用场景 简单的说 ,只要 会用 markdown 语法,就能构建自己的 「博客、笔记、使用文档」等系统 ; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…...
【Python工具篇】Anaconda中安装python2和python3以及在pycharm中使用
背景:已经安装好anaconda、python3、pycharm,因为项目使用的是python2语法,所以需要在anaconda中安装python2,并在pycharm中使用,下面给出步骤。 1. 打开cmd或者是Anaconda Prompt。 下面是anaconda prompt. 2. 查…...
Android 网络框架——Retrofit源码精析
众所周知,Retrofit是OkHttp的封装,APP对网络交互部分的实现基本上都是RxJavaRetrofitOkHttp架构(或协程RetrofitOkHttp),可以说,Retrofit已经广为人知。本文主要介绍Retrofit主线源码实现机制,及…...
分布式算法 - Snowflake算法
Snowflake,雪花算法是由Twitter开源的分布式ID生成算法,以划分命名空间的方式将 64-bit位分割成多个部分,每个部分代表不同的含义。这种就是将64位划分为不同的段,每段代表不同的涵义,基本就是时间戳、机器ID和序列数。…...
【java web篇】Maven的基本使用以及IDEA 配置Maven
📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言Ὅ…...
【蓝桥集训】第七天并查集
作者:指针不指南吗 专栏:Acwing 蓝桥集训每日一题 🐾或许会很慢,但是不可以停下来🐾 文章目录1.亲戚2.合并集合3.连通块中点的数量有关并查集的知识学习可以移步至—— 【算法】——并查集1.亲戚 或许你并不知道&#…...
【Playwright】扑面而来的Playwright测试框架
在当今快节奏的开发环境中,测试是软件开发的重要组成部分。 Microsoft Playwright 是一种流行的测试自动化框架,允许开发人员为 Web 应用程序编写端到端测试。 Playwright 建立在 Puppeteer 之上,这是另一个流行的测试自动化框架。在这篇博文…...
React(三) ——新、旧生命周期
🧁个人主页:个人主页 ✌支持我 :点赞👍收藏🌼关注🧡 文章目录⛳React生命周期🌋初始化阶段👣运行中阶段🏓销毁阶段🏫新生命周期的替代🚚react中性…...
IT男的一次中年破局尝试--出书
一、转战外企 接上回《人到中年——IT男择业感悟》后,自己从大央企去了某知名外企。外企虽然最近几年的日子已经没有10年前的辉煌与滋润,但相对来说,还能勉强找到工作与生活的平衡点。 划重点,35岁上下的人换工作理由…...
Python 内置函数eval()
Python 内置函数eval() eval(expression, globalsNone, localsNone) 函数用来执行一个字符串表达式,并返回表达式的值。 expression: 字符串表达式。global: 可选,globals必须是一个字典。locals: 可选,locals可以是任何映射对象。 示例 &…...
【ArcGIS Pro二次开发】系列学习笔记,持续更新,记得收藏
一、前言 这个系列是本人的一个学习笔记。 作为一个ArcGIS Pro二次开发的初学者,最困扰的就是无从入手。网上关于ArcGIS Pro二次开发的中文资料极少,官方文档对于我这样的英文苦手又太不友好。 在搜索无果后,决定自已动手,从头…...
EasyRecovery16MAC苹果版本Photo最新版数据恢复软件
无论是在工作学习中,还是在生活中,Word、Excle等办公软件都是大家很常用的。我们在使用电脑的过程中,有时会因自己的误删或电脑故障,从而导致我们所写的文档丢失了。出现这样的大家不要着急,今天小编就给大家推荐一款可…...
Go的string与strings.Builder
Go的string与strings.Builder 文章目录Go的string与strings.Builder一、strings.Builder 的优势二、string类型的值三、与string相比,Builder的优势体现在拼接方面3.1 Builder的拼接,与Builder的自动扩容3.2 手动扩容3.3 Builder 的重用四、strings.Buil…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...
aardio 自动识别验证码输入
技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”,于是尝试整合图像识别与网页自动化技术,完成了这套模拟登录流程。核心思路是:截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...
起重机起升机构的安全装置有哪些?
起重机起升机构的安全装置是保障吊装作业安全的关键部件,主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理: 一、超载保护装置(核心安全装置) 1. 起重量限制器 功能:实时监测起升载荷&a…...
