一、什么是jsx
在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展.
（在vue3项目中相当于单文件组件，.vue）使用的是jsx语法
二、jsx语法
1.插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，formatName(user) 等。
<div>{ a + b }</div>
2.class 类名绑定。有两种方式，使用模板字符串或者使用数组。
// 模板字符串
<div className={ `header ${ isBg ? 'headerBg' : '' }` }>header</div>
// 数组
<div class={ [ 'header', isBg && 'headerBg' ] } >header</div>
3.style 样式绑定,需要使用双大括号。
<span style={{color:'red',fontSize:'20px'}}>按钮</span>
4.条件渲染。由于 jsx 本身具有 js 语法，所以不再需要使用 v-if 指令，使用 if/else 和三元表达式都可以实现。但是支持 v-show 指令。
const show = ref(true)
return () => (
<div>
<div> { show.value ? '展示' ： '隐藏'}</div>
</div>
)
5.列表渲染。同样，由于 jsx 本身具有 js 语法，所以不再需要使用 v-for 指令，使用 JS 数组的 map 方法即可。
const arr =reactive([{id:1},{id:2},{id:3}])
return () => (
<div>
<div >
{arr.map(item=> <span>{item.id}</span>)}
</div>
</div>
)
6.标签属性绑定。也是使用大括号包裹，不能使用 v-bind 指令。而 vue 组件中通过 <div v-bind="properties"></div> 批量绑定标签属性，在 JSX 中需要使用 <div {...properties}></div>
const url = ref('http://www.baidu.com')
return () => (
<div>
<div> {arr.map(item=> <span>{item.id}</span>)}</div>
</div>
)
7.事件绑定。使用的也是 单大括号 {}，不过事件绑定不是以 @为前缀了，而是改成了 on，与原生相同。例如：click 事件是 onClick 或 onclick。如果要带参数，需要使用箭头函数进行包裹：
const count = ref(100);
const getjsx = (a)=>{
console.log(a) // 参数
count.value += 1
}
return () => (
<div>
<el-button onClick={()=>getjsx('参数')}>加一</el-button>
</div>
)
8.v-model 双向绑定。需要使用单大括号 {}。如果绑定属性则需要一个数组，第一个元素为绑定的值，第二个元素为绑定的属性。
const val = ref('输入');
return () => (
<div>
<el-input v-model={val.value}></el-input>
</div>
)
三、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组件中使用
<script lang="jsx">
import { ref,defineComponent } from 'vue'
export default defineComponent({
setup(){
const count = ref(100);
const getjsx = ()=>{
count.value += 1
}
return () => (
<div>
<el-button onClick={getjsx}>加一</el-button>
<div>{count.value}</div>
</div>
)
},
})文章来源：https://www.toymoban.com/news/detail-798307.html
</script>文章来源地址https://www.toymoban.com/news/detail-798307.html
（2）单独建立一个jsx文件并在vue组件中使用
1.创建.jsx文件
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const render = ()=>{
return <div>{'jsx文件'}</div>
}
return render
}
})
2.在vue组件中使用
<script lang="jsx">
// 外部引入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 () => (
<div>
<el-button onClick={getjsx}>加一</el-button>
<div>{count.value}</div>
// 使用jsx文件
<Data></Data>
</div>
)
},
})
</script>
到了这里，关于jsx （vue3项目中使用）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
