vue3-03初学vue3中的配置项setup(Composition API (组合API组件中所用到的:数据、方法等,均要配置在setup中)

1.关于setup

        Vue3.0中一个新的配置项,值为一个函数.setup是所有Composition API (组合API)“表演的舞台”m组件中所用到的:数据、方法等等,均要配置在setup中。

2..setup函数使用

setup函数的两种返回值

 1.若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。

2.若返回一个渲染函数: 则可以自定义染内容。

2.1返回对象(常用)

定义数据与方法

<template><div>博主信息</div><div>昵称--{{ name }}</div><div>年龄--{{ age }}</div><button @click="say">点击</button>
</template><script>
export default {name: "App",setup() {// 此处暂时不考虑响应式// 数据let name = "岂不闻";let age = 25;// 方法function say() {alert(`我叫${name}`, `${age}岁`);}// 返回对象常用return {name,age,say,};},
};
</script><style>
</style>

2.2返回渲染函数(了解)
<template><h3></h3>
</template><script>
import { h } from "vue";
export default {name: "App",setup() {// 返回渲染函数return () => {return h("h3", "岂不闻");};},
};
</script><style>
</style>

3.注意不要与Vue2.x配置混用

  1. Vue2x配置 (data、methos、computed...)中可以访问到setup中的属性、方法,但在setup中不能访问到Vue2.x配置(data、methos、computed...),有重名,setup优先
  2. setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性

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

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

相关文章

docker 安装的open-webui链接ollama出现网络错误

# 故事背景 部署完ollama以后&#xff0c;使用谷歌浏览器的插件Page Assist - 本地 AI 模型的 Web UI 可以比较流畅的使用DeepSeek&#xff0c;但是只局限于个人使用&#xff0c;想分享给更多的小伙伴使用&#xff0c;于是打算使用open-webui 来管理用户&#xff0c;经官网推荐…

【进阶】Java设计模式详解

java注解 什么是注解&#xff1f; java中注解(Annotation)&#xff0c;又称java标注&#xff0c;是一种特殊的注释。 可以添加在包&#xff0c;类&#xff0c;成员变量&#xff0c;方法&#xff0c;参数等内容上面&#xff0c;注解会随同代码被编译到字节码文件中&#xff0…

观望=没有!

“兄弟&#xff0c;Java现在学还有前途吗&#xff1f;”“前端是不是饱和了&#xff1f;”——每天打开私信&#xff0c;这类问题能占大半。我的回复永远只有一句&#xff1a; “如果你非要等我说‘行’才敢行动&#xff0c;那答案已经不重要了。” # 技术人总在纠结“能不能”…

百度搜索融合 DeepSeek 满血版,开启智能搜索新篇

百度搜索融合 DeepSeek 满血版&#xff0c;开启智能搜索新篇 &#x1f680; &#x1f539; 一、百度搜索全量接入 DeepSeek &#x1f539; 百度搜索迎来重要升级&#xff0c;DeepSeek 满血版全面上线&#xff01;&#x1f389; 用户在百度 APP 搜索后&#xff0c;点击「AI」即…

【MySQL系列文章】Linux环境下安装部署MySQL

前言 本次安装部署主要针对Linux环境进行安装部署操作,系统位数64 getconf LONG_BIT 64MySQL版本&#xff1a;v5.7.38 一、下载MySQL MySQL下载地址&#xff1a;MySQL :: Download MySQL Community Server (Archived Versions) 二、上传MySQL压缩包到Linuxx环境&#xff0c…

RedisTemplate存储含有特殊字符解决

ERROR信息: 案发时间: 2025-02-18 01:01 案发现场: UserServiceImpl.java 嫌疑人: stringRedisTemplate.opsForValue().set(SystemConstants.LOGIN_CODE_PREFIX phone, code, Duration.ofMinutes(3L)); // 3分钟过期作案动机: stringRedisTemplate继承了Redistemplate 使用的…

C++--STL库-List

目录 1.list 的基本使用 1.1 创建和初始化 1.2. 插入元素 1.3. 删除元素 1.4. 访问元素 1.5 遍历 1.6 总结 list是C标准库&#xff08;STL&#xff09;中的双向链表容器&#xff0c;属于<list>头文件。 它的特点是&#xff1a; 动态大小&#xff1a;可以随时插入…

C语言——深入理解指针(3)

文章目录 字符指针变量数组指针变量数组指针变量是什么&#xff1f;数组指针变量怎么初始化 二维数组传参的本质函数指针变量函数指针变量的创建函数指针变量的使用两段关于函数的有趣代码typedef关键字 函数指针数组转移表第一种写法&#xff1a;第二种写法&#xff08;函数指…

mybatis使用typeHandler实现类型转换

使用mybatis作为操作数据库的orm框架&#xff0c;操作基本数据类型时可以通过内置的类型处理器完成java数据类型和数据库类型的转换&#xff0c;但是对于扩展的数据类型要实现与数据库类型的转换就需要自定义类型转换器完成&#xff0c;比如某个实体类型存储到数据库&#xff0…

基于微信小程序的宿舍报修管理系统设计与实现,SpringBoot(15500字)+Vue+毕业论文+指导搭建视频

运行环境 jdkmysqlIntelliJ IDEAmaven3微信开发者工具 项目技术SpringBoothtmlcssjsjqueryvue2uni-app 宿舍报修小程序是一个集中管理宿舍维修请求的在线平台&#xff0c;为学生、维修人员和管理员提供了一个便捷、高效的交互界面。以下是关于这些功能的简单介绍&#xff1a; …

STM32 HAL库 UART串口发送数据实验

一、实验目标 通过STM32的UART串口发送字符串数据到PC端串口调试助手&#xff0c;验证通信功能。 二、硬件准备 主控芯片&#xff1a;STM32F103C8T6。 串口模块&#xff1a;USB转TTL模块。 接线说明&#xff1a; STM32的USART1_TX&#xff08;PA9&#xff09; → USB-TTL模…

一.AI大模型开发-初识机器学习

机器学习基本概念 前言 本文主要介绍了深度学习基础&#xff0c;包括机器学习、深度学习的概念&#xff0c;机器学习的两种典型任务分类任务和回归任务&#xff0c;机器学习中的基础名词解释以及模型训练的基本流程等。 一.认识机器学习 1.人工智能和机器学习 人工智能&am…

冒险岛079 V8 整合版源码搭建教程+IDEA启动

今天教大家来部署下一款超级怀旧游戏冒险岛&#xff0c;冒险岛源码是开源的&#xff0c;但是开源的代码会有各种&#xff0c;本人进行了加工整合&#xff0c;并且用idea进行了启动测试&#xff0c;经过修改后没有任何问题。 启动截图 后端控制台 前端游戏界面 声明 冒险岛源码…

【操作系统】操作系统概述

操作系统概述 1.1 操作系统的概念1.1.1 操作系统定义——什么是OS&#xff1f;1.1.2 操作系统作用——OS有什么用&#xff1f;1.1.3 操作系统地位——计算机系统中&#xff0c;OS处于什么地位&#xff1f;1.1.4 为什么学操作系统&#xff1f; 1.2 操作系统的历史1.2.1 操作系统…

单元测试junit5

一、idea 安装自动化生成插件jcode5 安装可能不成功&#xff0c;尝试多次安装&#xff1b; 安装成功后&#xff0c;重启idea&#xff0c;再次确认安装是否成功&#xff1b; 二、在需要生成单元测试代码的模块的pom中引入依赖 ......<parent><groupId>org.springf…

mysql主从配置(2025)

一、配置主服务器 编辑主mysql配置文件my.cnf&#xff08;vim /etc/my.cnf&#xff09;&#xff0c;在[mysqld]下添加 [mysqld] # 配置主ID,必须在所有参与主从复制的数据库保证唯一 server-id1 # 打开二进制日志 log-bin/var/lib/mysql/mysql-bin.log # 只允许同步ente_dat…

6.2.图的存储结构-邻接矩阵法

一.邻接矩阵法存储不带权图&#xff1a; 结点不带权值&#xff1a; 1.左图的无向图中&#xff0c;A到B直达的有一条路&#xff0c;所以A行B列的值为1&#xff1b; 左图的无向图中&#xff0c;A到F没有直达的路&#xff0c;所以A行F列的值为0&#xff1b; 结论&#xff1a;无…

1-知识图谱-概述和介绍

知识图谱&#xff1a;浙江大学教授 陈华军 知识图谱 1课时 http://openkg.cn/datasets-type/ 知识图谱的价值 知识图谱是有什么用&#xff1f; 语义搜索 问答系统 QA问答对知识图谱&#xff1a;结构化图 辅助推荐系统 大数据分析系统 自然语言理解 辅助视觉理解 例…

【C语言】C语言 食堂自动化管理系统(源码+数据文件)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、测试技术。 【C语言】C语言 食堂自动化管理系统&#xff08;源…

C#之上位机开发---------C#通信库及WPF的简单实践

〇、上位机&#xff0c;分层架构 界面层 要实现的功能&#xff1a; 展示数据 获取数据 发送数据 数据层 要实现的功能&#xff1a; 转换数据 打包数据 存取数据 通信层 要实现的功能&#xff1a; 打开连接 关闭连接 读取数据 写入数据 实体类 作用&#xff1a; 封装数据…