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

解锁 Vue 项目中 TSX 配置与应用简单攻略

在这里插入图片描述

在 Vue 项目中配置 TSX 写法

在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验,特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤:

一、安装相关依赖

首先,我们需要在命令行中输入以下命令来安装 @vitejs/plugin-vue-jsx 插件:

pnpm i @vitejs/plugin-vue-jsx -D

这里使用 pnpm 进行安装,如果使用的是 npm 或者 yarn,将命令中的 pnpm 替换为相应的包管理器命令即可。这个插件是用于在 Vite 项目中支持 Vue 的 JSX 语法。

二、Vite 配置

vite.config.js 文件中进行如下配置:

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({plugins: [vue(), vueJsx()]
})

三、Vite 配置

在 tsconfig.json 文件中,需要添加以下配置:

  "compilerOptions": {"jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",}

四、示例

//注意文件格式应该是tsx或jsx,这里由于csdn无法识别,所以代码格式写成js
import { defineComponent,ref } from 'vue'const MyComponent = defineComponent({setup() {const a=ref('helloworld!') return () => (<div><h1>{a.value}</h1></div>)}
})export default MyComponent

简单介绍Tsx

流程

vue编译时将tsx文件解析为typescript文件,然后编译为js文件,最后运行时解析js文件,将js文件解析为render function,通过h函数构建虚拟DOM

语法

1. v-model

// 注意tsx不会自动从ref中解析value
const message = ref<string>('Hello, World!');
<input type="text" v-model={message.value}/>//也可以
<input type="text" value={inputText.value}/>

2. v-show

<div v-show={message.value} >this is {message.value}</div>

3. v-if和v-else

使用三目运算符实现

<div>{message.value?'你输入了:'+message.value:'没有哦'}
</div>

4. 数组遍历v-for

使用map实现

<div>{arr.value.map((item,index)=>{return <div key={index}>{item}</div>})}
</div>

5. 绑定事件

如果不需要传参数,直接绑定

const count=ref<number>(0)
const handleClick=()=>{count.value++
}<div><button onClick={handleClick}>{count.value}</button>
</div>

如果需要传参

<button onClick={() => handleClick(count.value)}>{count.value}</button>

如果需要添加事件修饰符,使用驼峰写法将他们拼接在事件名后面

6. tsx中引入scss样式

  • 新建样式文件 xx.module.scss,其中写样式
    module意味着这个文件被当作模块来处理,生成的css类名会被局部化,自动加上唯一哈希值,防止类名冲突
  • 文件中引入样式文件
import styles from '../styles/parent.module.scss'//对应的元素上添加类名
<div class={styles.red}>红色</div>
  • 也可以直接简单的引入
import '../styles/parent.scss'
<div class="blue">蓝色</div>

7. 父子组件传参

// 父组件传参
<InputSelect options={options.value} v-model={formData.value.data}></InputSelect>//子组件接收参数
props:{modelValue:{type:Object,default:()=>({})},options:{type:Array}},setup(props){//...}

相关文章:

解锁 Vue 项目中 TSX 配置与应用简单攻略

在 Vue 项目中配置 TSX 写法 在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验&#xff0c;特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤&#xff1a; 一、安装相关依赖 首先&#xff0c;我们需要在命令行中输入以下命令来安装 vitejs/plugin-v…...

ShuffleNet:一种为移动设备设计的极致高效的卷积神经网络

摘要 https://arxiv.org/pdf/1707.01083 我们介绍了一种名为ShuffleNet的计算效率极高的卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;该架构专为计算能力非常有限的移动设备&#xff08;例如10-150 MFLOPs&#xff09;而设计。新架构利用两种新操作&#xff1a;逐…...

yum源问题的解决方案

linux课堂作业 问题描述 yum 直接安装tree的问题截图 这个错误表明你的系统没有正确注册到 Red Hat Subscription Management&#xff08;这个问题不用管&#xff09;&#xff0c;也没有配置有效的 YUM 软件仓库&#xff0c;因此无法安装或更新软件包。 解决方案&#xff08…...

在Linux中备份msyql数据库和表的详细操作

目录 前情提要 一、备份mysql数据库 原库展示 (一)新建一个数据库 (二)在linux根目录下找个位置暂时存放 (三)临时sql还原真正存放到库中 (四)查看是否备份成功 备份库成功展示 二、备份表的操作 ​编辑 原表emp展示 (一)快速新建一个原结构相同的表 (二)原表所…...

实时数仓Kappa架构:从入门到实战

引言 随着大数据技术的不断发展&#xff0c;企业对实时数据处理和分析的需求日益增长。实时数仓&#xff08;Real-Time Data Warehouse, RTDW&#xff09;应运而生&#xff0c;其中Kappa架构作为一种简化的数据处理架构&#xff0c;通过统一的流处理框架&#xff0c;解决了传统…...

【老白学 Java】Warship v2.0(四)

Warship v2.0&#xff08;四&#xff09; 文章来源&#xff1a;《Head First Java》修炼感悟。 上一篇文章中&#xff0c;老白仔细分析了 v2.0 的设计思路以及实现手段&#xff0c;如果大家有好的设计方案也可以自行尝试。 本篇文章的主要内容是对 Warship 类进行最后的修改&a…...

LLM之学习笔记(一)

前言 记录一下自己的学习历程&#xff0c;也怕自己忘掉了某些知识点 Prefix LM 和 Causal LM区别是什么&#xff1f; Prefix LM &#xff08;前缀语⾔模型&#xff09;和 Causal LM&#xff08;因果语言模型&#xff09;是两者不同类型的语言模型&#xff0c;它们的区别在于生…...

C# 反射详解

反射是C#中的一个强大特性&#xff0c;允许程序在运行时检查和操作类型和对象的信息。 通过反射&#xff0c;你可以获取类型的属性、方法、构造函数等信息&#xff0c;并可以动态创建对象、调用方法或访问属性&#xff0c;甚至可以实现某些框架或库的核心功能。 反射的基本概念…...

pgadmin安装后运行不能启动界面的问题

在本人机器上安装了pgsql10后&#xff0c;自带的pgadmin安装后运行时能打开edge并显示数据库server和数据库的&#xff0c;后来又安装了pgsql17&#xff0c;结果安装后想打开pgadmin&#xff0c;结果一直在等待最后&#xff0c;爆出类似于下面的错误。 pgAdmin Runtime Enviro…...

跳表(Skip List)

跳表&#xff08;Skip List&#xff09; 跳表是一种用于快速查找、插入和删除的概率型数据结构&#xff0c;通常用于替代平衡二叉搜索树&#xff08;如 AVL 树或红黑树&#xff09;。跳表通过在有序链表的基础上增加多层索引&#xff0c;使得查找操作的平均时间复杂度降低&…...

前端实现把整个页面转成PDF保存到本地(DOM转PDF)

一、问题 遇到一个需求&#xff0c;就是要把整个看板页面导出成PDF用在汇报&#xff0c;也就是要把整个DOM生成一个PDF保存到本地。 二、解决方法 1、解决思路&#xff1a;使用插件 jspdf 和 html2canvas&#xff0c;我用的版本如下图 2、代码实现 import { jsPDF } from …...

Vue 3 学习文档(一)

最近打算做一个项目&#xff0c;涉及到一些前端的知识&#xff0c;因上一次接触前端已经是三四年前了&#xff0c;所以捡一些简单的功能做一下复习。 响应式函数&#xff1a;reactive 和 ref属性绑定&#xff1a;v-bind 和简写语法事件监听&#xff1a;v-on 和简写语法 双向绑…...

【适配】屏幕拖拽-滑动手感在不同分辨率下的机型适配

接到一个需求是类似下图的3D多房间视角&#xff0c;需要拖拽屏幕 问题 在做这种屏幕拖拽的时候发现&#xff0c;需要拖拽起来有跟手的感觉&#xff0c;会存在不同分辨率机型的适配问题。 即&#xff1a;美术调整好了机型1的手感&#xff0c;能做到手指按下顶层地板上下挪动&…...

牛客周赛 Round 69(A~E)

文章目录 A 构造C的歪思路code B 不要三句号的歪思路code C 仰望水面的歪思路code D 小心火烛的歪思路code E 喜欢切数组的红思路code 牛客周赛 Round 69 A 构造C的歪 思路 签到题&#xff0c;求出公差d&#xff0c;让最大的数加上公差d即可 code int a,b;cin >> a &…...

Spring Boot 实战:分别基于 MyBatis 与 JdbcTemplate 的数据库操作方法实现与差异分析

1. 数据库新建表 CREATE TABLE table_emp(id INT AUTO_INCREMENT,emp_name CHAR(100),age INT,emp_salary DOUBLE(10,5),PRIMARY KEY(id) );INSERT INTO table_emp(emp_name,age,emp_salary) VALUES("tom",18,200.33); INSERT INTO table_emp(emp_name,age,emp_sala…...

【jmeter】服务器使用jmeter压力测试(从安装到简单压测示例)

一、服务器上安装jmeter 1、官方下载地址&#xff0c;https://jmeter.apache.org/download_jmeter.cgi 2、服务器上用wget下载 # 更新系统 sudo yum update -y# 安装 wget 以便下载 JMeter sudo yum install wget -y# 下载 JMeter 压缩包&#xff08;使用 JMeter 官方网站的最…...

使用Python实现自动化邮件通知:当长时程序运行结束时

使用Python实现自动化邮件通知&#xff1a;当长时程序运行结束时 前提声明 本代码仅供学习和研究使用&#xff0c;不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…...

框架学习07 - SpringMVC 其他功能实现

一. 拦截器实现HandlerInterceptor 接⼝ SpringMVC 中的 Interceptor 拦截器也是相当重要和相当有⽤的&#xff0c;它的主要作⽤是拦截⽤户的请求并进⾏相应的处理。⽐如通过它来进⾏权限验证&#xff0c;或者是来判断⽤户是否登陆等操作。对于 SpringMVC 拦截器的定义⽅式有两…...

NAT:连接私有与公共网络的关键技术(4/10)

一、NAT 的工作原理 NAT 技术的核心功能是将私有 IP 地址转换为公有 IP 地址&#xff0c;使得内部网络中的设备能够与外部互联网通信。其工作原理主要包括私有 IP 地址到公有 IP 地址的转换、端口号映射以及会话表维护这几个步骤。 私有 IP 地址到公有 IP 地址的转换&#xff1…...

RabbitMQ2:介绍、安装、快速入门、数据隔离

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...