Vue3中使用tsx文件

1. 安装

npm install @vitejs/plugin-vue-jsx -D

2. 配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from "@vitejs/plugin-vue-jsx"// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueJsx()],resolve: {alias: {// 设置别名'@': path.resolve(__dirname, './src'),},},
})

3. 修改tsconfig.json

    "jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",

4. 使用tsx

  • 直接返回标签
export default function(){return (<div>熏悟空</div>)
}
  • 返回一个渲染函数
import {defineComponent} from "vue"export default defineComponent({data(){return {age:23}},render(){return (<div>{this.age}</div>)}
})
  • 使用setup方式
import {defineComponent} from "vue"export default defineComponent({setup(){return () => {return (<div>熏悟空</div>)}}
})
<template><div><xwk></xwk></div>
</template><script setup lang=ts>
import xwk from "@/App"
</script>

tsx 中取值使用{},可以使用v-show,不能使v-if, 使用ref不会解包需要.vaule

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

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

相关文章

11:Servlet中初始化参数的获取与应用-Java Web

目录 11.1 Servlet初始化参数简介11.2 如何在Servlet中获取初始化参数11.3 基于注解的初始化参数&#xff08;Servlet 3.0&#xff09;11.4 区别总结11.5 应用场景总结 在构建Java Web应用程序时&#xff0c;Servlet是核心组件之一&#xff0c;它负责处理HTTP请求并生成响应。而…

五大架构风格之四-虚拟机架构风格

虚拟机架构风格&#xff1a; 虚拟机架构风格是一种软件架构&#xff0c;它通过模拟完整的计算机系统&#xff08;包括硬件&#xff09;来运行程序。这种风格的核心是虚拟机监控器。如最出名的虚拟机VM&#xff0c;在使用虚拟机架构&#xff0c;一个或多个虚拟机可以在单一物理主…

标题:揭秘Java中Thread.sleep(0)的微妙用法与实战解析

引言 在深入研究Java多线程编程时&#xff0c;我们经常会遇到一个看似不起眼但颇具实用价值的方法——Thread.sleep(0)。乍一看&#xff0c;让一个线程“休眠”零毫秒似乎是一个没有意义的操作&#xff0c;但实际上&#xff0c;它在并发编程场景中扮演着重要的角色。本文将详细…

java反射详解

动态代理 什么是动态代理&#xff1f; 特点&#xff1a;无侵入式的给代码增加额外的功能 对象有什么方法想要被代理&#xff0c;代理就一定要有对应的方法 对象和代理需要实现同一个接口&#xff0c;接口中就是被代理的方法 调用者通过代理&#xff0c;调用代理中的方法&#x…

高级FPGA开发之基础协议PCIe

基础协议之PCIe部分 一、TLP包的包头 在PCIe的系统中&#xff0c;tlp包的包头的结构有许多部分是相似的&#xff0c;通过掌握这些常规的包头&#xff0c;能帮助理解在PCIe总线上各个设备之间如何进行数据的收发。 通用的字段 通用字段作用Fmt决定了包头是3DW还是3DW&#xff…

二级C语言笔试2

(总分100,考试时间90分钟) 一、选择题 下列各题A)、B)、C)、D)四个选项中&#xff0c;只有一个选项是正确的。 1. 下列叙述中正确的是( )。 A) 算法的效率只与问题的规模有关&#xff0c;而与数据的存储结构无关 B) 算法的时间复杂度是指执行算法所需要的计算工作量 …

2V2无人机红蓝对抗仿真

两架红方和蓝方无人机分别从不同位置起飞&#xff0c;蓝方无人机跟踪及击毁红方无人机 2020a可正常运行 2V2无人机红蓝对抗仿真资源-CSDN文库

Android电动汽车充电服务vue+uniAPP微信小程序

本系统利用SSM和Uniapp技术进行开发电动汽车充电服务系统是未来的趋势。该系统使用的编程语言是Java&#xff0c;数据库采用的是MySQL数据库&#xff0c;基本完成了系统设定的目标&#xff0c;建立起了一个较为完整的系统。建立的电动汽车充电服务系统用户使用浏览器就可以对其…

Python爬虫urllib详解

前言 学习爬虫&#xff0c;最初的操作便是模拟浏览器向服务器发出请求&#xff0c;那么我们需要从哪个地方做起呢&#xff1f;请求需要我们自己来构造吗&#xff1f;需要关心请求这个数据结构的实现吗&#xff1f;需要了解 HTTP、TCP、IP 层的网络传输通信吗&#xff1f;需要知…

mongodb数据库集合(表)的创建和数据修改

文章目录 前言发现宝藏一、集合的创建二、集合的修改三、数据插入数据库四、清空数据库集合数据 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的学习那也是极好的。作…

华清远见嵌入式学习——春节作业——2.4日

作业要求&#xff1a; 编写程序实现二叉树的创建&#xff0c;三种遍历自己销毁 作业答案&#xff1a; 作业代码截图 作业代码效果图 作业代码 #include "myhead.h"// 定义二叉树节点结构体 struct Tree {int value; //编号(值)struct Tree* left; //左子树stru…

C语言代码审查:解析与应对策略

在C语言编程的世界中&#xff0c;代码审查是一项至关重要的任务&#xff0c;它旨在发现并修复潜在的错误、改进代码质量&#xff0c;并强化开发者的编码规范。本文将详尽阐述C语言代码审查过程中常见的错误类型及其深层原因&#xff0c;同时提供针对性的解决策略和最佳实践。 …

idea创建spring项目

一、环境 window10 IDEA 2022.2.3 maven-3.8.6 二、创建spring项目 1、新建Maven项目 File -> New -> Project 然后如下图选中Maven Archetype&#xff0c;在Archetype&#xff0c;选中maven-archetype-webapp&#xff0c;点击Create 2、配置maven 默认是使用IDEA内…

管理类联考-复试-英语-听力

文章目录 准备工作1.如何准备英语听力&#xff1f;2.听力学习注意事项一&#xff1a;培养良好的听音习惯&#xff0c;听读顺序要合理3.听力学习注意事项二&#xff1a;边听边记关键词 训练短期记忆能力4.听力学习注意事项三&#xff1a;熟记语篇衔接词把握信息走向5.听力学习注…

少儿编程 中国电子学会图形化编程2022年1月等级考试Scratch三级真题解析(选择题、判断题)

1.默认小猫角色和气球角色都是显示状态&#xff0c;小猫程序如下图所示&#xff0c;气球没有程序&#xff0c;点击绿旗&#xff0c;舞台上最终显示的效果是&#xff1f;&#xff08; &#xff09; A&#xff1a;可能出现6个不同位置的小猫和6个小球 B&#xff1a;可能出现6个…

Multisim14.0仿真(四十九)共阴极/阳极7段数码管驱动设计

一、74LS47/48简介: 74LS47/48芯片是一种常用的七段数码管译码器驱动器,常用在各种数字电路和单片机系统的显示系统中. 二、74LS47/48引脚说明及定义: 7段显示译码器74LS47/48是输出低/高电平有效的译码器,74LS47/48除了有实现7段显示译码器基本功能的输入(DCBA)和输出(Ya…

Unity类银河恶魔城学习记录1-9 PlayerWallSilde源代码 P36

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; us…

eCos flash模拟EEPROM实现NV系统

Flash需要擦除的原因&#xff1a;先擦除后写入的原因是为了工业上制作方便&#xff0c;即物理实现方便。 #include <cyg/infra/diag.h> #include <cyg/io/flash.h> #include <stdarg.h> #include <stdio.h> #include <stdlib.h> // SPI flash…

gerrit 安装插件

1.插件下载 gerrit 3.9 插件&#xff0c;打开链接去右上角搜索插件名称&#xff0c;找到合适的版本&#xff0c;由于我这儿需要安装gerrit 3.9.1 的 autosubmitter 插件&#xff0c;但是好像没有 3.9 的&#xff0c;有下面这俩 上面那个可以理解为基于插件的主分支代码进行构…

java.lang.NoClassDefFoundError: org/springframework/aot/AotDetector 240204

springboot3.2.2改为2.7.18后 控制台异常显示: java.lang.NoClassDefFoundError: org/springframework/aot/AotDetector at org.mybatis.spring.mapper.ClassPathMapperScanner.(ClassPathMapperScanner.java:91) ~[mybatis-spring-3.0.3.jar:3.0.3] at org.mybatis.spring.m…