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!

相关推荐
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端11 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧11 小时前
Promise 的使用
前端·javascript
NBtab11 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端