vue2vue3常用语法(持续更新)

news2024/9/27 7:20:27

一、基础

1. 指令

指令

描述

v-if

判断

v-else-if

判断后剩下的

v-else

判断后剩下的

v-html

渲染html文本格式

v-text

渲染文本

v-for

循环

v-show

display:none/block切换

v-model

双向绑定

v-bind(缩写::)

动态绑定

v-on(缩写:@)

绑定dom事件(如点击事件)

v-cloak

解决页面闪烁出现{{message}}

v-pre

显示原始值,即是{{data}}直接显示

v-once

只执行一次

v-solt

插槽

2. 生命周期

钩子

描述

beforeCreate

初始化之前

created

初始化之后(常用)

beforeMount

挂载之前

mounted

挂载之后(常用)

beforeUpdate

更新之前

updated

更新之后(常用)

activated

keep-alive 缓存的组件激活时调用

deactivated

keep-alive 缓存的组件失活时调用

beforeDestroy

实例销毁之前调用(常用)

destroyed

实例销毁之后调用(常用)

errorCaptured

2.5.0+新增,捕获一个来自后代组件的错误时被调用

3. 路由

4. vuex

5. 实例方法

6. 全局

二、vue3

1. 全局api

2. 组合式api

2.1 工具

方法

描述

isRef()

检查某个值是否为ref

unref()

如果参数是ref,则返回内部值,否则返回参数本身

toRef()

基于响应式对象上一个属性,创建一个对应的ref

toRefs()

将响应式对象转换为一个普通对象

isProxy()

检查一个对象是否代理

isReactive()

检查对象是否响应式

isReadonly()

检查传入的值是否为只读对象

2.2 核心

方法

描述

ref()

返回一个响应式的值

computed()

计算属性

reactive()

返回一个响应式对象

readonly()

接受一个对象,返回原值只读

watchEffect()

立刻执行一个函数,同时响应式监听依赖,并根据依赖更新时重新执行

watchPostEffect()

watchEffect() 使用 flush: 'post' 选项时的别名

watchPostEffect()

watchEffect() 使用 flush: 'sync' 选项时的别名

watch()

监听属性

2.3 进阶

方法

描述

shallowRef()

ref() 的浅层作用形式

triggerRef()

强制触发依赖于一个浅层 ref 的副作用

customRef()

自定义ref

shallowReactive()

reactive() 的浅层作用形式

shallowReadonly()

readonly() 的浅层作用形式

toRaw()

根据vue创建的代理返回原始对象

markRaw()

将一个对象标记为不可被转为代理。返回该对象本身

effectScope()

处理响应式副作用

getCurrentScope()

返回当前活跃的effect

onScopeDispose()

当前活跃的effect处理一个回调函数

2.4 生命钩子

方法

描述

onMounted()

挂载后调用

onUpdated()

更新后调用

onUnmounted()

卸载后调用

onBeforeMount()

挂载之前调用

onBeforeUpdate()

更新之前调用

onBeforeUnmount()

卸载之前调用

onErrorCaptured()

后代组件传递错误时调用

onActivated()

keep-alive 缓存的组件激活时调用

onDeactivated()

keep-alive 缓存的组件失活时调用

onServerPrefetch()

服务器渲染之前调用ssr

2.5依赖注入

方法

描述

provide()

爷组件传递数据

inject()

孙组件接收

3. 单文件组件

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

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

相关文章

WMS AMS【Android Framework进阶】

1.简介 可以毫不夸张的说,android的framework层主要是由WMS、AMS还有View所构成,这三个模块穿插交互在整个framework中,掌握了它们之间的关系和每一个逻辑步骤,你对framework的了解至少有百分之五十 AMS是Android中最核心的服务…

设计模式:行为型设计模式

参考文章: 《设计模式》 《设计模式知识体系详解》 《DesignPatterns》 写在开头:本文为学习后的总结,可能有不到位的地方,错误的地方,欢迎各位指正。 前言 行为型模式是将不同的行为代码解耦,从而解决…

疯狂弹出请插入多卷集的最后一张磁盘窗口

整个人嘛了,今天插上U盘,跟tmd中了病毒一样, 屏幕疯狂弹出窗口, 提示请插入多卷集的最后一张磁盘! 点确定之后他继续弹出,点取消它也继续弹出, 关掉一个又弹出来一个,妈的&#x…

系统编程中的进程的概念No.3【进程状态】

引言: 北京时间:2023/2/17/8:17,目前听着超能陆战队主题曲《Immortals》,感觉又要螺旋式升天,并且为我今天上午没课感到happy,所以继我们很久以前的关于进程的博客,今天我们就再来学习一下有关…

buuctf Web 下

9.[ACTF2020 新生赛]Exec 访问url: http://cc3c6c27-e2df-4665-baba-1d9a32dc963e.node3.buuoj.cn/ 首页如下: 直接ping ip可以得到结果 常见管道符 1、|(就是按位或),直接执行|后面的语句 127.0.0.1 | cat /flag…

html 的相对路径和绝对路径

整篇文章是以 src 标签进行演示。 文章目录 一、相对路径 1、同级目录查找 2、上一级目录查找 3、下一级目录查找 二、绝对路径 一、相对路径 👵相对路径:从当前目录开始查找。 1、同级目录查找 写法: 1.1.直接写文件名字;…

Linux之进程控制

一.进程创建 1.1 fork函数 我们创建进程的方式有./xxx和fork()两种 在linux中fork函数时非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 #include <unistd.h> pid_t fork(void); 返回值&#xff1a;自进程…

Echarts实现多柱状图重叠重叠效果

有两种重叠效果: 1. 多个柱子重叠为一个 2. 多个柱子重叠为两组 第一种,图例: 这个灰色不是阴影哦, 是柱子. 1. 使用详解 (1) series.Z 折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低&#xff0c;而且不会…

GEE学习笔记 七十三:【GEE之Python版教程七】静态展示影像和动态展示影像

我们使用GEE在线编辑可以直接通过在线的网页可以加载展示我们计算的结果&#xff0c;而python版的GEE要展示我们的计算结果可能就比较麻烦。如果有同学看过GEE的python版API中可以找到一个类ee.mapclient&#xff0c;这个类的介绍是它是GEE官方通过Tk写的一个加载展示地图的类。…

【蓝桥日记⑤】2014第五届省赛(软件类)JavaA组❆答案解析

【蓝桥日记⑤】2014第五届省赛&#xff08;软件类&#xff09;JavaA组☃答案解析 文章目录【蓝桥日记⑤】2014第五届省赛&#xff08;软件类&#xff09;JavaA组☃答案解析1、猜年龄2、李白打酒3、神奇算式4、写日志5、锦标赛6、六角填数7、绳圈8、兰顿蚂蚁9、斐波那契10、波动…

Linux 操作系统原理 — NUMA 体系结构

目录 文章目录 目录NUMA 体系结构NUMA 的基本概念查看 Host 的 NUMA TopologyBash 脚本DPDK 脚步NUMA 体系结构 NUMA(Non-Uniform Memory Access,非一致性存储器访问)的设计理念是将 CPU 和 Main Memory 进行分区自治(Local NUMA node),又可以跨区合作(Remote NUMA nod…

操作系统 三(存储管理)

一、 存储系统的“金字塔”层次结构设计原理&#xff1a;cpu自身运算速度很快。内存、外存的访问速度受到限制各层次存储器的特点&#xff1a;1&#xff09;主存储器&#xff08;主存/内存/可执行存储器&#xff09;保存进程运行时的程序和数据&#xff0c;内存的访问速度远低于…

【信管12.2】知识管理与知识产权

知识管理与知识产权想必你对知识的概念多少都会有一些自己的理解&#xff0c;毕竟我们经过了那么多年的教育&#xff0c;学来学去可不都学习的是“知识”嘛。在今天的学习中&#xff0c;内容还是会比较多&#xff0c;因为除了知识管理相关的内容之外&#xff0c;还有知识产权相…

Matlab 最小二乘法拟合平面(SVD)

文章目录 一、简介1.1最小二乘法拟合平面1.2 SVD角度二、实现代码三、实现效果参考资料一、简介 1.1最小二乘法拟合平面 之前我们使用过最为经典的方式对平面进行了最小二乘拟合(点云最小二乘法拟合平面),其推导过程如下所示: 仔细观察一下可以发现

IP协议

网络层的一个重要作用就是把世界上的地址能够以一定的规范定义出来。地址管理路由选择网络层的代表:IP协议4位版本指的是&#xff1a;此处的取值只有两个ipv4,ipv64位首部长度&#xff1a;描述了ip报头有多长&#xff08;ip报头是变长的&#xff09;报头中有一个选项部分&#…

JUnit5文档整理

1、Overview 1.1、Junit5是什么 与以前的JUnit版本不同&#xff0c;JUnit 5是由三个不同子项目的几个不同的模块组成。 JUnit 5 JUnit Platform&#xff08;基础平台&#xff09; JUnit Jupiter&#xff08;核心程序&#xff09; JUnit Vintage&#xff08;老版本的支持&a…

JVM那些事——垃圾回收和内存分配

内存分配 默认情况下新生代和老年区的内存比例是1:2&#xff0c;新生代中Eden区和Survivor区的比例是8:1。 对象优先分配在Eden区。大对象直接进入老年区。通过-XX:PertenureizeThreshold参数设置临界值。长期存活的对象进入老年区。对象每熬过一次Minor GC&#xff0c;年龄1&…

【面试题】Map和Set

1. Map和Object的区别 形式不同 // Object var obj {key1: hello,key2: 100,key3: {x: 100} } // Map var m new Map([[key1, hello],[key2, 100],[key3, {x: 100}] ])API不同 // Map的API m.set(name, 小明) // 新增 m.delete(key2) // 删除 m.has(key3) // …

操作系统闲谈06——进程管理

操作系统闲谈06——进程管理 一、进程调度 01 时间片轮转 给每一个进程分配一个时间片&#xff0c;然后时间片用完了&#xff0c;把cpu分配给另一个进程 时间片通常设置为 20ms ~ 50ms 02 先来先服务 就是维护了一个就绪队列&#xff0c;每次选择最先进入队列的进程&#…