vue3笔记-基础篇

vue3笔记

第一章 基础篇

MVVM框架

vue数据绑定方法

Object.defineProperty()

vue2使用的数据绑定方法

var obj = {}
Object.defineProperty(obj,"myname",{get(){consloe.log("get")}set(value){console.log("set",value)}
}

proxy代理

vue3使用的数据绑定方法，使用一个中间代理vm，来帮助拦截所有的更新

var obj = {}
var vm = new Proxy(onj,{get(obj,key){return obj[key]},set(obj,key,value0){obj[key]=value}
})

模板语法

1）、 文本插值语法 {{}}

文本插值支持 :

数据显示：<any>{{变量}}</any>、表达式计算：<any>{{变量1 + 变量2}}</any>、调用方法：<any>{{fn()}}</any>

2）、v-bind:

v-bind 是 Vue.js 提供的一种指令，用于动态地将属性绑定到 Vue 实例的数据，包括 HTML 元素的属性、CSS 类和内联样式等。它有缩写形式 : 和完整形式 v-bind:

3）、v-on:

v-on 是 Vue.js 提供的一种指令，用于监听 DOM 事件并触发相应的方法。它有缩写形式 @ 和完整形式 v-on:，可以将各种事件与 Vue 实例中的方法进行绑定。

4）、v-show

v-show 是 Vue.js 提供的一种指令，用于根据条件的真假值来控制 HTML 元素的显示和隐藏。它通过切换元素的 CSS 属性 display 来实现，不会从 DOM 中移除元素。

5）、v-if

v-if是Vue.js提供的一种指令，用于根据条件的真假值来控制HTML元素的显示和隐藏，它会直接从DOM 中直接删除掉元素。

6）、v-for

v-for是Vue.js提供的一种指令，用来遍历数组或对象，根据遍历的值生成HTML元素，示例<any v-for="item in list">{{item}}</any>

7）、v-model

v-model 是 Vue.js 提供的一种指令，用于实现表单元素和数据之间的双向绑定。它使得表单数据的更新能够自动反映到 Vue 实例的数据上，同时也能够将 Vue 实例数据的变化实时反映到表单元素上。

详解vue指令

1）、v-html的陷阱

v-html 是 Vue.js 框架中的一个指令，用于将一段字符串作为 HTML 解析并渲染到页面上。

v-html会把得到的data直接解析为html，在使用时需要确保内容的安全性。避免使用不受信任的内容，以防止跨站脚本攻击（XSS攻击）。尤其在用户可以自有输入的地方，需要对特殊符号进行转义输入，对于非受信来源的数据用插值语法{{}}进行渲染，它会直接输出内容，不进行解析。

2）、样式绑定（class,style）

class在vue中是用来绑定css类的属性，还可以使用:class指令来动态的绑定CSS 类。:class可以根据表达式的值来决定应该添加哪些 CSS 类，从而实现动态控制元素的样式。

<!--对象语法-->
<div :class="{ 'active': isActive, 'error': hasError }"></div>
<!--数组语法-->
<div :class="[activeClass, errorClass]"></div>
<!--字符串语法-->
<div :class="className"></div>
<!--动态类绑定-->

style同上，遇到形如background-color这种属性是，要么使用"background-color"这样去包裹，或者写成大驼峰式命名backgroundColor。

4）、条件渲染 v-if (v-if v-else-if v-else) v-show

v-if是真实的按条件进行渲染，只有在条件为真的时候，才会对条件区块内的元素在DOM树上进行创建，当条件为假时，从DOM树中将元素进行销毁。

v-show不管条件真假，都会将元素在DOM树上创建出来，当条件为真时，将元素显示出来，当条件为假时，将元素隐藏。

因此，v-show在初始加载时比v-if更加消耗资源，发生切换时v-if比v-show消耗更多资源，所以，v-show用在切换比较频繁的地方，v-if则用在需要更快加载的地方；

v-if ,v-else-if ,v-else三者的关系很像 if,else-if,else的关系，都是用于元素条件渲染的指令，但是后两个使用时必须要有v-if的使用，并且不能断开

示例：

<div v-if='条件'></div>
<div v-else-if='条件'></div>
<div v-else='条件'></div>
<!--错误使用，中间被隔开-->
<div v-if='条件'></div>
<div></div>
<div v-else='条件'></div>

5）、列表渲染 v-for

简单使用v-for=(item in dataList)

如果我们需要对渲染出来的列表进行操作，可以在for循环时加入一个参数用来接收下标：

v-for=((item,index) in dataList) index就是我们需要的值，在对列表进行操作时将index传入，便能够精确对渲染列表的指定项操作。

一般来说，后端响应给我们的数据都是对象数组，我们循环得到的item，在渲染时还需要操作取出属性值，如果我们确定的知道需要的属性，可以直接解构循环：

v-for=({prop1,prop2,prop3} in dataList)

key的选值对于性能的影响

key的重要性

Vue 使用 key 来追踪和管理每个节点的身份，它能够高效地判断哪些元素被添加、更新或移除。使用 key 可以帮助 Vue 识别出列表中每个项的变化，并且在更新 DOM 时更准确地定位到它们，以提高性能和避免不必要的重新渲染。

  1. 重用和重新排序：
    当列表的顺序发生变化或有新项被添加到列表中时，Vue 会利用 key 来尽可能地复用已存在的元素，而不是全新渲染所有的元素。如果没有提供 key，Vue 会采用一种“就地复用”的策略，这意味着元素的内部状态可能会被保留，但是位置调整会导致重新渲染。

  2. 元素的身份判断： key 值在循环过程中充当元素的唯一标识，Vue 使用 key 来确定元素的身份。在处理列表更新时，Vue 会比较新旧元素的 key 值，来决定是否复用、更新或移除元素。

  3. 绑定的状态保持：
    当使用 v-for 循环渲染表单元素等绑定了状态的元素时，key 不仅影响列表项的复用，还可以确保输入框、复选框等元素的值保持正确。每个具有不同 key 的元素都会被视为独立的实例，并且它们的状态不会相互影响。

如何设置key

一般设置key的选值 item中的id,item中不重复的值，循环时的index。选择的优先级：id>不重复的值>index

index在有破环列表顺序的插入，删除的操作的时候，index索引值并不会唯一对应列表数据，这个时候虚拟DOM根据更新的列表去对比真实DOM时，更改的地方越靠，真实DOM与虚拟DOM相差越多，更新页面消耗的资源越多。因此，我们需要慎重选择key的值。

数组变动监测

vue能够监听响应式数组的变更方法，并在他们被调用的时候触发相关的更新。这些变更方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse()；但是对于一些不改变原数组的方法，如：filter(),concat(),slice()这些方法操作原数组，但是不改变原数组，而是返回一个新的数组，这时vue看到的情况就是数组没有发生改变，也就不会进行相应的更新。对于这种情况，我们需要手动告知vue数组发生了变化，或者采取vue中compute或watch方法。

事件处理器

内联事件处理器

内联事件处理器是一种将事件处理逻辑直接写在 HTML 元素的属性中的方法。通过内联事件处理器，可以在特定事件发生时执行指定的 JavaScript 代码

<!--内联事件处理器示例-->
<!--一个点击自增案列-->
<button @click="count++"></button>
<button @click="handleAdd(自定义参数)"></button>

方法事件处理器

方法事件处理器是一种将事件处理逻辑封装在 JavaScript 方法中，然后通过事件监听器将该方法与特定的事件关联起来的方式。

<button @click="handleAdd"></button>

当我们不传入任何的参数的时候，vue会自动给我们传递一个event。里面包含一些必要的参数，在调用handelAdd的时候，可以直接使用：

function handleAdd(event){consloe.log(event)
}

修饰符

事件修饰符

事件修饰符是一种用于修改事件行为的特殊语法。事件修饰符可以附加到事件处理器中，以便更精确地控制事件的触发和处理。

  • .stop：阻止事件冒泡。当事件处理器中使用 .stop 修饰符时，事件将停止向上层元素传播，防止其他元素上的相同事件被触发。

    <button @click.stop="handleClick">点击我</button>

  • .prevent：阻止事件的默认行为。通过使用 .prevent 修饰符，可以阻止元素上默认的事件行为发生，例如表单的提交或超链接的跳转。

    `<form @submit.prevent="handleSubmit"> <!-- 表单控件 --> </form>

  • .capture：使用事件捕获阶段来处理事件。通常，事件处理器会在事件冒泡阶段触发，但使用 .capture 修饰符可以将事件处理转移到事件捕获阶段。

    <div @click.capture="handleClick">点击我</div>

  • .self：只有当事件是由元素自身触发时才触发事件处理器。如果事件由内部元素触发而不是元素本身，则事件处理器不会被触发。

    <div @click.self="handleClick"> <button>内部按钮</button> </div>

  • .once：阻止事件被多次触发，事件触发一次以后，禁用事件

    <div @click.once="handleClick">点击我</div>

  • .passive：一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能（tip:prevent 与 passive 不可以同时使用）

按键修饰符

  • .enter ：监听回车键事件

  • .tab：监听tab按键

  • .delete：监听Delete按键

  • .esc：监听esc按键

  • .space：监听空格按键

  • up,down,left,right：监听上下左右四个按键

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

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

相关文章

【C#】五种单例模式详解

【C#】五种单例模式详解

单例模式有五种&#xff1a; 饿汉模式、懒汉模式、双重锁懒汉模式、静态内部类模式、枚举模式。 1.饿汉式 public class SingleTon1 { private static SingleTon1 instance new SingleTon1(); private SingleTon1() { }public SingleTon1 getInstance(){return instance; …
阅读更多...
Golang 中的数组Array以及Slice底层实现

Golang 中的数组Array以及Slice底层实现

1、Array(数组) 数组是指一系列同一类型数据的集合。数组中包含的每个数据被称为数组元素 (element)，这种类型可以是任意的原始类型，比如 int 、 string 等，也可以是用户自定义的类型。一个数组包含的元素个数被称为数组的长度。 在 Golang 中数组是一个长度固定的数据类…
阅读更多...
【朱颜不曾改，芳菲万户香。AIGC人物图片创作---InsCode Stable Diffusion 美图活动一期】

【朱颜不曾改，芳菲万户香。AIGC人物图片创作---InsCode Stable Diffusion 美图活动一期】

【朱颜不曾改&#xff0c;芳菲万户香。AIGC人物图片创作 ---InsCode Stable Diffusion 美图活动一期】 本文目录&#xff1a; 一、 Stable Diffusion 模型在线使用 1.1、模板运行环境配置 1.2、运行InsCode平台的Stable Diffusion模板 二、Stable Diffusion主界面功能 2.…
阅读更多...
数据结构——各种常见算法的实现方法和思路

数据结构——各种常见算法的实现方法和思路

文章目录 常见的排序算法类型复杂度和稳定性 1.冒泡排序2.直接插入排序3.希尔排序4.简单选择排序方法1&#xff1a;双向遍历选择排序方法2&#xff1a;单向遍历选择排序 5.归并排序方法1&#xff1a;递归方法2&#xff1a;非递归 6.快速排序方法1&#xff1a;随机取keyi方法2&a…
阅读更多...
MAC下将jar包安装到本地maven仓库

MAC下将jar包安装到本地maven仓库

在终端执行命令如下&#xff1a; mvn install:install-file "-Dfile/Users/kkeer/lost_lib/slf4j-1.7.2.jar" "-DgroupIdorg.slf4j" "-DartifactIdslf4j-log4j12" "-Dversion1.7.2" "-Dpackagingjar" "-DgeneratePomt…
阅读更多...
thinkphp6 动态开启debug模式

thinkphp6 动态开启debug模式

1、找到config/app.php 2、自定义开启debug参数名称:示例参数为debug,可以根据自己项目情况自定义 3、必须同时设置App::debug 和 Env::set(APP_DEBUG) <?php // ---------------------------------------------------------------------- // | 应用设置 // --------…
阅读更多...
TiDB字符集和时区

TiDB字符集和时区

TiDB 字符集和时区 mysql> select version; -------------------------------------- | version | -------------------------------------- | 5.7.10-TiDB-v2.1.0-beta-179-g5a0fd2d | -------------------------------------- 1 row in set (0.00 sec) mysql> …
阅读更多...
谈 Delphi 中 JSON 的简便操作（非常简单）

谈 Delphi 中 JSON 的简便操作（非常简单）

我曾有讲过Delphi操作JSON的方法&#xff0c;特别是这一篇【delphi】类和记录的 helpers&#xff08;助手&#xff09;。但是因为当时是主要介绍的是Delphi的Helper&#xff0c;大家可能并没注意到Delphi中JSON的简便操作方法。 早期Delphi并没有自己的JSON操作库&#xff0c;大…
阅读更多...
了解 JVM - 认识垃圾回收机制与类加载过程

了解 JVM - 认识垃圾回收机制与类加载过程

前言 本篇通过介绍JVM是什么&#xff0c;认识JVM的内存区域的划分&#xff0c;了解类加载过程&#xff0c;JVM中垃圾回收机制&#xff0c;从中了解到垃圾回收机制中如何找到存活对象的方式&#xff0c;引用计数与可达性分析的方式&#xff0c;再释放垃圾对象时使用的方式&…
阅读更多...
Kerberos协议详解

Kerberos协议详解

0x01 kerberos协议的角色组成 Kerberos协议中存在三个角色&#xff1a; 客户端(Client)&#xff1a;发送请求的一方 服务端(Server)&#xff1a;接收请求的一方 密钥分发中心(Key distribution KDC) 密钥分发中心分为两个部分&#xff1a; AS(Authentication Server)&…
阅读更多...
HashMap和HashTable的区别是什么？

HashMap和HashTable的区别是什么？

HashMap和HashTable都是常见的哈希表实现方式&#xff0c;它们有以下主要区别&#xff1a; 1. 线程安全性&#xff1a;HashTable是线程安全的&#xff0c;而HashMap不是。HashTable的方法都是同步的&#xff0c;可以在多线程环境中安全使用&#xff0c;但是会带来额外的性能开…
阅读更多...
Nacos (2.0版本之后)状态异常集群节点状态异常

Nacos (2.0版本之后)状态异常集群节点状态异常

在nacos 2.0 之后正常部署后节点状态仅有一个正常,其余均为DOWN 或者SUSPICIOUS 状态 查看日志后发现 ERROR Server check fail, please check server 192.168.172.104 ,port 9849 is available , error {} 其实是nacos 相互之间不能正常通信造成的,nacos客户端升级为2.x版…
阅读更多...
apple pencil一代的平替有哪些品牌？苹果平板的触控笔

apple pencil一代的平替有哪些品牌？苹果平板的触控笔

随着苹果Pencil系列的推出&#xff0c;平替电容笔在国内市场得到了较好的发展&#xff0c;随之的销量&#xff0c;也开始暴涨&#xff0c;苹果pencil因为价格太高&#xff0c;导致很多人买不起。目前市场上&#xff0c;有不少的平替电容笔&#xff0c;可以替代苹果的Pencil&…
阅读更多...
MySQL 主从复制与读写分离

MySQL 主从复制与读写分离

MySQL 主从复制与读写分离 一、mysql读写分离的概念1、什么是读写分离&#xff1f;2、为什么要读写分离呢&#xff1f;3、什么时候要读写分离&#xff1f;4、主从复制与读写分离5、mysql支持的复制类型 二、主从复制的工作过程三、MySQL 读写分离原理常见的 MySQL 读写分离分为…
阅读更多...
【Distributed】分布式ELK日志文件分析系统（二）

【Distributed】分布式ELK日志文件分析系统（二）

文章目录 一、FilebeatELK 部署1. 环境部署2. 在 Filebeat 节点上操作2.1 安装 Filebeat2.2 设置 filebeat 的主配置文件 3. 在 Apache 节点上操作3.1 在 Logstash 组件所在节点上新建一个 Logstash 配置文件 3. 启动3.1 在Logstash 组件所在节点启动3.2 在 Filebeat 节点 启动…
阅读更多...
Stable Diffusion 用2D图片制作3D动态壁纸

Stable Diffusion 用2D图片制作3D动态壁纸

如果想让我们的2D图片动起来可以使用stable-diffusion-webui-depthmap-script插件在SD中进行加工让图片动起来。 这是一个可以从单个图像创建深度图，现在也可以生成3D立体图像对的插件，无论是并排还是浮雕。生成的结果可在3D或全息设备（如VR耳机或Looking Glass显示器）上查…
阅读更多...
C语言实现，固定内存通讯录（注释超详细）

C语言实现，固定内存通讯录（注释超详细）

头文件 #ifndef __LINKMAN_H__ #define __LINKMAN_H__#include<stdio.h> #include<string.h> #pragma warning (disable:4996) typedef struct LINKMAN//建立结构体&#xff0c;存放联系人信息 {char name[20];char sex[10];int age;int tel[12];char addr[50]; }…
阅读更多...
大模型加速学科升级，飞桨赋能北邮“X+大模型”特色小学期

大模型加速学科升级，飞桨赋能北邮“X+大模型”特色小学期

在人工智能时代&#xff0c;设计师与产品经理比以往更加需要关注一个事实&#xff1a;那就是如何利用人工智能和数据分析技术&#xff0c;打造让用户心动的信息交互产品和用户体验&#xff0c;释放人-机协同共创的巨大潜能&#xff0c;是决定设计产能和竞争力的关键。 在产业的…
阅读更多...
【SpringBoot】84、SpringBoot中MVC处理异常的多种方式

【SpringBoot】84、SpringBoot中MVC处理异常的多种方式

在 SpringBoot 中我们可以使用注解 @ControllerAdvice 和 @RestControllerAdvice 来全局处理异常，这两个注解只多了一个注解 @ResponseBody，将方法的返回值，以特定的格式写入到 response 的 body ，进而将数据返回给客户端，如果是字符串直接输出字符串信息，如果是对象将会…
阅读更多...
智能合约 -- 安全考量

智能合约 -- 安全考量

相关概念 就是我们写代码是考虑这种涉及到合约安全的问题:下面这个方面写合约是重点考虑。 创建消息发送以太币&#xff1a; 1.要创建消息发送以太币&#xff0c;您需要构建一个有效的交易&#xff0c;并将其发送到以太坊网络中。 2.交易被发送到以太坊网络后&#xff0c;会经…
阅读更多...
最新文章

Copyright @ 2022~2023