当前位置: 首页 > 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;归并排序 四…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...