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!

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript