JSX 高级学习第二篇：以 Vue 3 为例

在第一篇文章中，我们介绍了 JSX 在 Vue 3 中的基础用法。现在，让我们深入了解一些高级特性和用法。

条件渲染

在 JSX 中，你可以使用 JavaScript 的条件语句进行条件渲染。例如：

jsx 复制代码

export default {
  setup() {
    const showButton = ref(true);

    return () => (
      <div>
        {showButton.value ? <button>Visible Button</button> : <span>Button is hidden</span>}
      </div>
    );
  },
};

列表渲染

你也可以使用 map 函数进行列表渲染：

jsx 复制代码

export default {
  setup() {
    const items = ref([1, 2, 3]);

    return () => (
      <ul>
        {items.value.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  },
};

事件处理

在 JSX 中，你可以直接使用原生的 DOM 事件：

jsx 复制代码

export default {
  setup() {
    const handleClick = () => {
      alert('Button clicked!');
    };

    return () => (
      <button onClick={handleClick}>Click Me!</button>
    );
  },
};

自定义组件

你可以像使用原生 HTML 元素一样使用自定义 Vue 组件：

jsx 复制代码

import MyComponent from './MyComponent.jsx';

export default {
  setup() {
    return () => (
      <MyComponent prop1="value1" prop2="value2" />
    );
  },
};

使用 v-model

在 Vue 3 中，你可以使用 vModel 属性来模拟 v-model 的行为：

jsx 复制代码

import { ref } from 'vue';

export default {
  setup() {
    const text = ref('');

    return () => (
      <input vModel={text.value} />
    );
  },
};

总结

在这篇文章中，我们探讨了 JSX 在 Vue 3 中的高级用法，包括条件渲染、列表渲染、事件处理等。这些高级特性使得 JSX 成为一个非常强大和灵活的工具，特别是在与 Vue 3 的 setup 函数结合使用时。

下一篇文章中，我们将通过一个综合示例来展示如何将这些高级特性结合起来使用。希望这篇文章能帮助你更深入地了解 Vue 3 和 JSX！