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

Vue3setup()的非语法糖和语法糖的用法

1、setup()的语法糖的用法

script标签上写setup属性,不需要export default {} setup() 都可以省

创建每个属性或方法时也不需要return

导入某个组件时也不需要注册

<script setup >
// script标签上写setup属性,不需要export  default  {} setup() 都可以省
import {ref} from 'vue'//组合式api//创建响应式数据age,初始值是10const age=ref(10)const sname=ref('zs')//修改年龄的方法const increase=()=>{age.value++}//模板需要用的数据或方法,需要 return</script><template>
<div>hello,world</div>
<p>年龄{{ age }}</p>
<p>姓名:{{ sname }}</p>
<button @click="increase">年龄+1</button>
</template><style scoped></style>

2、setup()的非语法糖的用法

创建多个数据就要return多个数据

setup() 组合式api的入口,执行的时机比beforCreate还早

<script >
import {ref} from 'vue'
export default {setup(){//组合式api//创建响应式数据age,初始值是10const age=ref(10)const sname=ref('zs')//修改年龄的方法const increase=()=>{age.value++}//模板需要用的数据或方法,需要 returnreturn {age,increase,sname}}
}
</script><template>
<div>hello,world</div>
<p>年龄{{ age }}</p>
<p>姓名:{{ sname }}</p>
<button @click="increase">年龄+1</button>
</template><style scoped></style>

相关文章:

Vue3setup()的非语法糖和语法糖的用法

1、setup()的语法糖的用法 script标签上写setup属性&#xff0c;不需要export default {} setup() 都可以省 创建每个属性或方法时也不需要return 导入某个组件时也不需要注册 <script setup > // script标签上写setup属性&#xff0c;不需要export default {} set…...

HTTP状态信息

1xx: 信息 消息:描述:100 Continue服务器仅接收到部分请求&#xff0c;但是一旦服务器并没有拒绝该请求&#xff0c;客户端应该继续发送其余的请求。101 Switching Protocols服务器转换协议&#xff1a;服务器将遵从客户的请求转换到另外一种协议。 2xx: 成功 消息:描述:200…...

CSS之边框样式

让我为大家介绍一下边框样式吧&#xff01;如果大家想更进一步了解边框的使用&#xff0c;可以阅读这一篇文章&#xff1a;CSS边框border 属性描述none没有边框,即忽略所有边框的宽度(默认值)solid边框为单实线dashed边框为虚线dotted边框为点线double边框为双实线 代码演示&…...

k8s-helm

Helm: 什么是helm,在没有这个heml之前&#xff0c;deployment service ingress的作用就是通过打包的方式&#xff0c;把deployment service ingress这些打包在一块&#xff0c;一键式的部署服务&#xff0c;类似于yum 官方提供的一个类似于安全仓库的功能&#xff0c;可以实现…...

黑马程序员JavaWeb开发|Maven高级

一、分模块设计与开发 分模块设计&#xff1a; 将项目按照功能拆分成若干个子模块&#xff0c;方便项目的管理维护、扩展&#xff0c;也方便模块间的相互调用&#xff0c;资源共享。 注意&#xff1a;分模块开发需要先对模块功能进行设计&#xff0c;再进行编码。不会先将工…...

【经验分享】MAC系统安装R和Rstudio(保姆级教程)安装下载只需5min

最近换了Macbook的Air电脑&#xff0c;自然要换很多新软件啦&#xff0c;首先需要安装的就是R和Rstudio啦&#xff0c;网上的教程很多很繁琐&#xff0c;为此我特意总结了最简单实用的安装方式: 一、先R后Rstudio 二、R下载 下载网址&#xff1a;https://cran.r-project.org …...

探索设计模式的魅力:“感受单例模式的力量与神秘” - 掌握编程的王牌技巧

在软件开发的赛场上&#xff0c;单例模式以其独特的魅力长期占据着重要的地位。作为设计模式中的一员&#xff0c;它在整个软件工程的棋盘上扮演着关键性角色。本文将带你深入探索单例模式的神秘面纱&#xff0c;从历史渊源到现代应用&#xff0c;从基础实现到高级技巧&#xf…...

SpringCloud Aliba-Seata【上】-从入门到学废【7】

目录 &#x1f9c2;.Seata是什么 &#x1f32d;2.Seata术语表 &#x1f953;3.处理过程 &#x1f9c8;4.下载 &#x1f37f;5.修改相关配置 &#x1f95e;6.启动seata 1.Seata是什么 Seata是一款开源的分布式事务解决方案&#xff0c;致力于在微服务架构下提供高性能…...

C# Cad2016二次开发选择csv导入信息(七)

//选择csv导入信息 [CommandMethod("setdata")] //本程序在AutoCAD的快捷命令是"DLLLOAD" public void setdata() {Microsoft.Win32.OpenFileDialog dlg new Microsoft.Win32.OpenFileDialog();dlg.DefaultExt ".csv";// Display OpenFileDial…...

[陇剑杯 2021]日志分析

[陇剑杯 2021]日志分析 题目做法及思路解析&#xff08;个人分享&#xff09; 问一&#xff1a;单位某应用程序被攻击&#xff0c;请分析日志&#xff0c;进行作答&#xff1a; 网络存在源码泄漏&#xff0c;源码文件名是_____________。(请提交带有文件后缀的文件名&…...

Java面试汇总——jvm篇

目录 JVM的组成&#xff1a; 1、JVM 概述(⭐⭐⭐⭐) 1.1 JVM是什么&#xff1f; 1.2 JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 2、什么是程序计数器&#xff1f;(⭐⭐⭐⭐) 3、介绍一下Java的堆(⭐⭐⭐⭐) 4、虚拟机栈(⭐⭐⭐⭐) 4.1 什么是虚拟机栈&…...

数据结构:完全二叉树(递归实现)

如果完全二叉树的深度为h&#xff0c;那么除了第h层外&#xff0c;其他层的节点个数都是满的&#xff0c;第h层的节点都靠左排列。 完全二叉树的编号方法是从上到下&#xff0c;从左到右&#xff0c;根节点为1号节点&#xff0c;设完全二叉树的节点数为sum&#xff0c;某节点编…...

RK3568 移植Ubuntu

使用ubuntu-base构建根文件系统 1、到ubuntu官网获取 ubuntu-base-18.04.5-base-arm64.tar.gz Ubuntu Base 18.04.5 LTS (Bionic Beaver) 2、将获取的文件拷贝到ubuntu虚拟机,新建目录,并解压 mkdir ubuntu_rootfs sudo tar -xpf u...

C++大学教程(第九版)6.34猜数字游戏 6.35 修改的猜数字游戏

文章目录 6.34题目代码运行截图6.35题目代码运行截图 6.34题目 猜数字游戏)编写一个程序&#xff0c;可以玩“猜数字”的游戏。具体描述如下:程序在1~1000之间的整数中随机选择需要被猜的数&#xff0c;然后显示: 代码 #include <iostream> #include <cstdlib>…...

【立创EDA-PCB设计基础】5.布线设计规则设置

前言&#xff1a;本文详解布线前的设计规则设置。经过本专栏中的【立创EDA-PCB设计基础】前几节已经完成了布局&#xff0c;接下来开始进行布线&#xff0c;在布线之前&#xff0c;要设置设计规则。 目录 1.间距设置 1.1 安全间距设置 1.2 其它间距设置 2.物理设置 2.1 导…...

ElementUI简介以及相关操作

ElementUI是一套基于Vue.js的桌面端组件库&#xff0c;提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。以下是ElementUI的简介以及相关操作&#xff1a; 简介&#xff1a;ElementUI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库&#xff…...

内存耗尽排查思路

内存耗尽排查思路 – WhiteNights Site 标签&#xff1a;日志 内存间断性耗尽问题的排查思路 先简单说下背景。排查了两天给我整麻了。 找了个镜像模板做虚拟机。但是发现只要一开机&#xff0c;内存每隔几秒就会被耗尽。看内存的波形图就和坐过山车一样&#xff0c;一会占…...

OpenCV书签 #差值哈希算法的原理与相似图片搜索实验

1. 介绍 差值哈希算法&#xff08;Difference Hash Algorithm&#xff0c;简称dHash&#xff09; 是哈希算法的一种&#xff0c;主要可以用来做以图搜索/相似图片的搜索工作。 2. 原理 差值哈希算法通过计算相邻像素的差异来生成哈希&#xff0c;即通过缩小图像的每个像素与平…...

Unity中URP下获取主灯信息

文章目录 前言一、计算BulinnPhone的函数有两个重载1、 目前最新使用的是该方法&#xff08;这是我们之后主要分析的函数&#xff09;2、 被淘汰的老方法&#xff0c;需要传入一堆数据 二、GetMainLight1、Light结构体2、GetMainLight具有4个方法重载3、1号重载干了什么&#x…...

尝试着在Stable Diffusion里边使用SadTalker进行数字人制作

首先需要标明的是&#xff0c;我这里是图片说话类型&#xff0c;而且是看了知识星球AI破局俱乐部大航海数字人手册进行操作的。写下这篇文章是防止我以后遗忘。 我使用的基础软件是Stable Diffusion&#xff0c;SadTalker是作为插件放进来的&#xff0c;需要注意的是这对自己的…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...