Vue3中的jsx的babel配置

  • 如果我们希望在项目中使用jsx,那么我们需要添加对jsx的支持:
  1. jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);
  2. 对于Vue来说,我们只需要在Babel中配置对应的插件即可;

** webpack 中安装**

  • 安装Babel支持Vue的jsx插件:
npm install @vue/babel-plugin-jsx -D

在babel.config.js配置文件中配置插件:

module.exports = {presets:['@vue/cli-plugin-babel/preset'],plugins:["@vue/babel-plugin-jsx"]
}

Vite环境
如果是Vite环境,需要安装插件:

npm install @vitejs/plugin-vue-jsx -D

在vite.config.js配置文件中配置插件:

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import jsx from '@vitejs/plugin-vue-jsx'  // 引入// https://vitejs.dev/config/
export default defineConfig({plugins: [jsx()  // 使用],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

使用案例

基本使用
<script lang="jsx">export default {render() {return (<div class="app"><h2>我是标题</h2><p>我是内容, 哈哈哈</p></div>)}}
</script><style lang="less" scoped></style>
Options-Api中
<script lang="jsx">import About from './About.vue'export default {data(){return {counter:0}},render(){return (<div class="app"><h2>当前计数:{this.counter}</h2><button onClick={this.increment}>+1</button><button onClick={this.decrement}>-1</button><About /></div>)},methods:{increment(){this.counter++},decrement(){this.counter--}}}
</script><style lang="less" scoped></style>
Compitions-Api中
<template><jsx />
</template>  <script lang="jsx" setup>import { ref } from 'vue'import About from "./About.vue"const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--;}const jsx = () => (<div><h2>当前计数:{ counter.value }</h2><button onClick={increment}> +1 </button><button onClick={decrement}> -1 </button><About /></div> )
</script><style lang="less" scoped></style>
setup函数中使用
<script lang="jsx">import { ref } from 'vue'import About from './About.vue'export default {setup(){const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--}return () => (<div class="app"><h2>当前计数:{ counter.value }</h2>  <button onClick={increment}>+1</button><button onClick={decrement}>-1</button><About /></div>)}}
</script>
<style lang="less" scoped></style>

** 感谢大家观看,我们下次见 **

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40259.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue+Xterm.js+WebSocket+JSch实现Web Shell终端

一、需求 在系统中使用Web Shell连接集群的登录节点 二、实现 前端使用Vue&#xff0c;WebSocket实现前后端通信&#xff0c;后端使用JSch ssh通讯包。 1. 前端核心代码 <template><div class"shell-container"><div id"shell"/>&l…

C++ 实现字符串逆序

C 实现字符串逆序 思路&#xff1a; 输入一个字符串。使用双指针法&#xff0c;交换字符串的首尾字符&#xff0c;逐步向中间移动。输出逆序后的字符串。 #include <iostream> #include <string>using namespace std;void reverseString(string &str) {int …

【FPGA】STA静态时序分析

文章目录 一.定义二.分类1. 静态时序分析2. 静态时序分析 三. 概念四. 时间余量1.场景2.建立时间余量3.保持时间余量 一.定义 时序分析:检查电路是否满足时序要求&#xff1b; 二.分类 1. 静态时序分析 STA,遍历所有的时序路径&#xff0c;根据时序库&#xff08;.lib文件&…

【Mojolicious RESTful接口全解】构建现代化Web服务的秘诀

标题&#xff1a;【Mojolicious RESTful接口全解】构建现代化Web服务的秘诀 Mojolicious是一个基于Perl的高性能、实时的Web框架&#xff0c;它以其简洁的语法和强大的功能而闻名。Mojolicious不仅支持传统的Web应用开发&#xff0c;还特别适合构建RESTful API。本文将详细介绍…

新手教学系列——使用uWSGI对Flask应用提速

在构建和部署Flask应用时,性能和稳定性是两个关键的因素。为了提升Flask应用的性能,我们可以借助uWSGI这个强大的工具。本文将详细介绍为什么要使用uWSGI、uWSGI的底层原理,并提供一个实例配置,帮助你更好地理解和应用这个工具。 为什么要使用uWSGI uWSGI 是一个应用服务…

探索企业知识边界,鸿翼ECM AI助手开启智慧问答新时代

在信息化迅速发展的当下&#xff0c;企业积累的数字文档数量巨大&#xff0c;这些文档中蕴含的深层信息对业务发展至关重要。然而&#xff0c;传统的搜索技术常常因只能进行关键字查询而无法满足对文档深层次理解的需求。 据Gartner调查&#xff0c;高达47%的员工在寻找有效工…

Webpack: 三种Chunk产物的打包逻辑

概述 在前文 Webpack: Dependency Graph 管理模块间依赖 中&#xff0c;我们已经详细讲解了「构建」阶段如何从 Entry 开始逐步递归读入、解析模块内容&#xff0c;并最终构建出模块依赖关系图 —— ModuleGraph 对象。本文我们继续往下&#xff0c;讲解在接下来的「封装」阶段…

【大数据】—美国交通事故分析(2016 年 2 月至 2020 年 12 月)

引言 在当今快速发展的数字时代&#xff0c;大数据已成为我们理解世界、做出决策的重要工具。特别是在交通安全领域&#xff0c;大数据分析能够揭示事故模式、识别风险因素&#xff0c;并帮助制定预防措施&#xff0c;从而挽救生命。本文将深入探讨2016年2月至2020年12月期间&…

【redis】 LRU 和 LFU 算法

1、简介 Redis 中的 LRU&#xff08;Least Recently Used&#xff09;和 LFU&#xff08;Least Frequently Used&#xff09;算法是用于决定在内存空间不足时&#xff0c;哪些键&#xff08;key&#xff09;应该被删除以释放空间的策略。这两种算法都试图通过跟踪键的使用情况…

解决Memcached内存碎片:优化缓存性能的策略

解决Memcached内存碎片&#xff1a;优化缓存性能的策略 Memcached是一个广泛使用的高性能分布式内存缓存系统&#xff0c;它通过在内存中缓存数据来加速数据检索操作。然而&#xff0c;随着时间的推移和缓存操作的进行&#xff0c;Memcached可能会遇到内存碎片问题&#xff0c…

24年河南特岗教师招聘流程+报名流程

河南特岗教师报名流程如下 1.登录河南省特岗招聘网 登录河南省特岗招聘网注册账号和密码&#xff0c;账号可以是手机号或者身份证号&#xff0c;密码自己设置 2.注册登录账号 注册完账号重新登录账号&#xff0c;输入身份证号、手机号、密码、验证码 3.浏览考试须知 填写个人信…

Python 编程快速上手——让繁琐工作自动化(第2版)读书笔记01 Python基础快速过关

Python 编程快速上手——让繁琐工作自动化&#xff08;第2版&#xff09;读书笔记01 Python基础快速过关 1 python基础概念 Python提供了高效的高级数据结构&#xff0c;还能简单有效地面向对象编程。 python运算符顺序 **——%——//——/——*——-——python中常见的数据…

Real-Time 3D Graphics with WebGL2

WebGL渲染管线 下图是WebGL渲染管线的示意图: Vertex Buffer Objects (VBOs) VBOS中包含了用于描述几何体的信息。如&#xff0c;几何体的顶点坐标&#xff0c;法线坐标&#xff0c;颜色&#xff0c;纹理坐标等。 Index Buffer Objects (IBOs) IBOs中包含了描述顶点关系的信…

C#的多线程UI窗体控件显示方案 - 开源研究系列文章

上次编写了《LUAgent服务器端工具》这个应用&#xff0c;然后里面需要新启动一个线程去对文件进行上传到FTP服务器&#xff0c;但是新线程里无法对应用主线程UI的内容进行更改&#xff0c;所以就需要在线程里设置主UI线程里控件信息的方法&#xff0c;于是就有了此博文。此文记…

Rocky Linux 9 快速安装docker 教程

前述 CentOS 7系统将于2024年06月30日停止维护服务。CentOS官方不再提供CentOS 及后续版本&#xff0c;不再支持新的软件和补丁更新。CentOS用户现有业务随时面临宕机和安全风险&#xff0c;并无法确保及时恢复。由于 CentOS Stream 相对不稳定&#xff0c;刚好在寻找平替系统…

idm 支持断点续传吗 idm 断点续传如何使用 idm断点续传怎么解决 idm下载中断后无法继续下载

断点续传功能&#xff0c;让我再也不会惧怕下载大型文件。在断点续传的帮助下&#xff0c;用户可以随时暂停下载任务&#xff0c;并在空闲时继续之前的下载进程。下载文件不惧网络波动&#xff0c;断点续传让下载过程更稳定。有关 idm 支持断点续传吗&#xff0c;idm 断点续传如…

JavaScript:if-else类型

目录 任务描述 相关知识 if语句 if-else语句 匹配问题 编程要求 任务描述 本关任务&#xff1a;根据成绩判断考试结果。 相关知识 在编程中&#xff0c;我们常常根据变量是否满足某个条件来执行不同的语句。 JavaScript中利用以if关键字开头的条件语句达到以上目的&am…

商城项目回顾

哈哈&#xff0c;准备期末考试去了&#xff0c;项目停了一段时间。现在又忘的差不多了。所以专门写一篇博客总结前期项目的知识点。 Client软件包 代码加总结&#xff1a; 这段代码实现了一个简单的客户端程序&#xff0c;用于与服务器建立连接、发送登录信息并接收服务器的响…

笔记:tencentos2.4升级gcc4到gcc8.5

由于开发需要将tencentos2.4的GCC版本升级到和cat /proc/version中GCC8.4较接近的版本。 过程如下&#xff1a; 首先 ls -al /etc/yum.repos.d/ 观察tlinux.repo 可以看到类似&#xff1a; [tlinux] nametlinux-$releasever - tlinux baseurlhttp://mirrors.tencent.com/t…

在主线程和非主线程调用 DispatchQueue.main.sync { }

在 Swift 中&#xff0c;DispatchQueue.main.sync { } 的行为取决于当前执行代码的线程。以下是详细的说明&#xff1a; 主线程调用 DispatchQueue.main.sync { } 当在主线程上调用 DispatchQueue.main.sync { } 时&#xff0c;会发生死锁&#xff08;Deadlock&#xff09;。…