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>]
......
相关推荐
张风捷特烈14 分钟前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发
longze_74 小时前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆7 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny7 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
飞翔的佩奇8 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的名城小区物业管理系统(附源码+数据库+毕业论文+开题报告+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·小区物业管理系统
chancygcx_8 小时前
前端框架Vue3(二)——Vue3核心语法之OptionsAPI与CompositionAPI与setup
vue.js·前端框架
烛阴8 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔9 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔9 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔9 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js