Vue 的 JSX 写法详解

1. 什么是 JSX

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 XML 的结构。在 Vue 中使用 JSX 可以让你更灵活地编写组件模板，尤其是在处理复杂的逻辑和动态内容时。

2. 安装和配置

在 Vue 3 中使用 JSX 需要安装相应的插件。首先确保你已经安装了 @vue/babel-plugin-jsx：

npm install @vue/babel-plugin-jsx --save-dev

然后在 Babel 配置文件（如 .babelrc 或 babel.config.js）中添加该插件：

module.exports = {
  plugins: ['@vue/babel-plugin-jsx']
}

3. 基本语法

• 组件定义：在 Vue 3 中，可以使用 defineComponent 来定义一个使用 JSX 的组件。

<template>
  <!-- 这里不会使用传统模板 -->
</template>

<script lang="jsx">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () => (
      <div>
        <h1>Hello, JSX!</h1>
      </div>
    );
  }
});
</script>

• 动态属性绑定：使用 {} 来插入 JavaScript 表达式。

<template>
  <!-- 这里不会使用传统模板 -->
</template>

<script lang="jsx">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello from JSX');
    return () => (
      <div>
        <p>{message.value}</p>
      </div>
    );
  }
});
</script>

• 事件绑定：使用 on 前缀来绑定事件。

<template>
  <!-- 这里不会使用传统模板 -->
</template>

<script lang="jsx">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => {
      console.log('Button clicked');
    };
    return () => (
      <div>
        <button onClick={handleClick}>Click me</button>
      </div>
    );
  }
});
</script>

• 条件渲染：可以使用 JavaScript 的条件语句来实现条件渲染。

<template>
  <!-- 这里不会使用传统模板 -->
</template>

<script lang="jsx">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isVisible = ref(true);
    return () => (
      <div>
        {isVisible.value ? <p>Visible content</p> : null}
      </div>
    );
  }
});
</script>

• 循环渲染：使用 map 方法来实现循环渲染。

<template>
  <!-- 这里不会使用传统模板 -->
</template>

<script lang="jsx">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3']);
    return () => (
      <div>
        {items.value.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
      </div>
    );
  }
});
</script>