vue3第二十四节（JSX用法）

vite 创建项目的情况下
安装

npm i @vitejs/plugin-vue-jsx -D

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), vueJsx()],
})

1、什么是 JSX

JSX是一种JavaScript的语法扩展，它允许在JavaScript代码中直接编写类似HTML的标记结构。Vue 3中提供了对JSX的原生支持，使得开发人员可以使用JSX编写Vue组件的模板。

虽然最早是由 React 引入，但实际上 JSX 语法并没有定义运行时语义，并且能被编译成各种不同的输出形式。如果你之前使用过 JSX 语法，那么请注意 Vue 的 JSX 转换方式与 React 中 JSX 的转换方式**不同**，因此你不能在 Vue 应用中使用 React 的 JSX 转换。与 React JSX 语法的一些明显区别包括：

a：可以使用 HTML attributes 比如 class 和 for 作为 props - 不需要使用 className 或 htmlFor。
b：传递子元素给组件 (比如 slots) 的方式不同。

2、jsx 与 template 的区别

语法上有很大区别：
JSX 本质就是 js 代码，可以使用 js 的任何能力
template 只能嵌入简单的 js 表达式，其他需要指令，如 v-if、for();
而JSX 中循环使用map(), 条件使用 三元运算、&& 、|| 运算符
JSX 已经成为 ES 规范，template 还是 Vue 自家规范
template 中使用的是 {{}} 双大括号，JSX 中使用的是 { } 单大括号，插值语法
本质是相同的：
都会被编译为 js 代码（render 函数）

3、基本用法在 vue3 setup 语法糖中使用jsx

父组件：

<template><div ref="myDivRef"><myCom :lists="lists"></myCom></div>
</template>
<script setup lang="jsx">
import { ref, computed, watch, onMounted } from 'vue'
// 引入子组件
import myCom from './jsxCom.vue'
// import myCom from './index.jsx'
const myDivRef = ref('myDivRef')
const lists = ref([1, 2, 3, 4, 5])
const fun = () => {<div>{lists.value.map(itm => {return <div key={itm}>name--{itm}</div>})}</div>
}
</script>

子组件：

<template>
<div class="222"><myComponent :lists="lists" ></myComponent>
</div>
</template>
<!-- setup 语法糖中使用 jsx 声明lang="jsx" -->
<script setup lang="jsx">
import { ref, defineComponent } from 'vue'
const props = defineProps({lists: Array
})
// const lists = ref([1, 2, 3, 4])
// 使用 defineComponent 定义组件
const myComponent = defineComponent({name: 'myComponent',props: {lists: Array},setup() {return () => (<div>{props.lists.value.map(itm => {return <div key={itm}>name--{itm}</div>})}</div>)}
})
</script>

自定义组件还可以是 jsx文件

// index.jsx 文件
import { defineComponent } from 'vue'
export default defineComponent({props: {lists: Array},setup(props) {const render = () => [<div>{props.lists.map(itm => {return <div data-num={itm} key={itm} >name--{itm}</div>})}</div>]return render}
})

4、属性和事件循环

JSX中的属性使用为如 key={value}，不需要前面加冒号(:)
JSX中的方法使用为如 onClick={()=>{}} 为驼峰命名方法；以on开始，如 onClick

如需要修饰符：.passive、.capture 和 .once 等事件修饰符

<div onClickCapture={() => myClick()} />

对于事件和按键修饰符，可以使用 withModifiers 函数：

<div onClick={withModifiers(() => {}, ['self'])} />

循环使用map() 语法；而template语法中，需要使用v-for

<template>
<div class="222"><myComponent :lists="lists" ></myComponent>
</div>
</template>
<script setup lang="jsx">
import { ref, defineComponent } from 'vue'
const props = defineProps({lists: Array
})
const lists = ref([1, 2, 3, 4])
const myComponent = defineComponent({name: 'myComponent',props: {lists: Array},setup() {const myClick = (itm) => {console.log(itm)}return () => [<div>{props.lists.map(itm => {return itm % 2 === 0 && <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div>})}</div>]}
})
</script>

5、使用运算符

如：&& 运算符三元运算符

<template>
<div class="222"><myComponent :lists="lists" ></myComponent>
</div>
</template>
<script setup lang="jsx">
import { ref, defineComponent } from 'vue'
const props = defineProps({lists: Array
})
const lists = ref([1, 2, 3, 4])
const myComponent = defineComponent({name: 'myComponent',props: {lists: Array},setup() {const myClick = (itm) => {console.log(itm)}return () => [<div>{props.lists.map(itm => {// return <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div>// 使用 && 运算符return itm % 2 === 0 && <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div>})}</div>]}
})
</script>

三元运算：

……
return () => [<div>{props.lists.map(itm => {return itm % 2 ===0 ? <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div> : <div key={`${itm}-1`} onClick={() => myClick(`${itm}-1`)}>name--{`${itm}-1`}</div>})}</div>]
……