vue3 中使用 jsx 开发的详细过程

目录
  • 安装 JSX 插件
  • 使用语法差异
    • 模板
    • 指令
    • 事件修饰符
    • v-for
    • v-on
    • 插槽

安装 JSX 插件

在 Vue2 中要想使用 jsx 开发,需要安装 @vue/babel-preset-jsx 等插件,之后在 babel 里指定即可,详细可以参考下面的 Vue2 GitHub 文档

Vue2:GitHub 文档 —— Babel Preset JSX

最近在使用 Vue3,突然想用 jsx 进行开发部分页面,顺便记录一下,也可以参考下面的 Vue3 GitHub 文档

Vue3:GitHub 文档 —— Babel Plugin JSX for Vue 3.0

构建工具使用的是 vite,要想使用 jsx 开发,需要安装 @vitejs/plugin-vue-jsx,之后配置 vite.config.js 里的 plugins 即可

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'

export default defineConfig(() => {
  return {
    plugins: [vueJsx()]
  }
})

接下来着重说一下在使用 .vue 文件和 .jsx 文件在使用语法上的差异

使用语法差异

模板

之前在 template 里写的 html 代码需要放到 render 函数或 setup 函数里,Vue3 在 setup 里写会好一点

<!-- .vue -->
<template>
  <div>Hello World</div>
</template>

<!-- .jsx -->
<script>
export default defineComponent({
  setup() {
    return () => (
      <div>Hello World</div>
    )
  }
})
</script>

指令

需要把双引号改为单括号

  • v-ifv-showv-html等同理
  • v-bind也是一样的,不过需要把动态绑定需要去掉:

注意:

  • .vue文件中,ref 在模板中会自动进行解包,所以不需要使用.value
  • 但是在.jsx文件中,ref 在模板中不会自动解包,所以需要使用.value
<!-- .vue -->
<el-input v-model="queryParams.pageNumber" />
<el-form model="queryParams" :inline="true">...</el-form>

<!-- .jsx -->
<el-input v-model={queryParams.value.pageNumber} />
<el-form model={queryParams.value} inline={true}>...</el-form>

事件修饰符

  • 想使用事件修饰符可以把 v-model 改为一个数组,事件修饰符需要以数组的形式传递
  • 如果需要传递参数,需要在数组第二个参数中以字符串形式传递
  • 推荐:可以使用 _ 来分割事件修饰符,GitHub 里没有特殊声明,但是 Babel Plugin JSX for Vue 3.0 源码里做了判断,可以参考: parseDirectives.ts#L52-L61
<!-- .vue -->
<el-input v-model.trim={ queryParams.name } />

<!-- .jsx -->
<el-input v-model={ [queryParams.value.name, ['trim'] } />
<!-- 或 -->
<el-input v-model_trim={ refVal.value } />

自定义指令

如下示例为:添加 .event 事件修饰符并传递 arg 参数,直接打印 binding 效果如下:

<!-- .vue -->
<el-button
  v-hasPermission:arg.event="['xxx:add']"
  type="primary"
  plain
  icon="Plus"
  @click="handleAdd"
>
  新增
</el-button>

<!-- .jsx -->
<el-button
  v-hasPermission={[['xxx:add'], 'arg', ['event']]}
  type='primary'
  plain
  icon="Plus"
  onClick={handleAdd}
>
  新增
</el-button>

v-for

v-for 无法直接使用,需要使用 map 去实现循环遍历渲染

<!-- .vue -->
<h1 v-for="item in list" :key="item">{{item}}</h1>

<!-- .jsx -->
<script>
{list.value.map(item => (
  <h1>{item}</h1>
))}
</script>

注意:

  • 如果遍历时需要判断每一项其是否显示,不能使用v-if,需要使用三元运算符
  • v-forv-if不能一起使用
<!-- .vue -->
<template v-for="col in columns">
  <el-table-column
    v-if="col.visible"
    :key="col.key"
    :label="col.label"
    :prop="col.field"
  />
</template>

<!-- .jsx -->
{columns.value.map(col =>
  col.visible ? (
    <el-table-column
      key={col.id}
      label={col.label}
      prop={col.field}
    />
  ) : null
)}

v-on

v-on 无法直接使用,需要使用原生绑定事件的方式去实现(@ -> on,之后进行驼峰)

<!-- .vue -->
<el-button @click="handleQuery">搜索</el-button>

<!-- .jsx -->
<el-button onClick={handleQuery}>搜索</el-button>

系统按键修饰符不能通过 .xxx 形式书写,需要自己进行判断,比如如下示例是按回车时进行搜索

这里顺便说一下 style,由于里面是 : 形式表示,需要改为对象形式书写

<!-- .vue -->
<el-input
  v-model.trim="queryParams.number"
  clearable
  style="width: 180px"
  @keyup.enter="handleQuery"
/>

<!-- .jsx -->
<el-input
  v-model_trim={queryParams.value.number}
  clearable
  style={{ width: '180px' }}
  onKeyup={e => e.code === 'Enter' && handleQuery()}
/>

插槽

在 jsx 中,应该使用 v-slots 代替 v-slot,且插槽需要是函数式组件

<!-- .vue -->
<el-dialog
  v-model="configOpen"
  title="弹出框"
  append-to-body
  >
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="configOpen = false">取 消</el-button>
    </div>
  </template>
</el-dialog>

<!-- .jsx -->
<el-dialog
  v-model={configOpen.value}
  title='弹出框'
  append-to-body
  v-slots={{
    footer: () => (
      <div class='dialog-footer'>
        <el-button
          onClick={() => {
            configOpen.value = false
          }}
        >
          取 消
        </el-button>
      </div>
    )
  }}
  >
  <!-- ... -->
</el-dialog>

到此这篇关于vue3中使用jsx开发的文章就介绍到这了,更多相关vue3使用jsx内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • vue3无法使用jsx的问题及解决

    目录 vue3无法使用jsx问题 报错一:无法使用 JSX,除非提供了 "--jsx" 标志 报错二:ElementPlusIconsVue挂载问题 关于vue3的jsx写法问题 安装 @vitejs/plugin-vue-jsx vite 插件 编写示例 vue3无法使用jsx问题 报错一:无法使用 JSX,除非提供了 "--jsx" 标志 在Vite+Vue3.0中使用jsx语法开发,需要安装jsx插件 npm i @vitejs/plugin-vue-jsx

  • 为什么推荐使用JSX开发Vue3

    在很长的一段时间中,Vue 官方都以简单上手作为其推广的重点.这确实给 Vue 带来了非常大的用户量,尤其是最追求需求开发效率, 往往不那么在意工程代码质量的国内中小企业中,Vue 占据的份额极速增长.但是作为开发者自身,我们必须要认清一个重点,简单易用重来不应该在技术选型中占据很大的份额,可维护性才是. 以防万一有的同学实在不看官方文档,我先提一嘴,SFC 就是写 Vue 组件的时候写的.vue文件,这一个文件就是一个 SFC,全称 Single File Component,也即单文件组件.

  • Vite创建Vue3项目及Vue3使用jsx详解

    目录 Vite创建Vue3项目 1. 输入项目名称 2. 选择框架 3. 选择不同的vue 4. 项目创建完成 5. 项目结构 6. 启动项目 Vue3中使用jsx 1. 安装插件 2. 注册插件 3. 使用插件 注意 总结 Vite创建Vue3项目 Vite 需要 Node.js 版本 >= 12.0.0.(node -v 查看自己当前的node版本) 使用 yarn:yarn create @vitejs/app 使用 npm:npm init @vitejs/app 1. 输入项目名称 这

  • 详解在vue3中使用jsx的配置以及一些小问题

    目录 配置 模版语法 v-if/v-show 配置 在vue3中使用jsx十分方便,只需要安装官方的@vitejs/plugin-vue-jsx插件,在vite.config.ts中配置 // vite.config.ts import vueJsx from "@vitejs/plugin-vue-jsx"; export default { plugins: [vueJsx()] } 配置了vite.config.ts后虽然已经可以使用jsx,页面也正常渲染了,但是还是会提示无法使

  • vue3 中使用 jsx 开发的详细过程

    目录 安装 JSX 插件 使用语法差异 模板 指令 事件修饰符 v-for v-on 插槽 安装 JSX 插件 在 Vue2 中要想使用 jsx 开发,需要安装 @vue/babel-preset-jsx 等插件,之后在 babel 里指定即可,详细可以参考下面的 Vue2 GitHub 文档 Vue2:GitHub 文档 —— Babel Preset JSX 最近在使用 Vue3,突然想用 jsx 进行开发部分页面,顺便记录一下,也可以参考下面的 Vue3 GitHub 文档 Vue3:Gi

  • 在Vue3中使用BabylonJs开发 3D的初体验

    目录 开始 安装 Vue3 安装 BabylonJs 创建 Vue 组件: BabylonOne.vue 创建 Babylon 类 渲染场景 修改 CSS 并添加相机和灯光 结尾 随着前端的发展,在 Web 浏览器中构建 3D 图形变得越加简单. 加入我的 3D 开发旅程,我将向你展示如何使用 Babylon.js 创建基本场景. 在这篇文章中,我们将接触以下内容: 使用 Vue3 创建一个 Vue 组件 创建 Babylon 类 在画布上渲染场景 创建 3D 网格 开始 安装 Vue3 首先,

  • 如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • 使用Vscode结合docker进行开发的详细过程

    前言 使用 Docker 与 VS Code 可以优化整个本地开发环境,加速项目进度过程.在所有环境中使用相同的基础映像,为所有开发人员提供相同的编辑器工具,可以更容易实现标准. 大型项目的团队首先必须确保安装依赖.内核版本这些开发环境是统一的.为了解决开发环境一致性的问题,常规传统的办法就是制定开发人员遵循制定指南,但是尽管如此实际开发过程还是会遇到各种障碍. 设置环境的常规方法如下图所示: 另一种解决方案是使用所有必需的库和依赖项预先配置的开发环境,开发人员可以在容器中分拆这些库和依赖项.然

  • 在VScode中配置ROS环境的详细过程

    目录 准备工作 使用 1 创建工作空间 2 VScode打开工作空间 3 创建功能包 4 创建配置json文件 5 编写文件 6 修改功能包CMakeList.txt 7 编译 8 运行ROS MASTER 9 运行节点 调试 参考 准备工作 首先在VScode中安装ROS和catkin_tool插件 VScode快捷键说明:ctrl+shift+p:调出用于执行命令的输入框ctrl+shift+b:编译 使用 1 创建工作空间 终端打开,在命令行: mkdir -p ~/am_ws/src c

  • 在微信小程序中获取用户位置的详细过程

    目录 前言 wx.getLocation 腾讯位置服务 总结 前言 最近在学习微信小程序,在学习的过程中,有很多好玩的 API,经常点外卖的同学可能在小程序中遇到过,比如:某团.某了么都是有显示当前用户位置信息的,那么今天给大家介绍如何获取当前用户位置信息,听上去很不错,其实实践起来也不是很难. wx.getLocation 首先,我们需要来认识一下 wx.getLocation 这个 API 方法,我们先看看 微信官方文档 中是怎么说的 看我划红线的地方就可以了,文档中明确的表示这个 API

  • Win11平台安装和配置NeoVim0.8.2编辑器搭建Python3开发环境详细过程(2023最新攻略)

    目录 安装配置 第一个NeoVim插件 目录管理 终端配置 Python代码补全配置 结语 毫无疑问,我们生活在编辑器的最好年代,Vim是仅在Vi之下的神级编辑器,而脱胎于Vim的NeoVim则是这个时代最好的编辑器,没有之一.异步支持.更好的内存管理.更快的渲染速度.更多的编辑命令,是大神Thiago de Arruda对开发者们最好的技术馈赠. 之前一篇:Win10系统下安装编辑器之神(The God of Editor)Vim并且构建Python生态开发环境(2020年最新攻略),我们已经

  • 在anaconda中配置graphviz包的详细过程

    目录 GraphViz简介 一:安装graphviz 二:配置环境变量 三:检测Graphviz是否配置成功. 四:安装graphviz包 GraphViz简介 graphviz是贝尔实验室开发的一个开源的工具包,它使用一个特定的DSL(领域特定语言):dot作为脚本语言,然后使用布局引擎来解析此脚本,并完成自动布局.graphviz提供丰富的导出格式,如常用的图片格式,SVG,PDF格式等. 在机器学习中我们经常会用到graphviz这个包,比如说在绘制决策树的图形的时候,下面我来介绍一下如何

  • Golang多模块开发的详细过程

    目录 Golang 多模块开发 前提条件 基本要求 本地环境 代码开发 创建模块 创建工作空间 修改源码 总结 Golang 多模块开发 今天学习下Golang中多模块的基础知识,学习多模块的运行原理,使用多模块的方式,可以让开发者的代码在其他多个模块中构建.运行.提高代码的复用,从而提高开发效率. 在今天的学习中,将在工作工作空间中创建两个模块,然后进行模块之间的引用,并运行程序结果. 前提条件 基本要求 Go 1.18 及更高版本 合适的编译工具 - text编辑器也满足要求 命令终端 -

随机推荐