3、setup语法糖

setup 概述

setupVue3中一个新的配置项,值是一个函数,它是 Composition API 件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup中。

特点如下:

  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的

使用

<script setup lang="ts" name="Student">

其中name为组件名称。

代码

Student.vue

<template>
<div><h2>{{ name }}</h2><h2>{{ age }}</h2><button @click="updateName">修改名字</button><button @click="updateAge">修改年龄</button><button @click="showPhone">显示联系方式</button>
</div>
</template><script setup lang="ts" name="Student">import { ref, Ref } from 'vue';let name=ref('weihu')let age=ref(18)function updateName(){name.value="李四"}function updateAge(){age.value+=1}function showPhone(){alert("18880709")}
</script><style scoped></style>

App.vue

<template><Student/>
</template><script lang="ts">import Student from './components/Student.vue'export default {name:'App', //组件名components:{Student} //注册组件}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

USB协议学习

文章目录 USB发展背景发展变化速度等级通讯接口 四种传输主设备 & 从设备主设备从设备 连接与检测高速设备与主机连接USB总线常见的几种状态 枚举过程特点 控制传输学习资料 USB发展背景 发展变化 USB1.1&#xff1a;规范了USB低全速传输&#xff1b; USB2.0&#xff1a;…

讲讲 kafka 维护消费状态跟踪的方法?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲 kafka 维护消费状态跟踪的方法&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲讲 kafka 维护消费状态跟踪的方法&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#x…

【成都新篇】龙信科技电子取证实验室,引领科技取证新时代

文章关键词&#xff1a;电子数据取证实验室、手机取证、介质取证、云取证、现场勘查、电子物证 在科技创新的浪潮中&#xff0c;龙信科技成都实验室以其卓越的电子数据取证服务&#xff0c;成为了中西部地区一颗璀璨的明珠。随着新址的搬迁&#xff0c;我们不仅扩大了业务范围…

linux自动清理管理日志文件 logrotate

logrotate是linux通常会自带的工具&#xff0c;可以自动切割清理日志文件 一、安装&#xff08;通常无需&#xff09; 通常系统自带 sudo apt install logrotate或者 sudo dnf install logrotate二、具体使用 以nginx日志为例 1.创建脚本文件 vi /etc/logrotate.d/nginx…

JDBC学习笔记

九月十八: 需要添加jar包到依赖 虽然能驱动了,但是仍然不知道当时为什么不能驱动, 8.0以上会自动驱动, 也就是说只需要做好connection和statement 连接数据库的五种方式: 方式五: Statement: SQL注入小案例: ? 相当于占位符 JDBCUtils: 事务与批处理: String sql "INS…

wps Excel下拉框生成填充及下拉框内容颜色格式修改

一、Excel下拉框生成&#xff1a;(路径&#xff1a;数据-下拉列表) 1、先选中需要插入下拉列表的单元格 2、然后进入“数据-下拉列表”中增加对应的下拉项目(例如&#xff1a;√&#xff0c;X) 二、下拉框选项颜色和字体修改 1、先选中需要修改的下拉列表的所有单元格 2、然…

预约小程序多选修改——思路分享

预约小程序——多选的修改 预约小程序模版的来源&#xff1a;yunzizyy/ZixiAppt: 在这个小程序上做了较多的修改&#xff08;补充了丢失的代码、二维码签到、惩罚封禁机制、多选时间段和设置日期&#xff09;&#xff0c;其中有一个涉及到了时间段选择中的多选功能的添加&…

PostgreSQL核心揭秘(二)-进程和内存架构

目录 1、进程架构2、进程架构图 3、内存架构 4、内存架构图 PostgreSQL 的进程架构采用了一个多进程的设计&#xff0c;这使其能够有效地管理并发连接和资源。以下是 PostgreSQL 的主要进程架构组成部分的详细描述&#xff1a; 1. 主进程&#xff08;Postmaster&#xff09; 功…

pta题目

1.查询至少生产两种不同的计算机(PC或便携式电脑)且机器速度至少为133的厂商 AC: select distinct(pd.maker) --去重查询 from product pd where pd.type in (个人电脑, 便携式电脑) --题目上要求的&#xff0c;至少一个&#xff0c;in是从里面选择 and --这里也是model其实相…

【Effective C++】阅读笔记2

1. 复制对象时要保证复制内容完整性 错误场景复现&#xff08;没有复制基类部分&#xff09; 如果一个类中包含多个成员变量或者继承了基类&#xff0c;那么在拷贝构造函数或者赋值运算符中&#xff0c;必须保证所有成员的基类部分被复制。 基类没有被复制&#xff0c;这样就都…

线程基础知识、jmm(Java内存模型)

目录 线程基础知识 并发与并行 进程和线程 线程优先级 创建线程的方式主要有三种 休眠 作出让步 join() 方法 线程协作注意什么 理解线程状态 选择合适的协作工具 共享资源的访问控制 避免竞争条件 创建线程几种方式 线程状态&#xff0c;状态之间切换 新建&…

计算机毕业设计Spark+大模型股票推荐系统 股票预测系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

MyBatis-Plus快速入门:从安装到第一个Demo

一、前言 在现代 Java 应用程序中&#xff0c;数据访问层的效率与简洁性至关重要。MyBatis-Plus 作为 MyBatis 的增强工具&#xff0c;旨在简化常见的数据操作&#xff0c;提升开发效率。它提供了丰富的功能&#xff0c;如自动生成 SQL、条件构造器和简单易用的 CRUD 操作&…

零基础Java第十二期:类和对象(三)

目录 一、static成员&#xff08;补&#xff09; 1.1. static修饰成员方法 1.2. static成员变量初始化 二、代码块 2.1. 静态代码块和实例代码块 ​三、对象的打印 一、static成员&#xff08;补&#xff09; 1.1. static修饰成员方法 public class Linear {public st…

Topaz Video AI for Mac 视频无损放大软件安装教程【保姆级,操作简单轻松上手】

Mac分享吧 文章目录 Topaz Video AI for Mac 视频无损放大软件 安装完成&#xff0c;软件打开效果一、Topaz Video AI 视频无损放大软件 Mac电脑版——v5.3.5⚠️注意事项&#xff1a;1️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件&#xff0c;将安装包从左侧拖入右侧文…

Java基础语法①Java特点和环境安装

目录 1. Java的概念和用途 1.1 Java的概念和发展史 1.2 Java的重要性 1.3 Java的特点 2. Java环境 2.1 JVM 和 JDK 2.2 Java环境安装 2.3 安装IntelliJ IDEA并使用 写在前面&#xff1a;本人已经学习了C/C方向的内容&#xff0c;大二结束找到实习回学校后还有时间&…

atest v0.0.18 提供了强大、灵活的 HTTP API Mock 功能

atest 发布 v0.0.18 atest 是致力于帮助开发者持续保持高质量 API 的开源接口工具。 你可以在命令行终端或者容器中启动&#xff1a; docker run -p 8080:8080 ghcr.io/linuxsuren/api-testing:v0.0.18 亮点 在开源之夏 2024 中 atest 增加了基于 MySQL 的测试用例历史的支持HT…

ele-table表格列表内,双击编辑部分信息(el-table组件同理)

说明 ele-table 为公司内部组件&#xff0c;重点看 【主要代码】 部分代码 ele-table表格列表内&#xff1a;双击需要编辑的区域&#xff0c;编辑部分信息 实现 双击需要编辑的数据&#xff0c;展示输入框/日期选择&#xff0c; 展示输入框&#xff1a;修改完之后&#xff0c;按…

开源的GPT-4o模型使用指南,Mini-Omni2集视觉、语音和双工能力于一体的

1. Mini-Omni2 是什么&#xff1f; Mini-Omni2 是一个开源的多模态语言模型&#xff0c;旨在模拟 GPT-4o 的视觉、语音和文本处理能力。它能够理解和生成视觉、听觉和文本内容&#xff0c;并支持实时的语音输出和灵活的双工交互。 Mini-Omni2 由清华大学和 Inspirai 的研究人…

Serverless + AI 让应用开发更简单

本文整理自 2024 云栖大会&#xff0c;阿里云智能高级技术专家&#xff0c;史明伟演讲议题《Serverless AI 让应用开发更简单》 随着云计算和人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;企业对于高效、灵活且成本效益高的解决方案的需求日益增长。本文旨在…