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

Vue3学习(二)

回顾

DOM原生事件event对象

当事件发生时,浏览器会创建一个event对象,并将其作为参数传递给事件处理函数。这个对象包含了事件的详细信息,比如:

  • type:事件的类型(如 'click')
  • target:触发事件的元素
  • currentTarget:绑定事件监听器的元素(对于捕获和冒泡阶段,这可能不是触发事件的元素)
  • stopPropagation():阻止事件进一步传播(冒泡或捕获)
  • preventDefault():阻止事件的默认行为(比如,阻止链接的跳转)
  • timeStamp:事件发生的时间戳

watch 

Today 

组件注册

全局

import { createApp } from 'vue'const app = createApp({})app.component(// 注册的名字'MyComponent',// 组件的实现{/* ... */}
)

全局注册虽然很方便,但有以下几个问题:

  1. 全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中

  2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。

局部

<script setup>
import ComponentA from './ComponentA.vue'
</script><template><ComponentA />
</template>
-----------------------------------------------
import ComponentA from './ComponentA.js'export default {components: {ComponentA},setup() {// ...}
}

props

  • defineProps() 宏来声明
  • props: ['foo']选项式声明

修改props

校验

$emit

 

Vue 3带来了许多新特性和改进,包括对Composition API的官方支持、更好的TypeScript集成、性能改进等。以下是一些Vue 3中常见的语法写法:

1. Composition API

Composition API 是 Vue 3 的核心特性之一,它提供了一种更加灵活和强大的方式来组织和重用逻辑。

<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> <script> 
import { ref } from 'vue'; export default { 
setup() { 
const count = ref(0); function increment() { 
count.value++; 
} return { count, increment }; 
} 
}; 
</script>

2. 选项式API(仍受支持)

虽然Composition API是Vue 3的亮点,但Vue 3仍然完全支持Vue 2中的选项式API。

<template> 
<div>{{ message }}</div> 
<button @click="reverseMessage">Reverse</button> 
</template> <script> 
export default { 
data() { 
return { 
message: 'Hello Vue!' 
}; 
}, 
methods: { 
reverseMessage() { 
this.message = this.message.split('').reverse().join(''); 
} 
} 
}; 
</script>

4. Teleport

Teleport 是一种能够将模板内容“传送”到DOM中Vue应用之外的其他位置的技术。

<template> 
<teleport to="#modal-container"> 
<div class="modal"> 
... 
</div> 
</teleport> 
</template>

5. 自定义指令

Vue 3中的自定义指令与Vue 2类似,但在使用Composition API时,注册方式略有不同。

<template> 
<div v-focus></div> 
</template> <script> 
export default { 
directives: { 
focus: { 
mounted(el) { 
el.focus(); 
} 
} 
} 
}; 
</script> // 在Composition API中 
<script> 
import { onMounted, ref } from 'vue'; export default { 
setup() { 
const el = ref(null); onMounted(() => { 
el.value?.focus(); 
}); return { el }; 
}, 
directives: { 
focus: { 
mounted(el) { 
// 注意:这里不直接操作DOM,而是传递一个引用 
el.value = el; 
} 
} 
} 
}; 
</script>

注意:在Composition API中使用自定义指令时,可能需要一些变通方法来获取DOM元素,因为setup函数中没有this上下文。

6. Props 和 Emits

Props 和 Emits 的使用与Vue 2相似,但在Composition API中,你可能需要使用definePropsdefineEmits

<script setup> 
import { defineProps, defineEmits } from 'vue'; const props = defineProps({ 
title: String 
}); const emit = defineEmits(['update:title']); function updateTitle(newTitle) { 
emit('update:title', newTitle); 
} 
</script>

这些是Vue 3中一些常见的语法和特性。Vue 3提供了更灵活、更强大的开发方式,同时也保持了与Vue 2的兼容性。

 

相关文章:

Vue3学习(二)

回顾 DOM原生事件event对象 当事件发生时&#xff0c;浏览器会创建一个event对象&#xff0c;并将其作为参数传递给事件处理函数。这个对象包含了事件的详细信息&#xff0c;比如&#xff1a; type&#xff1a;事件的类型&#xff08;如 click&#xff09;target&#xff1a…...

【C++】开源:地图投影和坐标转换proj库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍地图投影和坐标转换proj库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&a…...

WordPress主题大前端DUX v8.7源码下载

全新&#xff1a;用户注册流程&#xff0c;验证邮箱&#xff0c;设置密码 新增&#xff1a;列表显示小视频和横幅视频 新增&#xff1a;文章内容中的外链全部增加 nofollow 新增&#xff1a;客服功能中的链接添加 nofollow 优化&#xff1a;产品分类的价格显示...

【论文阅读】自动驾驶光流任务 DeFlow: Decoder of Scene Flow Network in Autonomous Driving

再一次轮到讲自己的paper&#xff01;耶&#xff0c;宣传一下自己的工作&#xff0c;顺便完成中文博客的解读 方便大家讨论。 Title Picture Reference and pictures paper: https://arxiv.org/abs/2401.16122 code: https://github.com/KTH-RPL/DeFlow b站视频: https://www.b…...

调和均值

文章目录 调和均值的定义和公式调和均值的几何解释调和均值的应用调和均值与算术平均和几何平均的比较示例 调和均值的定义和公式 调和均值是一种特殊的平均数&#xff0c;适用于处理涉及比率或速度的数据。对于一组正数 x 1 , x 2 , … , x n x_1, x_2, \ldots, x_n x1​,x2…...

DP学习——模板模式

学而时习之&#xff0c;温故而知新。 字面理解 模板&#xff1f;啥叫模板&#xff1f;模板就是固定死了&#xff0c;就是一套流程/步骤上层写死了。固定死了的流程或者步骤就是模板。然后我们要重写或者改写的是写死的这套流程中的节点。俗称“套模板”。 使用场合&#xff…...

AOP在业务中的简单使用

背景 业务组有一些给开发用的后门接口&#xff0c;为了做到调用溯源&#xff0c;业务组最近需要记录所有接口的访问记录&#xff0c;暂时只需要记录接口的响应结果&#xff0c;如果调用失败&#xff0c;则记录异常信息。由于后门接口较多以及只是业务组内部轻度使用&#xff0…...

C# 用户权限界面的测试内容

测试用户权限界面的主要目标是确保权限管理功能按照设计工作&#xff0c;同时保证用户界面响应正确&#xff0c;不会出现意外的行为或安全漏洞。以下是C#中用户权限界面测试的一些关键内容&#xff1a; 1. 功能性测试 权限分配与撤销&#xff1a;测试权限的分配和撤销功能&am…...

PyCharm

一、介绍 PyCharm 是 JetBrains 公司开发的一款功能强大的 Python 集成开发环境&#xff08;IDE&#xff09;。它专为 Python 开发设计&#xff0c;提供了一系列强大的工具和功能&#xff0c;帮助开发者更高效地编写、调试和维护 Python 代码。以下是对 PyCharm 的详细介绍&am…...

【嵌入式开发 Linux 常用命令系列 1.5 -- grep 过滤特定类型文件】

请阅读【嵌入式开发学习必备专栏 】 文章目录 grep 过滤特定类型文件 grep 过滤特定类型文件 在Linux中使用grep搜索字符串时&#xff0c;如果你想排除特定类型的文件&#xff0c;比如 .map 和 .py 文件&#xff0c;可以使用grep的--exclude选项。这个选项允许你定义一个或多个…...

学习笔记——动态路由——OSPF(邻接/邻居)

十、OSPF的邻接/邻居 1、OSPF路由器之间的关系 (1)基本介绍 在OSPF网络中&#xff0c;为了交换链路状态信息和路由信息&#xff0c;邻居设备之间首先要建立邻接关系&#xff0c;邻居(Neighbors)关系和邻接(Adjacencies)关系是两个不同的概念。 OSPF路由器的两种关系&#x…...

k8s 答疑

1 如何修复容器中的 top 指令以及 /proc 文件系统中的信息呢? 这段自问自答的内容解释了如何通过使用 lxcfs 来修复 Docker 容器中 top 指令和 /proc 文件系统中的信息。让我们分步骤来详细说明: 背景信息 在容器化环境中,通常会遇到一个问题,即容器中的一些命令(如 to…...

[终端安全]-2 移动终端之硬件安全(SE)

本文主要介绍针对安全芯片的攻击和防护方案。 1 芯片攻击 1&#xff09;故障注入攻击 故障注入攻击&#xff08;Fault Injection Attack, FIA&#xff09;是一种通过人为引入故障&#xff0c;诱发系统或芯片在异常情况下产生错误结果&#xff0c;从而泄露机密信息或破坏系统…...

数据库与SQL

数据库基本概念 数据库(DataBase)&#xff1a;数据库就是存储数据的仓库数据库管理系统(DBMS)&#xff1a;可以独立运行的软件&#xff0c;维护磁盘上的数据&#xff0c;用统一的方式维护不同种类的数据&#xff0c;做到通用且高效。常见的DBMS: mysqloracledb2sqlserver 数据…...

AIGC | 在机器学习工作站安装NVIDIA CUDA® 并行计算平台和编程模型

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x02.初识与安装 CUDA 并行计算平台和编程模型 什么是 CUDA? CUDA&#xff08;Compute Unified Device Architecture&#xff09;是英伟达&#xff08;NVIDIA&#xff09;推出的并行计算平台和编…...

【电商纯干货分享】干货速看!电商数据集数据API接口数据分析大全!

数据分析——深入探索中小企业数字化转型&#xff0c;专注提供各行业数据分析干货、分析技巧、工具推荐以及各类超实用分析模板&#xff0c;为钻研于数据分析的朋友们加油充电。 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09…...

随手记录: Ubuntu NVIDIA显卡驱动安装后 屏幕亮度无法调节 无法连接外显示器等问题

背景 一句话&#xff1a;简单记录帮身边人装系统发现 GPU和外接显示器的无法连接&#xff0c;同时亮度无法调节等新问题 设备型号&#xff1a; 联想笔记本&#xff1a;ThinkBook 16p Gen2CPU&#xff1a;AMD Ryzen 7 5800HGPU&#xff1a;RTX 3060 问题描述及流程&#xff…...

Java:数组

文章目录 一、概念二、声明数组2.1 格式2.2 实例 三、初始化数组3.1 格式3.2 实例 四、处理数组4.1 for循环4.2 增强for循环 五、多维数组5.1 格式5.2 实例 一、概念 数组对于每一门编程语言来说都是重要的数据结构之一&#xff0c;当然不同语言对数组的实现及处理也不尽相同。…...

【代码随想录——图论——岛屿问题】

1.岛屿数量 https://kamacoder.com/problempage.php?pid1171 1.1 深度优先搜索 package mainimport "fmt"var direction [][]int{{0, 1}, {0, -1}, {1, 0}, {-1, 0}}func main() {var M, N intfmt.Scanln(&N, &M)sea : make([][]int, N)visited : make…...

异步调用 - 初识

目录 1、引入 2、同步调用 2.1、例子&#xff1a;支付功能 2.2、同步调用的好处 2.3、同步调用的缺点 3、异步调用 3.1、异步调用的方式 3.2、异步调用的优势 3.3、异步调用的缺点 3.4、什么场景下使用异步调用 3.5、MQ技术选型 1、引入 为什么想要异步通信呢&…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...