当前位置: 首页 > news >正文

Vue.js 中使用 JSX 自定义语法封装组件

Vue.js 中使用 JSX 自定义语法封装组件

在 Vue.js 开发中,使用模板语法是常见的构建用户界面方式,但对于一些开发者,特别是熟悉 JavaScript 语法的,JSX 提供了一种更灵活、更具表现力的替代方案。通过 JSX,我们可以在 JavaScript 代码中直接编写类似于 HTML 的语法,来创建 Vue 组件,这不仅能提升开发效率,还能让代码结构更加清晰。

一、基础概念

(一)什么是 JSX

JSX 是一种 JavaScript 的语法扩展,它看起来很像 HTML,但实际上是在 JavaScript 中编写的。它允许我们在 JavaScript 代码中直接嵌入 XML - 或 HTML - 风格的标记,从而让我们可以更直观地描述 UI 结构。例如:

const element = \<h1>Hello, world!\</h1>;

这里的<h1>Hello, world!</h1>就是 JSX 语法,它最终会被转换为 JavaScript 代码来创建 DOM 元素。

(二)Vue.js 与 JSX 的结合

在 Vue.js 中使用 JSX,我们可以利用 Vue 的响应式原理和组件化机制,同时享受 JSX 带来的编程体验。Vue 官方提供了对 JSX 的支持,通过安装@vue/babel - preset - jsx插件,我们可以在 Vue 项目中使用 JSX 语法编写组件。

二、创建步骤

(一)安装依赖

在 Vue 项目中使用 JSX,首先需要安装相关依赖。打开终端,进入项目目录,执行以下命令:

npm install @vue/babel - preset - jsx @vue/composition - api

@vue/babel - preset - jsx是用于将 JSX 语法转换为 JavaScript 的 Babel 预设,@vue/composition - api是 Vue 的组合式 API,在使用 JSX 时,经常会结合组合式 API 来管理组件逻辑。

(二)配置 Babel

安装完成后,需要在项目的.babelrcbabel.config.js文件中配置 Babel,以支持 JSX 语法。在.babelrc中添加如下配置:

{"presets": \["@vue/babel - preset - jsx"]}

如果使用babel.config.js,则配置如下:

module.exports = function (api) {api.cache(true);const presets = \['@vue/babel - preset - jsx'];api.preset(presets);return;};

(三)创建组件

使用 Options API 创建组件

import Vue from 'vue';const MyComponent = {data() {return {message: 'Hello from JSX component'};},render() {return \<div>{this.message}\</div>;}};export default MyComponent;

在上述代码中,MyComponent是一个 Vue 组件,通过render函数使用 JSX 语法返回一个包含message数据的div元素。

使用 Composition API 创建组件

import { defineComponent } from '@vue/composition - api';const MyComponent = defineComponent({setup() {const message = 'Hello from Composition API with JSX';return () => \<div>{message}\</div>;}});export default MyComponent;

这里使用defineComponentsetup函数,在setup函数中定义数据,并返回一个使用 JSX 语法的渲染函数。

三、示例代码

(一)父子组件传值

父组件

import Vue from 'vue';import ChildComponent from './ChildComponent';const ParentComponent = {data() {return {parentMessage: 'Message from parent'};},render() {return (\<div>\<h1>Parent Component\</h1>\<ChildComponent message={this.parentMessage} />\</div>);}};export default ParentComponent;

子组件

import { defineComponent } from '@vue/composition - api';const ChildComponent = defineComponent({props: \['message'],setup(props) {return () => \<p>{props.message}\</p>;}});export default ChildComponent;

在这个示例中,父组件通过propsparentMessage传递给子组件,子组件接收并显示该数据。

(二)事件处理

import { defineComponent } from '@vue/composition - api';const ButtonComponent = defineComponent({setup() {const handleClick = () => {console.log('Button clicked!');};return () => \<button onClick={handleClick}>Click me\</button>;}});export default ButtonComponent;

上述代码展示了如何在 JSX 组件中绑定点击事件,当按钮被点击时,会在控制台打印信息。

四、应用场景

复杂逻辑组件:当组件逻辑较为复杂,使用模板语法可能会使代码变得冗长和难以维护,此时使用 JSX 结合 JavaScript 的灵活性,可以更好地组织和管理代码逻辑。

与第三方库集成:一些第三方库,如 React - like 的状态管理库或可视化库,更适合在 JSX 环境中使用。在 Vue 项目中使用这些库时,JSX 可以提供更友好的集成方式。

团队协作:如果团队成员对 JavaScript 更熟悉,使用 JSX 可以减少学习 Vue 模板语法的成本,提高开发效率和代码的可维护性。

通过以上步骤和示例,我们可以在 Vue.js 项目中熟练地使用 JSX 自定义语法封装组件,为开发带来更多的便利和可能性。

相关文章:

Vue.js 中使用 JSX 自定义语法封装组件

Vue.js 中使用 JSX 自定义语法封装组件 在 Vue.js 开发中&#xff0c;使用模板语法是常见的构建用户界面方式&#xff0c;但对于一些开发者&#xff0c;特别是熟悉 JavaScript 语法的&#xff0c;JSX 提供了一种更灵活、更具表现力的替代方案。通过 JSX&#xff0c;我们可以在…...

设计模式教程:备忘录模式(Memento Pattern)

备忘录模式&#xff08;Memento Pattern&#xff09;详解 一、模式概述 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型设计模式&#xff0c;允许在不暴露对象实现细节的情况下&#xff0c;保存对象的内部状态&#xff0c;并在需要时恢复该状态。备忘录模式…...

使用 C# 以api的形式调用 DeepSeek

一&#xff1a;创建 API 密钥 首先&#xff0c;您需要来自 DeepSeek 的 API 密钥。访问 DeepSeek&#xff0c;创建一个帐户&#xff0c;并生成一个新的 API 密钥。 二&#xff1a;安装所需的 NuGet 包 使用 NuGet 包管理器安装包&#xff0c;或在包管理器控制台中运行以下命…...

CS5366AN:高集成Type-C转HDMI 4K60Hz芯片的国产突破

一、芯片概述 CS5366AN 是集睿致远&#xff08;ASL&#xff09;推出的一款高度集成的 Type-C转HDMI 2.0视频转换芯片&#xff0c;专为扩展坞、游戏底座、高清显示设备等场景设计。其核心功能是将USB Type-C接口的DisplayPort信号&#xff08;DP Alt Mode&#xff09;转换为HDM…...

瑞芯微RK安卓Android主板GPIO按键配置方法,触觉智能嵌入式开发

触觉智能分享&#xff0c;瑞芯微RK安卓Android主板GPIO按键配置方法&#xff0c;方便大家更好利用空闲IO&#xff01;由触觉智能Purple Pi OH鸿蒙开发板演示&#xff0c;搭载了瑞芯微RK3566四核处理器&#xff0c;树莓派卡片电脑设计&#xff0c;支持安卓Android、开源鸿蒙Open…...

Dify自定义工作流集成指南:对接阿里云百炼文生图API的实现方案

dify工作流的应用基本解释 dify应用发布相关地址&#xff1a;应用发布 | Dify 根据官方教程&#xff0c;我们可以看到dify自定义的工作流可以发布为----工具 这个教程将介绍如何通过工作流建立一个使用阿里云百炼文生图模型。 工具则可以给其他功能使用&#xff0c;如agent…...

前端项目配置 Nginx 全攻略

在前端开发中&#xff0c;项目开发完成后&#xff0c;如何高效、稳定地将其部署到生产环境是至关重要的一步。Nginx 作为一款轻量级、高性能的 Web 服务器和反向代理服务器&#xff0c;凭借其出色的性能和丰富的功能&#xff0c;成为了前端项目部署的首选方案。本文将详细介绍在…...

基于开源鸿蒙(OpenHarmony)的【智能家居综合应用】系统

基于开源鸿蒙OpenHarmony的智能家居综合应用系统 1. 智能安防与门禁系统1) 系统概述2) 系统架构3&#xff09;关键功能实现4&#xff09;安全策略5&#xff09;总结 2.环境智能调节系统1&#xff09;场景描述2&#xff09;技术实现3&#xff09;总结 3.健康管理与睡眠监测1&…...

电子电气架构 --- 主机厂电子电气架构演进

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...

物联网通信应用案例之《智慧农业》

案例概述 在智慧农业方面&#xff0c;一般的应用场景为可以自动检测温度湿度等一系列环境情况并且可以自动做出相应的处理措施如简单的浇水和温度控制等&#xff0c;且数据情况可远程查看&#xff0c;以及用户可以实现远程控制。 基本实现原理 传感器通过串口将数据传递到Wi…...

Java注解的原理

目录 问题: 作用&#xff1a; 原理&#xff1a; 注解的限制 拓展&#xff1a; 问题: 今天刷面经&#xff0c;发现自己不懂注解的原理&#xff0c;特此记录。 作用&#xff1a; 注解的作用主要是给编译器看的&#xff0c;让它帮忙生成一些代码&#xff0c;或者是帮忙检查…...

AI知识架构之神经网络

神经网络:这是整个内容的主题,是一种模拟人类大脑神经元结构和功能的计算模型,在人工智能领域广泛应用。基本概念:介绍神经网络相关的基础概念,为后续深入理解神经网络做铺垫。定义与起源: 神经网络是模拟人类大脑神经元结构和功能的计算模型,其起源于对生物神经系统的研…...

OpenGL 04--GLSL、数据类型、Uniform、着色器类

一、着色器 在 OpenGL 中&#xff0c;着色器&#xff08;Shader&#xff09;是运行在 GPU 上的程序&#xff0c;用于处理图形渲染管线中的不同阶段。 这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。着色器…...

学习笔记06——JVM调优

JVM 调优实战&#xff1a;性能优化的技巧与实战 在 Java 开发中&#xff0c;JVM&#xff08;Java Virtual Machine&#xff09;作为 Java 程序的运行环境&#xff0c;其性能直接影响到应用程序的响应速度和吞吐量。合理的 JVM 调优可以显著提升应用性能&#xff0c;降低延迟&a…...

深度学习(3)-TensorFlow入门(常数张量和变量)

低阶张量操作是所有现代机器学习的底层架构&#xff0c;可以转化为TensorFlow API。 张量&#xff0c;包括存储神经网络状态的特殊张量&#xff08;变量&#xff09;​。 张量运算&#xff0c;比如加法、relu、matmul。 反向传播&#xff0c;一种计算数学表达式梯度的方法&…...

3-2 WPS JS宏 工作簿的打开与保存(模板批量另存为工作)学习笔记

************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...

【GO】学习笔记

目录 学习链接 开发环境 开发工具 GVM - GO多版本部署 GOPATH 与 go.mod go常用命令 环境初始化 编译与运行 GDB -- GNU 调试器 基本语法与字符类型 关键字与标识符 格式化占位符 基本语法 初始值&零值&默认值 变量声明与赋值 _ 下划线的用法 字…...

【TypeScript】ts在vue中的使用

目录 一、Vue 3 TypeScript 1. 项目创建与配置 项目创建 关键配置文件 2.完整项目结构示例 3. 组件 Props 类型定义 4. 响应式数据与 Ref 5. Composition 函数复用 二、组件开发 1.组合式API&#xff08;Composition API&#xff09; 2.选项式API&#xff08;Options…...

2025前端框架最新组件解析与实战技巧:Vue与React的革新之路

作者&#xff1a;飞天大河豚 引言 2025年的前端开发领域&#xff0c;Vue与React依然是开发者最青睐的框架。随着Vue 3的全面普及和React 18的持续优化&#xff0c;两大框架在组件化开发、性能优化、工程化支持等方面均有显著突破。本文将从最新组件特性、使用场景和编码技巧三…...

Elasticsearch 的分布式架构原理:通俗易懂版

Elasticsearch 的分布式架构原理&#xff1a;通俗易懂版 Lucene 和 Elasticsearch 的前世今生 Lucene 是一个功能强大的搜索库&#xff0c;提供了高效的全文检索能力。然而&#xff0c;直接基于 Lucene 开发非常复杂&#xff0c;即使是简单的功能也需要编写大量的 Java 代码&…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

P10909 [蓝桥杯 2024 国 B] 立定跳远

# P10909 [蓝桥杯 2024 国 B] 立定跳远 ## 题目描述 在运动会上&#xff0c;小明从数轴的原点开始向正方向立定跳远。项目设置了 $n$ 个检查点 $a_1, a_2, \cdots , a_n$ 且 $a_i \ge a_{i−1} > 0$。小明必须先后跳跃到每个检查点上且只能跳跃到检查点上。同时&#xff0…...