JSX
是JavaScript
的一个类似XML
的扩展,那么JSX
如何在vue3
中使用呢?下面编程教程网小编给大家详细介绍一下!
vue3+vite
的项目不支持/code>jsx,如果想支持jsx,需要安装插件。
1、安装jsx脚手架
npm i @vitejs/plugin-vue-jsx -D
2、在vite.config.js中进行配置:
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [
vue(),
vueJsx()
],
});
3、在vue中使用:
import { ref } from "vue";
export default {
setup() {
const count = ref(100);
return () => <div>count is: {count.value}</div>;
},
};
Ps:script中lang要改成jsx。
以上是编程学习网小编为您介绍的“关于vue3中JSX的使用方法介绍”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:关于vue3中JSX的使用方法介绍
基础教程推荐
猜你喜欢
- vuejs获取div等元素的宽度和高度 2024-12-09
- https://www.cnblogs.com/zhaoshujie/p/9594734.html 2023-10-29
- layui数据表格使用(一:基础篇,数据展示、分页组件、表格内嵌表单和图片) 2022-12-13
- 微信小程序的WXSS和全局、页面配置详细讲解 2022-08-31
- CSS仿网易首页的头部菜单栏按钮和三角形制作方法 2024-01-22
- web3.0的主要有哪些特点 2024-12-14
- Vue中v-for key的使用注意事项 2023-10-08
- css兼容不同分辨率自适应@media的运用技巧 2024-12-13
- CSS3实现各种图形的示例代码 2024-04-09
- 通过CSS显示垂直文本以垂直方式显示文本元素 2024-03-09