jsx （vue3项目中使用）
一、什么是jsx
在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展.
（在vue3项目中相当于单文件组件，.vue）使用的是jsx语法
二、jsx语法
1.插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，formatName(user) 等。
{ a + b }2.class 类名绑定。有两种方式，使用模板字符串或者使用数组。
// 模板字符串
header
// 数组
header
3.style 样式绑定,需要使用双大括号。
{color:'red',fontSize:'20px'}}>按钮
4.条件渲染。由于 jsx 本身具有 js 语法，所以不再需要使用 v-if 指令，使用 if/else 和三元表达式都可以实现。但是支持 v-show 指令。
const show = ref(true)
return () => (
{ show.value ? '展示' ： '隐藏'}
)
5.列表渲染。同样，由于 jsx 本身具有 js 语法，所以不再需要使用 v-for 指令，使用 JS 数组的 map 方法即可。
const arr =reactive([{id:1},{id:2},{id:3}])
return () => (
{arr.map(item=> {item.id})}
)
6.标签属性绑定。也是使用大括号包裹，不能使用 v-bind 指令。而 vue 组件中通过 批量绑定标签属性，在 JSX 中需要使用
const url = ref('http://www.baidu.com')
return () => (
{arr.map(item=> {item.id})}
)
7.事件绑定。使用的也是 单大括号 {}，不过事件绑定不是以 @为前缀了，而是改成了 on，与原生相同。例如：click 事件是 onClick 或 onclick。如果要带参数，需要使用箭头函数进行包裹：
const count = ref(100);
const getjsx = (a)=>{
console.log(a) // 参数
count.value += 1
}
return () => (
getjsx('参数')}>加一
)
8.v-model 双向绑定。需要使用单大括号 {}。如果绑定属性则需要一个数组，第一个元素为绑定的值，第二个元素为绑定的属性。
const val = ref('输入');
return () => (
)
三、jsx的使用
1.默认的情况下，vue3+vite的项目不支持jsx，如果想支持jsx，需安装插件@vitejs/plugin-vue-jsx
npm i @vitejs/plugin-vue-jsx -D
2.在vite.config.js中进行配置：
import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx
export default defineConfig(
{
plugins: [ vue(), vueJsx() ],
}
);
3.使用
（1）在Vue组件中使用
import { ref,defineComponent } from 'vue'
export default defineComponent({
setup(){
const count = ref(100);
const getjsx = ()=>{
count.value += 1
}
return () => (
加一
{count.value}
)
},
})
（2）单独建立一个jsx文件并在vue组件中使用
1.创建.jsx文件
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const render = ()=>{
return {'jsx文件'}
}
return render
}
})
2.在vue组件中使用
// 外部引入jsx文件
import Data from './data.jsx'
import { ref,defineComponent } from 'vue'
export default defineComponent({
setup(){
const count = ref(100);
const getjsx = ()=>{
count.value += 1
}
return () => (
加一
{count.value}
// 使用jsx文件
)
},
})
