vue3使用jsx渲染以及注意点

安装对应的babel

npm install @vue-plugin-jsx -D

babel配置: 在文件.babelrc 或者 babel.config.js中添加

{"plugins": ["@vue/babel-plugin-jsx"]
}

写法:

// 在App.tsx文件中编写	import { definedComponent, reactive } from "vue";export default definedComponent({setup(){const state = reactive({name: 'jeddy',age: 18,img: '...'});return () => {const { name, img } = state;return (<div id="app"><img src={state.img}/><span>{state.name}</span><input type="text" v-model={state.name}/>{亦可以写成一个函数}</div>)}}
})

注意:

// 如果传入的组件中的props是必传的required: true;
// 如果不传,编辑器是不会提示错误,这是因为definedComponent在.d.ts中定义的时候已经固定类型了;
// 解决:需要把对应的.vue文件改成.tsx文件即可

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

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

相关文章

设计模式 门面模式

01.先看写信的过程接口&#xff0c;定义了写信的四个步骤&#xff1a; public interface LetterProcess {//首先要写信的内容public void writeContext(String context); //其次写信封public void fillEnvelope(String address); //把信放到信封里public void letterInotoEnve…

java算法第23天 | ● 669. 修剪二叉搜索树 ● 108.将有序数组转换为二叉搜索树 ● 538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 思路&#xff1a; 这道题和删除节点异曲同工。不过要注意避坑&#xff1a;当遍历到不在范围内的节点时&#xff0c;不要直接返回null或直接返回其左或右孩子&#xff0c;而是继续对其左或右孩子做递归。 /*** Definition for a binary tree node.* public…

搭建EMQX MQTT服务器(超详细)

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;服务器是一种实现 MQTT 协议的服务器软件。MQTT 是一种轻量级的、发布/订阅模式的消息传输协议&#xff0c;通常用于物联网&#xff08;IoT&#xff09;应用中的设备通信。MQTT 服务器负责接收来自客户端的消息…

虚拟化技术在企业中的价值

在当前快速演变的商业环境中&#xff0c;企业面临的市场竞争压力正不断加剧。为了在这场竞争中保持自身的优势&#xff0c;公司急需寻找那些能够提升效率、削减成本以及加快创新步伐的解决方案。在这样的背景下&#xff0c;虚拟化技术作为一种强有力的工具&#xff0c;正助力众…

【SpringCloud】使用Seata实现分布式事务

目录 一、Seata 框架的需求背景二、Seata 事务模式与架构2.1 Seata 组成2.2 Seata 事务模式 三、Seata 实战演示3.1 部署 Seata Server3.1.1 下载 Seata Server3.1.2 更改 Seata Server 配置3.1.3 创建 Seata Server 所需的数据库、数据库表3.1.4 启动 Seata Server 3.2 Seata …

php作为服务器端语言,处理网页没有问题,但是gui就差了点。先看一下主流的gui框架有哪些

其他php桌面应用程序 1 PHP 程序打包为桌面应用-PHPDesktop 的 Linux 版本介绍 2 nativephp 3 借助 js 还可以用electron 还是tauri 除了wxWidgets和Qt&#xff0c;还有许多其他的GUI框架可供选择&#xff0c;每个框架都有其独特的优势和缺点。以下是一些常见的GUI框架及其特…

C++ 变量类型

C 变量类型 变量其实只不过是程序可操作的存储区的名称。C 中每个变量都有指定的类型&#xff0c;类型决定了变量存储的大小和布局&#xff0c;该范围内的值都可以存储在内存中&#xff0c;运算符可应用于变量上。 变量的名称可以由字母、数字和下划线字符组成。它必须以字母…

Fabric.js在vue2中使用

Fabric.js安装 这里我是基于vue来使用的&#xff0c;先安装上Fabric.js npm install fabric 在main.js中 import fabric from fabric Vue.use(fabric);Fabric 提供了 7 种基础形状&#xff1a; fabric.Circle (圆)fabric.Ellipse (椭圆)fabric.Line (线)fabric.Polyline (多条…

伊理威科技:抖音店铺运营好做吗

在数字营销的浪潮中&#xff0c;抖音以其强大的用户基础和独特的算法推荐机制成为了众多商家眼中的“香饽饽”。然而&#xff0c;对于许多初涉此领域的商家来说&#xff0c;心中不免有这样的疑问&#xff1a;“抖音店铺运营好做吗?” 运营一个抖音店铺并非易事。它既需要创意的…

【C语言】守护进程(daemon)的输出到一个文本文件

一、常用的守护进程函数 void daemonize () {//deamonizepid_t pid fork();if( pid > 0 ){ //parent exitexit(0);}//child continuesetsid();chdir("/");close(0);open("/dev/null", O_RDWR);//no env debugif(!getenv("debug")){cl…

Spring 拦截器实现请求拦截与参数处理【拦截器(Interceptor)和过滤器(Filter)的区别】

业务场景&#xff1a; 项目中需要使用请求头传输一个密文字符串&#xff0c;后端服务获取密文字符串后&#xff0c;进行解密验证&#xff0c;然后执行响应的业务&#xff0c;这里有好几个接口都用需要使用这个密文字符串&#xff0c;如果我们在每个接口中进行校验处理&#xff…

AI预测福彩3D第13弹【2024年3月20日预测--第3套算法重新开始计算第3次测试】

今天咱们继续对第3套算法进行第3次测试&#xff0c;第3套算法加入了012路的权重。废话不多说了&#xff0c;直接上结果吧~ 最终&#xff0c;经过研判分析&#xff0c;2024年3月20日福彩3D的七码预测结果如下&#xff1a; 百位&#xff1a;7 4 8 3 6 9 0&#xff08;5换0&#x…

锂电池寿命预测 | Matlab基于ALO-SVR蚁狮优化支持向量回归的锂离子电池剩余寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 锂电池寿命预测 | Matlab基于ALO-SVR蚁狮优化支持向量回归的锂离子电池剩余寿命预测 基于蚁狮优化和支持向量回归的锂离子电池剩余寿命预测: 1、提取NASA数据集的电池容量&#xff0c;以历史容量作为输入&#xff0c;…

Java项目:66 ssm实验室耗材管理系统设计与实现+jsp

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 管理员管理实验材料&#xff0c;审核教师与学生对实验材料的申请信息&#xff0c;统计每学年实验材料的使用总数信息。 教师申请使用实验材料…

【探索Linux】—— 强大的命令行工具 P.28(网络编程套接字 —— 简单的UDP网络程序模拟实现)

阅读导航 引言一、UDP协议二、UDP网络程序模拟实现1. 预备代码⭕makefile文件⭕打印日志文件⭕打开指定的终端设备文件&#xff0c;并将其作为标准错误输出的目标文件描述符 2. UDP 服务器端实现&#xff08;UdpServer.hpp&#xff09;3. UDP 客户端实现&#xff08;main函数&a…

day04vue学习

day04 一、学习目标 1.组件的三大组成部分&#xff08;结构/样式/逻辑&#xff09; ​ scoped解决样式冲突/data是一个函数 2.组件通信 组件通信语法父传子子传父非父子通信&#xff08;扩展&#xff09; 3.综合案例&#xff1a;小黑记事本&#xff08;组件版&#xff09…

全量知识系统的核心-全量知识的一个“恰当组织”的构想及百度AI答问

全量知识系统的核心-全量知识的一个恰当组织 Q1. 以下是对 我刚刚完成的文档“全量知识系统的核心&#xff1a;全量知识的一个恰当组织构想”的百度AI答复。由于字数400的限制&#xff0c;内容被分成四段. 第一次回答&#xff1a;学科和科学的框架 关于技术学科、一般学科和…

DeprecationWarning: isDaemon() is deprecated, get the daemon attribute instead

报错处理 # t.setDaemon(True) # 阙辉注释 t.daemonTrue # 阙辉新增

已有TensorFlow安装包新建相应python版本的虚拟环境

已有TensorFlow安装包新建虚拟环境 新建conda虚拟环境 新建的虚拟环境默认在Anaconda安装目录D:\Anaconda3\envs&#xff08;根据自己的安装目录看&#xff09; 切换到新建的虚拟环境 在这里可以直接安装下载好的TensorFlow安装包 检查是否安装好 输入python进入python环境…

YOLOv7 | 添加GSConv,VoVGSCSP等多种卷积,有效提升目标检测效果,代码改进(超详细)

⭐欢迎大家订阅我的专栏一起学习⭐ &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; YOLOv5涨点专栏&#xff1a;http://t.csdnimg.cn/QdCj6 YOLOv7专栏&#xff1a; http://t.csdnimg.cn/dy…