JSX 基础学习第一篇:以 Vue 3 为例

JSX(JavaScript XML)是一种 JavaScript 的语法扩展,用于描述 UI 结构。在 Vue 3 中,你可以使用 JSX 与 setup 函数结合,创建更加灵活和直观的组件。

准备工作

确保你已经安装了 Node.js 和 npm。然后,使用以下命令安装 Vue CLI:

bash 复制代码
npm install -g @vue/cli

创建一个新的 Vue 3 项目:

bash 复制代码
vue create my-jsx-project

在提示中选择 Vue 3。

安装必要依赖

为了在 Vue 3 中使用 JSX,你需要安装 @vue/babel-plugin-jsx

bash 复制代码
npm install @vue/babel-plugin-jsx --save-dev

然后,在 babel.config.js 文件中添加这个插件:

javascript 复制代码
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: ['@vue/babel-plugin-jsx'],
};

使用 JSX 创建组件

src/components 目录下,创建一个名为 MyButton.jsx 的文件,并添加以下内容:

jsx 复制代码
export default {
  setup() {
    return () => (
      <button>Click Me!</button>
    );
  },
};

在这个例子中,我们使用 setup 函数返回一个渲染函数,该函数使用 JSX 描述 UI。

在父组件中使用 JSX 组件

src/App.vue 文件中,你可以这样使用 MyButton 组件:

vue 复制代码
<template>
  <div>
    <MyButton />
  </div>
</template>

<script setup>
import MyButton from './components/MyButton.jsx';

// 其他逻辑
</script>

或者,你也可以在 setup 函数中使用 JSX:

jsx 复制代码
<script setup>
import { ref } from 'vue';
import MyButton from './components/MyButton.jsx';

const count = ref(0);

const increment = () => {
  count.value++;
};

</script>

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
    <MyButton />
  </div>
</template>

总结

在这篇文章中,我们介绍了如何在 Vue 3 中使用 JSX,以及如何创建和使用 JSX 组件。JSX 提供了一种更加灵活和直观的方式来描述 UI,特别是在与 setup 函数结合使用时。

下一篇文章中,我们将深入探讨 JSX 的高级特性和用法。希望这篇文章能帮助你入门 Vue 3 和 JSX!

相关推荐
im_AMBER17 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦43 分钟前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码44 分钟前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead2 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室3 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia3 小时前
02--CSS基础
前端·css
kyle~3 小时前
Qt---setAttribute设置控件或窗口的内部属性
服务器·前端·c++·qt