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

更新时间：2022年09月05日 15:47:14 作者：雪急飞绪

这篇文章主要介绍了vue3 中使用 jsx 开发,本文着重说一下在使用 .vue 文件和 .jsx 文件在使用语法上的差异，需要的朋友可以参考下

安装 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>

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

您可能感兴趣的文章:

vue3
jsx

vant的picker组件设置文字超长滚动方式
这篇文章主要介绍了vant的picker组件设置文字超长滚动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue js格式化数字为金额格式代码
这篇文章主要介绍了vue js格式化数字为金额格式代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
基于Vue3创建一个简单的倒计时组件
这篇文章主要给大家介绍了基于Vue3创建一个简单的倒计时组件的代码示例,文中通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
2023-11-11
动态加载权限管理模块中的Vue组件
本篇文章给大家详细讲解了如何在权限管理模块中动态的加载VUE组件的过程，有这方面需求的朋友跟着学习下吧。
2018-01-01
Vue常见报错整理大全(从此报错不害怕)
写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
2022-08-08
解决VueCil代理本地proxytable无效报错404的问题
这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue实现todolist删除功能
这篇文章主要介绍了Vue实现todolist删除功能,，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
关于nuxt store中保存localstorage的问题
这篇文章主要介绍了关于nuxt store中保存localstorage的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vuex中Getter的用法详解
这篇文章主要给大家介绍了关于Vuex中Getter的基本使用教程,getter相当于Vuex中的计算属性对 state 做处理再返回,本文通过示例代码将Getter介绍的非常详细,需要的朋友可以参考下
2021-07-07
vue实现计算器封装
这篇文章主要为大家详细介绍了vue实现计算器的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04