Vue3:使用setup实现组合式开发

一、情景说明

首先,我们应该知道,Vue3中,可以用Vue2的语法,进行配置式开发。

在这里,我们用Vue3的新语法,实现组合式开发

二、案例

1、组件中使用setup代替Vue2中的data、methodsvc配置项
关键配置:script 标签中的 setup

<script lang="ts" setup name="Person">// 数据,原来是写在data中的,此时的name、age、tel都不是响应式的数据let name = '张三'let age = 18let tel = '13888888888'let address = '北京昌平区宏福苑·宏福科技园'// 方法function changeName() {name = 'zhang-san' //注意:这样修改name,页面是没有变化的console.log(name) //name确实改了,但name不是响应式的}function changeAge() {age += 1 //注意:这样修改age,页面是没有变化的console.log(age) //age确实改了,但age不是响应式的}function showTel() {alert(tel)}
</script>

2、组件名简化
以往在Vue2中,组件名是写在vc实例的name配置项的
这里,用vite-plugin-vue-setup-extend插件,在Vue3中直接去掉vc实例的配置编写工作

安装插件:

npm i vite-plugin-vue-setup-extend

使用插件:
vite.config.ts配置文件中
关键配置:
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
VueSetupExtend()

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),VueSetupExtend()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

组件名的新写法∶
直接在配置了setupscript标签中,配置name="Person"

经过以上配置,我们,就可以在配置了setup的script标签中,愉快的写Vue3的代码了!

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

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

相关文章

declare 模块声明

示例代码&#xff1a; declare module *.css; declare module *.less; declare module *.png;这些代码行是 TypeScript 的模块声明&#xff0c;用于告诉 TypeScript 编译器如何处理某些类型的模块导入。TypeScript 是一种基于 JavaScript 的静态类型检查语言&#xff0c;它允许…

STM32(19)I2C模块 主机发数据

发送数据&#xff1a; 等待空闲&#xff1a; 发送起始位&#xff1a; 发送地址&#xff1a; 发送数据&#xff1a;

鸿蒙中Text组件的展开和收起效果

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 效果&#xff1a; 原理分析&#xff1a; 通过效果图我们知道&#xff0c;可以将‘...展开’ 盖在文本内容的的右下角来实现这个效果。那么要实现盖上的效果可以通过层叠布局&#xff08;Stack&#xff09;来实现&am…

基于ceph-deploy部署Ceph 集群

Ceph分布式存储一、存储基础1、单机存储设备1.1 单机存储的问题 2、分布式存储(软件定义的存储SDS)2.1 分布式存储的类型 二、Ceph简介1、Ceph优势2、Ceph架构3、Ceph 核心组件4、OSD 存储后端5、Ceph 数据的存储过程6、Ceph 版本发行生命周期 三、Ceph 集群部署1、 基于 ceph-…

【Vue3】Ref 和 ShallowRef 的区别

目录 什么是 Ref什么是 ShallowRef区别对比示例代码 什么是 Ref Ref 是 Vue 3 中的一个新的基本响应式数据类型&#xff0c;它允许我们包装任意的 JavaScript 值&#xff0c;并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值&#xff0c;同时还提供了一…

【前端捉鬼记】记录两个js中非常基础的小白问题

写逻辑时&#xff0c;遇到两个js代码里非常基础的小白问题&#xff0c;用简单的代码测试并记录一下&#xff1a; 1、一个对象 a 有个数组类型的属性 b&#xff0c;将这个数组取出保存到另一个变量 m&#xff0c;修改 m&#xff0c;对象 a 中的属性 b 是否跟随变化&#xff1f;…

【Java EE初阶二十七】深入了解cookie

1. 简单了解cookie Cookie是http请求里header 中的一个属性&#xff0c;浏览器持久化存储数据的一种机制&#xff0c;网页无法访问主机的文件系统&#xff0c;要想存储数据就得通过其他的方式&#xff1b; 且cookie中保存的数据也是键值对的形式&#xff0c;最终还是要把这个键…

移动开发:网格视图

一、在新建GridView模块下添加图片以及创建cell.xml文件 1.粘贴图片时选择红框中的路径&#xff0c;点击“OK” 2.在路径后添加-mdpi后缀,再点击“OK” 二、相关代码块 1.MainActivity.java文件代码 package com.example.gridview;import androidx.appcompat.app.AppCompatAc…

供应链优化:降本增效的核心战略——张驰咨询

在当今这个高度竞争的商业环境中&#xff0c;企业为了保持竞争力&#xff0c;不断寻求降低成本和提升效率的策略变得至关重要。有效的成本控制和效率提升不仅能够增加企业的利润率&#xff0c;还能增强其市场地位和客户满意度。以下是一些实用的策略&#xff0c;旨在帮助企业实…

HCIE之MPLS练习(六)

MPLS练习 一、静态LSP1、IGP构建FEC2、全网运行MPLS3、打通LSP通道3.1、静态LSP配置3.2、转发过程3.3、验证标签转发过程 4、利用LSP传递任意流量4.1、配置4.2、验证 二、LDP协议1、IGP构建FEC2、全网运行mpls、ldp3、mpls ldp邻居关系、LIB表4、转发过程5、验证mpls转发过程6、…

从嵌入式Linux到嵌入式Android

最近开始投入Android的怀抱。说来惭愧&#xff0c;08年就听说这东西&#xff0c;当时也有同事投入去看&#xff0c;因为恶心Java&#xff0c;始终对这玩意无感&#xff0c;没想到现在不会这个嵌入式都快要没法搞了。为了不中年失业&#xff0c;所以只能回过头又来学。 首先还是…

leetcode——异或运算—— 只出现一次的数字

给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 示例 1 &#xff1a; 输入&#xff…

Python(NetOps)前传-网络设备开局配置

背景 我们知道用Python在cli配置网络设备的前提是&#xff1a; 网络设备与Python主机网络可达网络设备已开启并完成ssh相关配置 目标 本文已华为S5720S-52P-LI-AC交换机为例&#xff0c;完成&#xff1a; 完成网络设备开局配置&#xff1b;用Python脚本验证ssh登录 配置 …

深入理解nginx负载均衡round-robin算法

目录 1. 概述2. 如何启用round-robin算法3. 初始化round-robin算法3.1 设置算法上下文环境初始化回调函数3.2 加载服务器列表4. 初始化负载均衡请求上下文5. 获取peer6. 释放peer1. 概述 nginx为我们提供了强大的HTTP代理功能,而负载均衡算法是实现后端多Real Server代理的一个…

系统认识数据分析

数据分析的全貌 包括应用、观测和实验 观测 分为两部分观察和测量 观察 采集数据&#xff1a; 解析系统日志 : 产生日志、解析日志、得到数据 埋点获取新数据 &#xff1a;日志记录新信息、解析日志、得到新数据 通过传感器收集&#xff1a;例如天气数据收集 爬虫&…

uniapp——信号值组件(vue3)

组件代码 <template><view><view class"signals"><view v-for"(item, index) in signals" :key"index" class"signal" :style"item"></view></view></view> </template>&…

ros2+nav2中常用的概念

一.sdf文件 Simulation Description File&#xff0c;描述Gazebo中机器人模型的文件&#xff0c;一般在models文件夹下。该文件描述了组成机器人的物理属性、关节、碰撞对象、视觉效果和插件的集合。 Links: 链接包含模型的一个实体的物理属性。 这可以是一个轮子&#xff0c…

Android工程师必备知识,2024Android面试

前言 职场的金九银十跳槽季火热进行中&#xff0c;不同的是&#xff0c;今年的竞争比往年会更加激烈一些&#xff0c;形式更加严峻一些。 对于求职者来说&#xff0c;面试是一道坎&#xff0c;很多人会恐惧面试&#xff0c;即使是工作很多年的老鸟&#xff0c;也可能存在面试…

STM32控制气泵和电磁阀实现

一、功能简介 使用STM32控制气泵和电磁阀的开和关&#xff0c;气泵和电磁阀的供电电压为12V。 二、实现过程 1、气泵和电磁阀的开和关均为开关量&#xff0c;实现控制方法有多种&#xff0c;比如继电器&#xff0c;但是继电器动作有噪声且体积较大&#xff0c;更好的方法为使…

Sqli-labs靶场第19关详解[Sqli-labs-less-19]自动化注入-SQLmap工具注入

Sqli-labs-Less-19 通过测试发现&#xff0c;在登录界面没有注入点&#xff0c;通过已知账号密码admin&#xff0c;admin进行登录发现&#xff1a; 返回了Referer &#xff0c;设想如果在Referer 尝试加上注入语句&#xff08;报错注入&#xff09;&#xff0c;测试是否会执行…