当前位置: 首页 > news >正文

Vue 3 学习文档(一)

最近打算做一个项目,涉及到一些前端的知识,因上一次接触前端已经是三四年前了,所以捡一些简单的功能做一下复习。

  1. 响应式函数:reactive 和 ref
  2. 属性绑定:v-bind 和简写语法
  3. 事件监听:v-on 和简写语法 @
  4. 双向绑定:v-model]
  5. 条件渲染:v-if, v-else, v-else-if
  6. 列表渲染:v-for 和 key
  7. 生命周期钩子:onMounted, onUpdated, onUnmounted
  8. 侦听器:watch
  9. 父子组件:props 和 emit
  10. 插槽:Slots

响应式函数:reactiveref

reactive

Vue 的 reactive() API 用于声明响应式对象。它通过 JavaScript 的 Proxy 实现,能够使对象(包括数组和 MapSet)的属性响应式:

import { reactive } from 'vue'const counter = reactive({count: 0
})console.log(counter.count) // 0
counter.count++
  • reactive() 适用于对象类型的数据。
  • 创建的对象是深度响应式的,修改任何嵌套的属性都会自动更新视图。

ref

ref() 用于声明响应式的基本数据类型(如字符串、数字、布尔值等)或复杂类型。ref() 返回的对象有一个 .value 属性来存储值。

import { ref } from 'vue'const message = ref('Hello World!')console.log(message.value) // "Hello World!"
message.value = 'Changed'
  • ref 用于包裹值,特别是基本数据类型。

注意事项:

  • reactiveref 的选择:reactive 用于对象、数组,ref 用于基本数据类型(以及其他对象类型)。
  • ref 的值不可直接修改,必须通过 .value
  • reactive 的对象不支持直接解除响应式,但可以通过替换整个对象来解除响应式。

属性绑定:v-bind 和简写语法 :

v-bind 语法

v-bind 用于动态绑定属性,它可以绑定 JavaScript 表达式到元素的特性:

<div v-bind:id="dynamicId"></div>

简写形式为 :

<div :id="dynamicId"></div>

注意事项:

  • 动态绑定可以用于 classstyleid 等 HTML 属性。
  • 绑定对象时,Vue 会自动合并类和样式。

事件监听:v-on 和简写语法 @

v-on 语法

v-on 用于监听 DOM 事件,通常用来绑定事件处理器:

<button v-on:click="increment">{{ count }}</button>

简写形式为 @

<button @click="increment">{{ count }}</button>

注意事项:

  • .once 修饰符:只触发一次事件。
  • .prevent.stop 修饰符:阻止默认行为和事件冒泡。

双向绑定:v-model

v-model 语法

v-model 用于实现双向绑定,将表单控件的值与组件状态同步:

<input v-model="text">
  • v-model 自动处理绑定和事件监听的工作,不需要手动写事件监听器。

自定义 v-model

v-model 允许自定义绑定属性和事件名称:

<ChildComp v-model:customProp="data"></ChildComp>

条件渲染:v-if, v-else, v-else-if

v-if 语法

v-if 用于根据条件渲染元素:

<h1 v-if="awesome">Vue is awesome!</h1>
  • v-if 只会在条件为真时渲染元素。

注意事项:

  • v-if 会移除 DOM 元素,因此适用于不常更改的条件。
  • 使用 v-show 代替 v-if 时,性能较好,因为它只改变元素的 display 样式。

列表渲染:v-forkey

v-for 语法

v-for 用于渲染数组或对象的列表:

<ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
  • key 是必需的,它帮助 Vue 跟踪每个元素,优化渲染性能。

注意事项:

  • key 的作用是确保每个元素的唯一性,帮助 Vue 更高效地更新 DOM。
  • 在渲染对象时,最好将对象转换为数组进行渲染。

生命周期钩子:onMounted, onUpdated, onUnmounted

onMounted

onMounted 钩子在组件挂载到 DOM 后调用。它常用于操作 DOM 或执行异步请求。

import { onMounted } from 'vue'onMounted(() => {console.log('Component is mounted');
});

注意事项:

  • onMounted 在组件首次渲染后调用,不会在子组件的渲染前调用。
  • 可以使用 onBeforeMountonAfterMount 来控制组件挂载过程。

侦听器:watch

watch 语法

watch 用于响应式地监听数据变化:

import { ref, watch } from 'vue'const count = ref(0)watch(count, (newValue, oldValue) => {console.log('Count changed:', newValue)
})

深度侦听

可以通过设置 deep: true 来深度监听对象的嵌套属性:

watch(myObject, (newVal) => {console.log('Object changed', newVal);
}, { deep: true })

父子组件:propsemit

props 语法

父组件可以通过 props 向子组件传递数据:

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({msg: String
})
</script>

emit 语法

子组件通过 emit 向父组件触发事件:

<script setup>
const emit = defineEmits(['response'])
emit('response', 'Hello from child')
</script>

注意事项:

  • props 可以设置类型验证、默认值等属性。
  • emit 支持传递多个参数,可以定义事件名称和类型。

插槽:Slots

默认插槽

父组件通过插槽向子组件传递内容:

<ChildComp>This is some slot content!
</ChildComp>

子组件通过 <slot> 显示插槽内容:

<!-- ChildComp.vue -->
<slot />

具名插槽

可以使用具名插槽来区分不同的内容:

<ChildComp><template #header>Header content</template><template #footer>Footer content</template>
</ChildComp>

作用域插槽

子组件可以将数据暴露给父组件的插槽:

<ChildComp><template #default="{ data }"><p>{{ data }}</p></template>
</ChildComp>

相关文章:

Vue 3 学习文档(一)

最近打算做一个项目&#xff0c;涉及到一些前端的知识&#xff0c;因上一次接触前端已经是三四年前了&#xff0c;所以捡一些简单的功能做一下复习。 响应式函数&#xff1a;reactive 和 ref属性绑定&#xff1a;v-bind 和简写语法事件监听&#xff1a;v-on 和简写语法 双向绑…...

【适配】屏幕拖拽-滑动手感在不同分辨率下的机型适配

接到一个需求是类似下图的3D多房间视角&#xff0c;需要拖拽屏幕 问题 在做这种屏幕拖拽的时候发现&#xff0c;需要拖拽起来有跟手的感觉&#xff0c;会存在不同分辨率机型的适配问题。 即&#xff1a;美术调整好了机型1的手感&#xff0c;能做到手指按下顶层地板上下挪动&…...

牛客周赛 Round 69(A~E)

文章目录 A 构造C的歪思路code B 不要三句号的歪思路code C 仰望水面的歪思路code D 小心火烛的歪思路code E 喜欢切数组的红思路code 牛客周赛 Round 69 A 构造C的歪 思路 签到题&#xff0c;求出公差d&#xff0c;让最大的数加上公差d即可 code int a,b;cin >> a &…...

Spring Boot 实战:分别基于 MyBatis 与 JdbcTemplate 的数据库操作方法实现与差异分析

1. 数据库新建表 CREATE TABLE table_emp(id INT AUTO_INCREMENT,emp_name CHAR(100),age INT,emp_salary DOUBLE(10,5),PRIMARY KEY(id) );INSERT INTO table_emp(emp_name,age,emp_salary) VALUES("tom",18,200.33); INSERT INTO table_emp(emp_name,age,emp_sala…...

【jmeter】服务器使用jmeter压力测试(从安装到简单压测示例)

一、服务器上安装jmeter 1、官方下载地址&#xff0c;https://jmeter.apache.org/download_jmeter.cgi 2、服务器上用wget下载 # 更新系统 sudo yum update -y# 安装 wget 以便下载 JMeter sudo yum install wget -y# 下载 JMeter 压缩包&#xff08;使用 JMeter 官方网站的最…...

使用Python实现自动化邮件通知:当长时程序运行结束时

使用Python实现自动化邮件通知&#xff1a;当长时程序运行结束时 前提声明 本代码仅供学习和研究使用&#xff0c;不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…...

框架学习07 - SpringMVC 其他功能实现

一. 拦截器实现HandlerInterceptor 接⼝ SpringMVC 中的 Interceptor 拦截器也是相当重要和相当有⽤的&#xff0c;它的主要作⽤是拦截⽤户的请求并进⾏相应的处理。⽐如通过它来进⾏权限验证&#xff0c;或者是来判断⽤户是否登陆等操作。对于 SpringMVC 拦截器的定义⽅式有两…...

NAT:连接私有与公共网络的关键技术(4/10)

一、NAT 的工作原理 NAT 技术的核心功能是将私有 IP 地址转换为公有 IP 地址&#xff0c;使得内部网络中的设备能够与外部互联网通信。其工作原理主要包括私有 IP 地址到公有 IP 地址的转换、端口号映射以及会话表维护这几个步骤。 私有 IP 地址到公有 IP 地址的转换&#xff1…...

RabbitMQ2:介绍、安装、快速入门、数据隔离

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

衡山派D133EBS 开发环境安装及SDK编译烧写镜像烧录

1.创建新文件夹&#xff0c;用来存放SDK包&#xff08;其实本质就是路径要对就ok了&#xff09;&#xff0c;右键鼠标通过Open Git Bash here来打开git 输入命令 git clone --depth1 https://gitee.com/lcsc/luban-lite.git 来拉取&#xff0c;如下所示&#xff1a;&#xff0…...

【Spring MVC】如何获取cookie/session以及响应@RestController的理解,Header的设置

前言 &#x1f31f;&#x1f31f;本期讲解关于SpringMVC的编程之参数传递~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废…...

C++设计模式行为模式———策略模式

文章目录 一、引言二、策略模式三、总结 一、引言 策略模式是一种行为设计模式&#xff0c; 它能让你定义一系列算法&#xff0c; 并将每种算法分别放入独立的类中&#xff0c; 以使算法的对象能够相互替换。与模板方法模式类似&#xff0c;都是以扩展的方式来支持未来的变化。…...

Spring Cloud 中 bootstrap.yml 配置文件详解

Spring Cloud 中 bootstrap.yml 配置文件详解 1. 什么是 bootstrap.yml&#xff1f; bootstrap.yml 是 Spring Cloud 提供的一个特殊配置文件&#xff0c;主要用于初始化 Spring Cloud 应用程序的环境。与常见的 application.yml 不同&#xff0c;bootstrap.yml 在 Spring 应用…...

Java项目实战II基于SpringBoot前后端分离的网吧管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着互联网技术的不断发展…...

ASP网络安全讲述

一 前言   Microsoft Active Server Pages&#xff08;ASP&#xff09;是服务器端脚本编写环境&#xff0c;使用它可以创建和运行动态、交互的 Web 服务器应用程序。使用 ASP 可以组合 HTML 页 、脚本命令和 ActiveX 组件以创建交互的 Web 页和基于 Web 的功能强大的应用程序…...

DFS 创建分级菜单

菜单级别不确定&#xff0c;想要自适应&#xff0c;且可以折叠的菜单。 数据是一个数组。 <template><div class"Level" ref"Level"></div> </template>import {ref} from vue export default{data(){Level:ref(null),menuData…...

HDU Go Running(最小点覆盖 + 网络流优化)

题目大意&#xff1a;有一条无限长跑道&#xff0c;每个人可以规定自己跑步的方向&#xff0c;起点&#xff0c;跑步起止时间。每个人跑步的速度都是1m/s。最后从监控人员哪里得到了n个报告&#xff0c;每个报告给出了某人在某一时候所在的位置&#xff0c;问跑步的最少可能人数…...

C++设计模式-中介者模式

动机(Motivation) 多个对象相互关联的情况&#xff0c;对象之间常常会维持一种复杂的引用关系&#xff0c;如果遇到一些需求的更改&#xff0c;这种直接的引用关系将面临不断的变化。在这种情况下&#xff0c;可以使用一种”中介对象“来管理对象间的关联关系&#xff0c;避免…...

文件上传与下载服务 | Flask 实战

之前介绍了 droppy 文件共享服务的搭建。但在一些场景中&#xff0c;我们需要在命令行或在 Python 代码中&#xff0c;临时上传和下载文件。这时可以用一个更简单的策略&#xff1a;使用 flask 编写一个临时的 API。 服务端配置 以下是一个简单的 Flask 应用程序代码示例&…...

MySQL 中的排序:索引排序与文件排序

文章目录 MySQL 中的排序&#xff1a;索引排序与文件排序全解析一、引言二、索引排序&#xff08;一&#xff09;原理&#xff08;二&#xff09;示例 三、文件排序&#xff08;一&#xff09;单路排序&#xff08;二&#xff09;双路排序&#xff08;三&#xff09;归并排序 四…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...