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

devtools/2024/11/29 2:27:33/

在这里插入图片描述

在 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){//...}

http://www.ppmy.cn/devtools/137810.html

相关文章

Linux 共享环境搭建

NFS网络文件系统 说明&#xff1a;这个主要是应用于Linux系统与Linux系统之间的通信。 服务端 步骤&#xff1a; 在被共享的系统中安装nfs服务 sudo apt-get install nfs-kernel-server注意&#xff1a;如果系统提示无法定位软件包&#xff0c;就需要更新软件源 sudo apt-g…

【STM32】MPU6050简介

文章目录 MPU6050简介MPU6050关键块带有16位ADC和信号调理的三轴MEMS陀螺仪具有16位ADC和信号调理的三轴MEMS加速度计I2C串行通信接口 MPU6050对应的数据手册&#xff1a;MPU6050 陀螺仪加速度计 链接: https://pan.baidu.com/s/13nwEhGvsfxx0euR2hMHsyw?pwdv2i6 提取码: v2i6…

Python 网络爬虫进阶:动态网页爬取与反爬机制应对

在上一篇文章中&#xff0c;我们学习了如何使用 Python 构建一个基本的网络爬虫。然而&#xff0c;在实际应用中&#xff0c;许多网站使用动态内容加载或实现反爬机制来阻止未经授权的抓取。因此&#xff0c;本篇文章将深入探讨以下进阶主题&#xff1a; 如何处理动态加载的网…

IC数字后端实现之大厂IC笔试真题(经典时序计算和时序分析题)

今天小编给大家分享下每年IC秋招春招必考题目——静态时序分析时序分析题。 数字IC后端笔试面试题库 | 经典时序Timing计算题 时序分析题1&#xff1a; 给定如下图所示的timing report&#xff0c;请回答一下几个问题。 1&#xff09;这是一条setup还是hold的timing report?…

python-解决一元一次方程

【题目】解决一元一次方程数学问题 【问题描述】 我们要解决一个较为复杂的一元一次方程数学问题&#xff0c;方程形如&#xff1a;ax b c&#xff0c;其中a、b、c为已知常数&#xff0c;x为未知数。 现在我们要通过编程的方式解决这个问题&#xff0c;即找到方程的解x。 【…

ubuntu 安装 docker 记录

本文假设系统为 Ubuntu&#xff0c;从 16.04 到 24.04&#xff0c;且通过 APT 命令安装。理论上也其他 Debian 系的操作系统。 WSL 也一样。 感觉 Docker 官方在强推 Docker Desktop&#xff0c;搜索 Docker 安装文档&#xff0c;一不小心就被导航到了 Docker Desktop 的安装页…

什么是 C++ 中的函数对象?它有什么特点?函数对象与普通函数有什么区别? 如何定义和使用函数对象?

1&#xff09;什么是 C 中的函数对象&#xff1f;它有什么特点&#xff1f; 在 C中&#xff0c;函数对象&#xff08;也称为函数符或仿函数&#xff09;是一个可以像函数一样被调用的对象。 函数对象是指该对象具备函数的行为函数对象,是通过()调用操作符声明得到的,然后便能通…

手机实时提取SIM卡打电话的信令声音-智能拨号器的双SIM卡切换方案

手机实时提取SIM卡打电话的信令声音 --智能拨号器app的双SIM卡切换方案 一、前言 在蓝牙电话的方案中&#xff0c;由于采用市场上的存量手机来做为通讯呼叫的载体&#xff0c;而现在市面上大部分的手机都是“双卡双待单通”手机&#xff0c;简称双卡双待手机。即在手机开机后…