引言
今天我们来一起学习一下Vue3中的jsx写法。jsx语法我用的也不是很熟，今天我们来一起体验一下jsx吧
jsx是什么
首先，jsx并不是Vue3的专属，更出名的是在于React中的应用。如果写过React的项目的话可能对jsx的语法非常熟悉。总的来说，JSX是一个 JavaScript 的语法扩展。而不是Vue3的独特语法糖。
安装与配置
我们在Vite工程中，可以这样引入jsx。
npm install @vitejs/plugin-vue-jsxyarn,pnpm也同理
接下来我们要在文件里配置一下
首先打开vite.config.ts文件
参考配置如下
// vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";
export default {
plugins: [vueJsx()]
}我们开始写jsx,但是因为我们工程中往往会使用TypeScript，而这样就会出现，我们使用了jsx，报错了，但是页面还正常的情况。
所以我们要配置一下ts。
打开tsconfig.ts文件
// tsconfig.ts
{
"jsx": "preserve",
}添加如上配置。
接下来我们就可以开心的写jsx啦。
关于v-model的写法
先看一下Vue3的正常的写法
<template>
<input v-model="value1" />
{{ value1 }}
</template>
<script setup lang="ts">
import { Ref , ref } from "vue";
let value1:Ref<string> = ref('');
</script>
效果如上。很简单，这里不多赘述。
接下来我们来尝试一下jsx的语法。
<input v-model={value} />事件绑定上我们可以尝试上面的语法。
{} 是jsx的万能的用法，里面可以写js的表达式，循环逻辑操作等等
再来个例子:
<tempalte>
<div :pos="pos">{{pos}}</div>
</template>传统的temalte写法如上，再看个jsx写法
setup() {
let pos = 1
return ()=><div pos={pos}>{pos}</div>
}再看一下常见的循环
在Vue3经典的写法中:
<tempalte>
<span v-for="item in Arr" :key="item.label">{{item.label}}</span>
</template>再看一下jsx
//jsx 写法
setup() {
const Arr= ref([{label:'1'},{label:'2'},{label:'3'}]);
return ()=>(
<>
{ Arr.value.map(item=> <span key={item.label}>{item.label}</span> ) }
</>
)
}
我们使用了map的方法来作为循环
再看一下v-if和v-show
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>
);
};
},简单就说这些吧，先和大家体验了一把jsx的基础语法，大家感兴趣的也可以继续深入学习
