详解在vue3中使用jsx的配置以及一些小问题
更新时间：2022年03月11日 09:09:44 作者：shellingfordly
本文主要介绍了在vue3中使用jsx的配置以及一些小问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
配置
在vue3中使用jsx十分方便，只需要安装官方的@vitejs/plugin-vue-jsx插件，在vite.config.ts中配置
// vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";
export default {
plugins: [vueJsx()]
}配置了vite.config.ts后虽然已经可以使用jsx，页面也正常渲染了，但是还是会提示无法使用jsx，此时还需要在tsconfig.ts中配置"jsx": "preserve"属性，就可以愉快的使用jsx形式来写vue了。
// tsconfig.ts
{
"jsx": "preserve",
}模版语法
使用jsx时setup需要返回一个函数，函数返回jsx形式。不过使用jsx形式也有不好的地方，在使用数据就比较烦，不能像模版中一样直接使用，需要加上.value，虽然新的volar插件已经会自动添加.value了，但还是很难受，一不小心就会忘记写。
<script lang="tsx">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const msg = ref("tsx component");
return () => {
return <div>{msg.value}</div>;
};
},
});
</script>v-if/v-show
还有不太方便的一个点就是v-if无法使用，jsx中得使用三元表达式，但是三元感觉看起来不是很舒服
export default defineComponent({
setup() {
const msg = ref("tsx component");
const isShow = ref(false);
function onClick() {
isShow.value = !isShow.value;
}
return () => {
return (
<div>
<div>{msg.value}</div>
{isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
<el-button onClick={onClick}>onClick</el-button>
</div>
);
};
},
});如果直接使用v-if就会报错无法读取未定义的属性
但是v-show是可以使用的，但v-if不行，不知道为什么，可能是直接jsx默认推荐使用isShow && <div/>或者三元的形式吧
<div>
<div>{msg.value}</div>
{isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
<div v-show={isShow.value}>{isShow.value ? "show" : "hide"}</div>
<el-button onClick={onClick}>onClick</el-button>
</div>v-show正确显示出了show div，dom中也是通过display做的显影，三元则是创建和销毁的dom
v-for就更不用想了，就用map吧，map也挺好用的，不过v-model还是可以使用的，显示也正常
export default defineComponent({
setup() {
const msg = ref("tsx component");
return () => {
return (
<div>
<div>{msg.value}</div>
<el-input v-model={msg.value} />
</div>
);
};
},
});到此这篇关于在vue3中使用jsx的配置以及一些小问题的文章就介绍到这了,更多相关在vue3中使用jsx的配置以及一些小问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了el-select 下拉框全选、多选的几种方式组件示例详解,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
vue内置组件component--通过is属性动态渲染组件操作
这篇文章主要介绍了vue内置组件component--通过is属性动态渲染组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue.js结合bootstrap前端实现分页和排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue.js 实现v-model与{{}}指令方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
装饰器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式,下面这篇文章主要给大家介绍了关于Vue中使用装饰器的相关资料,需要的朋友可以参考下2022-01-01
最近在学习vue,学习中遇到了一些感觉挺重要的知识点,感觉有必要整理下来,这篇文章主要给大家介绍了关于Vue.js中计算属性、监视属性的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue3 PC端页面开发规范及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了vue3切换路由时页面空白问题解决办法,文中介绍的步骤可以有效解决页面空白问题,需要的朋友可以参考下2024-09-09
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下2024-03-03
为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快,下面这篇文章主要给大家介绍了关于虚拟DOM与diff算法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
最新评论