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

  按钮

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组件中使用

（2）单独建立一个jsx文件并在vue组件中使用

1.创建.jsx文件

import {  defineComponent } from 'vue'

export default defineComponent({

  setup() {

    const render = ()=>{

      return {'jsx文件'}

    }

    return render

  }

})

2.在vue组件中使用