第III章-ⅠVue3进阶语法

ops/2024/9/25 21:23:33/

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.ppmy.cn/ops/32746.html

相关文章

设计模式一

单例模式&#xff08;Singleton Pattern&#xff09;是一种常用的软件设计模式&#xff0c;旨在确保一个类只有一个实例&#xff0c;并提供一个全局访问点。单例模式常用于控制资源密集型对象的创建&#xff0c;如数据库连接池、线程池等&#xff0c;以避免资源浪费。 单例模式…

SpringBoot之文件操作记录存储服务

概述 应公司安全管理部门政策要求,需要实现文件上传/下载操作的日志记录,经过分析需要在目前平台上基于springboot搭建一套服务供其他应用具体业务调用,其中该服务涉及到的技术支撑&#xff1a;AOP实现异常处理、queuespring-scheduler异步执行定时任务、Fegin组件进行服务间通…

基于springboot的汽车资讯网站源码数据库

基于springboot的汽车资讯网站源码数据库 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了汽车资讯网站的开发全过程。通过分析汽车资讯网站管理的不足&#xff0c;创建了一个计算机管理汽车资讯网站的方案。文章介…

Claude聊天机器人推出全新iOS客户端及团队专属计划

Anthropic 正在使其 Claude AI 更易于在移动设备上访问。该公司发布了适用于 iOS 的 Claude 移动应用程序,任何用户都可以免费下载。与聊天机器人的移动网络版本类似,该应用程序跨设备同步用户与 Claude 的对话,允许他们从计算机跳转到应用程序(反之亦然),而不会丢失聊天…

【Docker】搭建一个媒体服务器插件后端API服务 - MetaTube

【Docker】搭建一个媒体服务器插件后端API服务 - MetaTube 前言 本教程基于群晖的NAS设备DS423的docker功能进行搭建&#xff0c;DSM版为 7.2.1-69057 Update 5。 简介 MetaTube 是一个媒体服务器插件&#xff0c;主要用于 Emby 和 Jellyfin 媒体服务器。它的主要功能是从互…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-11.1,11.2-BSP文件目录组织

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

Android数据恢复软件快速比较:Android数据恢复的7最佳工具

您在 Android 设备上保留哪些类型的数据&#xff1f;如果您和大多数人一样&#xff0c;那么您可能已经列出了文档、照片、视频和音频文件。如果您使用智能手机或平板电脑的时间足够长&#xff0c;我们愿意打赌您拥有Android数据丢失的第一手经验。 幸运的是&#xff0c;我们也…

EKS创建ebs存储卷

1、创建ebs卷 也可以aws命令创建 # aws ec2 create-volume --availability-zone ap-east-1a --size 100 --volume-type gp3 {"AvailabilityZone": "ap-east-1a","Encrypted": false,"VolumeType": "gp3","VolumeId&q…