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

有问题请咨询gpt2023-10-25 7:01

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！