第III章-ⅠVue3进阶语法

vue3进阶语法

  • setup 函数
  • Vue方法计算属性及监听器
    • methods方法
  • computed计算属性
      • ref函数
  • watch 监听器
  • Vue的表单绑定
    • v-model实现表单绑定
    • v-model修饰符

setup 函数

Vue 3 引入了组合式 API,其中核心是 setup 函数。这个函数是组件中所有 Composition API 特性的入口点。

  • 组织逻辑:setup 函数允许开发者更灵活地组织代码,将相关功能逻辑组合在一起,而不是分散在 data, methods, computed 等选项中。
  • 复用逻辑:通过使用 Composition API,开发者可以更容易地提取和复用逻辑,尤其是跨组件的逻辑。
  • 更好的 TypeScript 集成:setup 函数提供了更好的类型推断,使得与 TypeScript 的集成更为紧密和有效。
<script setup>
</script>

Vue方法计算属性及监听器

methods方法

用于定义组件的功能方法,可以在模板中通过事件绑定或直接调用。

<template><button @click="handleClick">Click Me</button>
</template><script setup>
function handleClick() {console.log("Button clicked.");
}
</script>

在这里,handleClick 方法通过 @click 绑定到按钮的 click 事件。区别:在 Vue 3 中,methods 方法可以通过组合式 API 中的 setup 函数直接定义。这与 Vue 2 中通过选项 API 定义 methods 略有不同。

computed计算属性

用于定义具有缓存机制的属性,其值由其他响应式数据派生。

<template><div>{{ fullName }}</div>
</template><script setup>
import { ref, computed } from 'vue';const firstName = ref("John");
const lastName = ref("Doe");const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

在这里,fullName 是一个计算属性,它通过 computed 方法定义并由 firstName 和 lastName 变量派生。区别:Vue 3 中的 computed 使用组合式 API 进行定义,而 Vue 2 中是通过选项 API 的 computed 属性进行定义。

ref函数

ref 用于创建一个响应式的引用对象,其主要用途是维持一个内部值,并确保 Vue 的响应式系统能够追踪到其变化。当你在组件中使用 ref 时,你可以将普通类型(如字符串、数字、布尔值)转换成响应式对象。这个响应式对象有一个名为 value 的属性,用来存储其实际的值。它将普通 JavaScript 值转换为响应式对象,使其能够在 Vue 组件中进行双向绑定、依赖追踪等响应式操作。

const count = ref(0);
count.value = 1; // 更新响应式状态

count 是一个响应式引用,通过修改 count.value,Vue 的响应式系统能够捕捉到这一变化并相应地更新 UI。
提示:在模板中直接使用 count 而不是 count.value,Vue 自动处理了解包。在 JavaScript 代码中 Vue 不会自动解包 ref,你需要显式地通过 .value 属性来操作它的值。

watch 监听器

用于监听一个或多个响应式数据,并在数据变化时触发特定逻辑。

<template><div>{{ count }}</div>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);
});function increment() {count.value += 1;
}
</script>

在这里,watch 监听了 count 变量,并在其变化时记录新旧值。区别:Vue 3 中的 watch 使用组合式 API 定义,而 Vue 2 中是通过选项 API 的 watch 属性定义。

Vue的表单绑定

v-model实现表单绑定

用于将输入控件与响应式数据绑定,从而实现双向数据绑定。

<template><input v-model="name" /><p>{{ name }}</p>
</template><script setup>
import { ref } from 'vue';const name = ref("");
</script>

在这里,v-model 绑定了输入框的值与 name 变量,实现了双向数据绑定。区别:Vue 3 中的 v-model 支持多种形式,可以绑定多个属性,例如:

<input v-model:name="userName" />
<input v-model:email="userEmail" />

v-model修饰符

  • .lazy:仅在输入框失去焦点时更新变量:
<input v-model.lazy="name" />

在这里,name 变量仅在输入框失去焦点时更新。

  • .number:自动将输入转换为数值:
<input v-model.number="age" />

在这里,age 变量会自动转换为数值。

  • .trim:自动去除输入的空白字符:
<input v-model.trim="username" />

在这里,username 变量会自动去除输入的空白字符。
v-model 修饰符在 Vue 3 和 Vue 2 中的作用一致,但 Vue 3 提供了更灵活的多属性绑定方式。

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

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

相关文章

C语言——文件相关操作

2.什么是文件 3.文件的打开和关闭 4.文件的顺序读写 5.文件的随机读写 6.文本文件和二进制文件 7.文件读取结束的判定 8.文件缓冲区 一、文件相关介绍 1、为什么使用文件 文件用于永久存储数据。通过使用文件&#xff0c;我们可以在程序关闭后保存数据&#xff0c;以便将来…

手机恢复出厂设置ip地址会变吗

当我们对手机进行恢复出厂设置时&#xff0c;很多人会担心手机的IP地址是否会发生变化。IP地址对于手机的网络连接至关重要&#xff0c;它决定了手机在网络中的身份和位置。那么&#xff0c;手机恢复出厂设置后&#xff0c;IP地址到底会不会发生变化呢&#xff1f;虎观代理小二…

AI-数学-高中53-离散型随机变量的均值与方差

原作者视频&#xff1a;【随机变量】【一数辞典】3离散型随机变量的均值与方差_哔哩哔哩_bilibili 标准差 方差开根

加州大学欧文分校英语中级语法专项课程03:Tricky English Grammar 学习笔记

Tricky English Grammar Course Certificate Course Intro 本文是学习 https://www.coursera.org/learn/tricky-english-grammar?specializationintermediate-grammar 这门课的学习笔记 文章目录 Tricky English GrammarWeek 01: Nouns, Articles, and QuantifiersLearning …

17、ESP32 SPI

SPI 概述 SPI&#xff08;Serial Peripheral Interface&#xff09;协议&#xff0c;即串行外围设备接口&#xff0c;采用一主多从的全双工通信总线。被广泛使用在要求通讯速率较高的场合。 SPI 通信需要四条信号线&#xff1a; MISO&#xff1a; 主器件数据输入&#xff0c;从…

JAVASE---抽象类相关

instanceof 和类型转换 System.out.println(X instanceof Y );主要看X与Y之间是否存在父子&#xff08;继承&#xff09;关系&#xff0c;如果存在则编译可完成&#xff0c;否则无法 进行编译。 1.父类引用指向子类的对象 2.把子类转换为父类&#xff0c;向上转型; 3.把父类转…

基于SSM SpringBoot vue教务排课系统

基于SSM SpringBoot vue教务排课系统 系统功能 登录 个人中心 学生信息管理 教师信息管理 课室信息管理 班级信息管理 系别信息管理 专业信息管理 课程信息管理 选课信息管理 课表信息管理 开发环境和技术 开发语言&#xff1a;Java 使用框架: SSM(Spring SpringMVC Myba…

spring源码分析之上下文构建

源码分析之上下文构建 以ClassPathXmlApplicationContext为例来说明 ApplicationContext context new ClassPathXmlApplicationContext("spring-lifecycle.xml"); 一个简单地创建ApplicationContext实例的方法&#xff0c;spring会做什么事呢&#xff1f; // this(n…

【网络原理】UDP协议 | UDP报文格式 | 校验和 | UDP的特点 | 应用层的自定义格式

文章目录 一、UDP协议1.UDP的传输流程发送方接收方 2.UDP协议报文格式&#xff1a;长度受限校验和如何校验&#xff1a;CRC算法&#xff1a;循环冗余算法md5算法&#xff1a; 2.UDP的特点 二、开发中常见的自定义格式1.xml&#xff08;古老&#xff09;2.json&#xff08;最流行…

力扣763. 划分字母区间

Problem: 763. 划分字母区间 文章目录 题目描述思路复杂度Code 题目描述 思路 1.创建一个名为 last 的数组&#xff0c;用于存储每个字母在字符串 s 中最后出现的位置。然后&#xff0c;获取字符串 s 的长度 len。 2.计算每个字母的最后位置&#xff1a;遍历字符串 s&#xff0…

Unity开发微信小游戏(2)分享

目录 1.概述 2.代码 3.示例 4.个人作品 1.概述 这里我们能做有两件事&#xff1a; 1&#xff09;主动发起分享 2&#xff09;监听右上角分享&#xff08;...按钮&#xff0c;发朋友圈也在这里&#xff09; API&#xff1a;官方文档 2.代码 1&#xff09;主动发起分享&…

MySQL45讲(一)(42)

该节是有关于数据库权限的文章 grant all privileges on *.* to ua% with grant option; 给与用户ua%最高的权限 revoke all privileges on *.* from ua%; 回收所有权限 注意一点&#xff0c;已经存在的连接是不会有全部权限的的&#xff0c;因为在创建连接的时候&#xff0…

在家连学校的服务器

在家连接学校的服务器。 Step1: 首先下载一个vscode的插件 Visual Studio Code - Code Editing. Redefined 我的服务区是ubuntu20.04&#xff0c;x64的&#xff0c;所以下载这个。 Step2: 下载到本地之后&#xff0c;想办法将这个文件拷贝到你的服务器上。 Step3: 解压该包…

Python高级编程

描述 集合&#xff0c;列表生成式&#xff0c;生成器&#xff0c;迭代器&#xff0c;切片 Python 中的集合类型是一种无序、不重复的数据容器&#xff0c;用于存储可哈希&#xff08;hashable&#xff09;的元素。Python 提供了两种内置的集合类型&#xff1a;set 和 frozens…

【软测学习笔记】MySQL入门Day04

&#x1f31f;博主主页&#xff1a;我是一只海绵派大星 &#x1f4da;专栏分类&#xff1a;软件测试笔记 &#x1f4da;参考教程&#xff1a;黑马教程❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、空判断 二、where 子句在 update 与 delete 语句中同样有效 三、ord…

U盘到底要格式化成什么格式比较好?

前言 前段时间有小伙伴问我&#xff1a;U盘为啥无法粘贴超过4GB的压缩包。 相信这个问题很多人都会遇到&#xff0c;无论是压缩包、镜像文件还是电影&#xff0c;都会有超过4GB的时候。 如果文件超过了4GB&#xff0c;那么就会小伙伴遇到电脑提示&#xff1a;无法粘贴超过4G…

基于Springboot的校园食堂订餐系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的校园食堂订餐系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

R语言数据探索和分析7-使用随机森林模型对中国GDP及其影响因素分析

一、研究背景和意义 国内生产总值&#xff08;GDP&#xff09;是宏观经济领域中最为关注的经济统计数据之一&#xff0c;它反映了一个国家或地区在一定时期内所创造的所有最终商品和服务的总价值。GDP的增长率不仅仅是一个国家经济健康状况的关键指标&#xff0c;还直接关系到…

服务器数据恢复—异常断电导致RAID模块故障的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌ProLiant DL380系列服务器&#xff0c;服务器中有一组由6块SAS硬盘组建的RAID5阵列&#xff0c;WINDOWS SERVER操作系统&#xff0c;作为企业内部文件服务器使用。 服务器故障&#xff1a; 机房供电几次意外中断&#xff0c;服务器出现故…

AI代理架构的发展:从单一到多代理系统的演进及其影响分析

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…