JSX 综合示例：以 Vue 3 为例

有问题请咨询gpt2023-10-26 6:00

在前面的文章中，我们已经了解了 JSX 在 Vue 3 中的基础和高级用法。现在，让我们通过一个综合示例来展示如何将这些特性结合起来使用。

示例：待办事项应用

我们将创建一个简单的待办事项应用，其中包括添加、删除和标记完成的功能。

项目结构

App.jsx: 主组件
TodoItem.jsx: 待办事项组件

App.jsx

jsx 复制代码

import { ref } from 'vue';
import TodoItem from './TodoItem.jsx';

export default {
  setup() {
    const todos = ref([
      { id: 1, text: 'Learn Vue', completed: false },
      { id: 2, text: 'Learn JSX', completed: true },
    ]);

    const addTodo = () => {
      const id = todos.value.length ? Math.max(todos.value.map(t => t.id)) + 1 : 1;
      todos.value.push({ id, text: 'New Todo', completed: false });
    };

    const removeTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id);
    };

    const toggleTodo = (id) => {
      const todo = todos.value.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
    };

    return () => (
      <div>
        <h1>Todo List</h1>
        <button onClick={addTodo}>Add Todo</button>
        <ul>
          {todos.value.map(todo => (
            <TodoItem
              key={todo.id}
              todo={todo}
              onRemove={removeTodo}
              onToggle={toggleTodo}
            />
          ))}
        </ul>
      </div>
    );
  },
};

TodoItem.jsx

jsx 复制代码

export default {
  props: ['todo', 'onRemove', 'onToggle'],
  setup(props) {
    return () => (
      <li>
        <span style={{ textDecoration: props.todo.completed ? 'line-through' : 'none' }}>
          {props.todo.text}
        </span>
        <button onClick={() => props.onToggle(props.todo.id)}>Toggle</button>
        <button onClick={() => props.onRemove(props.todo.id)}>Remove</button>
      </li>
    );
  },
};

总结

在这个综合示例中，我们展示了如何使用 JSX 和 Vue 3 的 setup 函数来创建一个简单但功能完整的待办事项应用。我们使用了条件渲染、列表渲染和事件处理等高级特性。

这个示例应该能帮助你更好地理解如何在 Vue 3 中使用 JSX，以及如何将其与其他 Vue 3 特性结合起来创建复杂的应用。

希望这个综合示例和整个系列文章能帮助你更深入地了解 Vue 3 和 JSX 的强大功能！