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 样式绑定,需要使用双大括号。

<span style={{color:'red',fontSize:'20px'}}>按钮

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 () => (

<el-button onClick={getjsx}>加一</el-button>

{count.value}

) }, }) </script>

（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 () => (

<el-button onClick={getjsx}>加一</el-button>

{count.value}

// 使用jsx文件 <Data></Data>

) }, }) </script>