vue3 第二十四节(JSX用法)使用及注意事项详解

vite 创建项目的情况下 安装

javascript 复制代码
npm i @vitejs/plugin-vue-jsx -D

配置vite.config.js

javascript 复制代码
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 比如 classfor 作为 props - 不需要使用 classNamehtmlForb传递子元素给组件 (比如 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

父组件:

javascript 复制代码
<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>

子组件:

javascript 复制代码
<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文件

javascript 复制代码
// 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 等事件修饰符

javascript 复制代码
<div onClickCapture={() => myClick()} />

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

javascript 复制代码
<div onClick={withModifiers(() => {}, ['self'])} />

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

javascript 复制代码
<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、使用运算符

如:&& 运算符 三元运算符

javascript 复制代码
<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>

三元运算:

javascript 复制代码
......
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>]
......
相关推荐
全宝几秒前
用css做一枚拟物风格的按钮
前端·css·svg
IT_陈寒8 分钟前
3年Java开发经验总结:提升50%编码效率的7个核心技巧与实战案例
前端·人工智能·后端
yqcoder15 分钟前
vue2 和 vue3 生命周期的区别
前端·javascript·vue.js
excel27 分钟前
前端人必备的 JavaScript API 全面指南(含 postMessage、File、Stream、Web 组件等)
前端
m0_738120726 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7748 小时前
uniappx鸿蒙适配
前端
叫我阿柒啊8 小时前
Java全栈开发面试实战:从基础到微服务架构
java·vue.js·spring boot·redis·git·full stack·interview
山有木兮木有枝_9 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
言兴9 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra10 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github