vue3.0 jsx,vue3.0使用vuex
本文主要介绍在vue3中使用jsx的配置以及一些小问题。用示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
目录
配置模板语法v-if/v-show
配置
在vue3中使用jsx非常方便。只需要安装官方的@vitejs/plugin-vue-jsx插件，在vite.config.ts中配置即可
//vite.config.ts
从“@vitejs/plugin-vue-jsx”导入vueJsx
导出默认值{
插件：[vueJsx()]
}
配置完vite.config.ts后，虽然可以使用jsx，页面也正常渲染，但还是会提示不能使用jsx。这时，你需要在tsconfig.ts中配置 jsx: preserve 属性，这样你就可以愉快地用jsx写vue了。
//tsconfig.ts
{
jsx :保留，
}
模版语法
Setup在使用jsx时需要返回一个函数，函数返回jsx形式。但是，使用jsx表单也有一些缺点。用数据很烦。不能像模板里那样直接使用，需要添加。价值。虽然新的volar插件已经自动添加。值，还是很难受，一不小心就忘了写。
脚本语言=tsx
从“vue”导入{ defineComponent，ref }；
导出默认定义组件({
setup() {
const msg=ref(tsx组件)；
return ()={
return div { msg . value }/div；
};
},
});
/脚本
v-if/v-show
还有一个不方便的地方就是v-if不能用，jsx里还得用三元表达式，但是三元表达式看起来不是很舒服。
导出默认定义组件({
setup() {
const msg=ref(tsx组件)；
const is show=ref(false)；
函数onClick() {
isShow.value=！isShow.value
}
return ()={
返回(
差异
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不行。我不知道为什么。可能direct jsx默认推荐使用isShow div/或者三元形式。
差异
div{msg.value}/div
{isShow.value div{isShow.value？show : hide}/div}
div-show={ is show . value } { is show . value？show : hide}/div
El-button onClick={ onClick } onClick/El-button
/div
V-show正确显示了show div，dom也是display开发的，三元是创建和销毁的dom。
不用想v-for，直接用map。地图还是挺好用的，但是v-model还能用，显示正常。
导出默认定义组件({
setup() {
const msg=ref(tsx组件)；
return()=gt；{
返回(
lt；divgt
lt；divgt{ msg.value } lt/divgt。
lt；El-输入v-model={msg.value} /gt。
lt；/divgt。
);
};
},
});
关于在vue3中使用jsx的配置和一些小问题的文章到此为止。关于在vue3中使用jsx的配置和一些小问题的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。