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!

相关推荐
祝余呀5 分钟前
HTML初学者第三天
前端·html
就爱瞎逛21 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81625 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者39 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端