vue3 中使用 jsx 开发的详细过程
作者:雪急飞绪 发布时间:2024-06-07 16:02:31
安装 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-if
、v-show
、v-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-for
与v-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>
来源:https://blog.csdn.net/qq_38689395/article/details/126639124
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 本文将简单介绍四种获取对象的方法。假如有以下的类:class Person(object): def __init__(self, name
- 除了C/C++以外,我也接触过不少流行的语言,PHP、java、javascript、python,其中python可以说是操作起来最方便,
- 1下载安装1.1打开官网http://www.jetbrains.com/pycharm/download/耐心等待,大概200M,几分钟左
- Unittestunittest大家应该都不陌生。它作为一款博主在5-6年前最常用的单元测试框架,现在正被pytest,nose慢慢蚕食。渐
- 前言在实际的生产环境中,如果对MySQL数据库的读和写都在一台数据库服务中操作,无论在安全性、高可用性,还是高并发性等各个方面都是完全不能满
- 目录1.列表中存储字典:1.列表中存储多个字典2.访问列表中字典的值3.遍历访问多个值2.字典中存储列表1.访问字典中的列表元素2.访问字典
- 我们经常用到的PHP取整函数,主要是:ceil,floor,round,intval。ceil -- 进一法取整说明float ceil (
- 实例如下所示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
- 一个带有 yield 的函数就是一个 generator,它和普通函数不同,生成一个 generator 看起来像函数调用,但不会执行任何函
- 支付宝或者微信支付导出的收款二维码,除了二维码部分,还有很大一块背景图案,例如下面就是微信支付的收款二维码:有时候我们仅仅只想要图片中间的方
- 前言本文主要分享一个python代码,可以将多个视频中的音频转化为相同采样率的视频。对视频格式的校验没有做,也不是很关键。环境依赖ffmpe
- 1:为什么我得不到变量 我在一网页向另一网页POST数据name,为什么输出$name时却得不到任何值? 在PHP4.2以后的版本中regi
- 一、打包多个1、将需要打包的项目为anjuke_sd目录下的所有python文件,其中excute_main.py为主文件。2、生成主函数对
- 本文主要介绍下如何使用第三方库。1. 理解第三方库Python相当于一个手机,第三方库相当于手机里各种各样的APP。当我们想搭建网站时,可以
- 在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了
- MySQL的默认编码是Latin1,不支持中文,要支持中午需要把数据库的默认编码修改为gbk或者utf8。1、需要以root用户身份登陆才可
- 一、散点图散点图用两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式。特点:判断变量之间是否存在
- 事务特性1、原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节。2、一致性(Consiste
- 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不
- 一、分析阶段 一般来说,在系统分析阶段往往有太多需要关注的地方,系统各种功能性、可用性、可靠性、安全性需求往往吸引了我们大部分的注意力,但是