一个基于 Vue.js 实现的简单增删改查（CRUD）案例

以下是一个基于 Vue.js 实现的简单增删改查（CRUD）案例，使用了 Vue CLI 创建项目，并假设你已经安装了 Vue CLI。这个案例将展示如何创建一个简单的待办事项列表（Todo List），实现添加、删除、编辑和查询功能。

步骤一：创建 Vue 项目

bash 复制代码

vue create todo-app
cd todo-app

步骤二：安装并引入 Element UI（可选，用于提供UI组件）

bash 复制代码

vue add element

步骤三：在 src/components 目录下创建 Todo.vue 文件

html 复制代码

<!-- Todo.vue -->
<template>
  <div class="todo-list">
    <el-input v-model="newTodoText" placeholder="请输入新的待办事项" @keyup.enter="addTodo"></el-input>
    <transition-group name="list" tag="p">
      <div v-for="(todo, index) in todos" :key="todo.id" :class="{ completed: todo.completed }">
        <span>{{ todo.text }}</span>
        <el-button size="mini" @click="toggleTodo(todo)">完成</el-button>
        <el-button size="mini" @click="editTodo(todo, index)">编辑</el-button>
        <el-button size="mini" type="danger" @click="removeTodo(index)">删除</el-button>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodoText: '',
      todos: [
        // 初始化一些示例数据（可选）
        { id: 1, text: '学习Vue', completed: false },
        { id: 2, text: '练习CRUD', completed: true }
      ]
    };
  },
  methods: {
    addTodo() {
      if (this.newTodoText.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodoText,
          completed: false
        });
        this.newTodoText = '';
      }
    },
    toggleTodo(todo) {
      todo.completed = !todo.completed;
    },
    editTodo(todo, index) {
      // 这里仅作示例，实际应用中可以弹出编辑框或使用v-model动态更新文本
      console.log('Edit:', todo, index);
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.todo-list {
  margin-bottom: 20px;
}

.completed {
  text-decoration: line-through;
}
</style>

步骤四：在 src/App.vue 中引入并使用 Todo 组件

html 复制代码

<!-- App.vue -->
<template>
  <div id="app">
    <Todo></Todo>
  </div>
</template>

<script>
import Todo from '@/components/Todo.vue';

export default {
  components: {
    Todo
  }
};
</script>

现在运行项目：

bash 复制代码

npm run serve

打开浏览器访问 http://localhost:8080，你应该能看到一个简单的待办事项列表，可以添加、删除、标记完成和编辑（此处仅打印编辑信息到控制台）待办事项。

注意：本示例使用了 Element UI 提供的 UI 组件，如果你没有安装 Element UI，可以使用原生 HTML 元素和 CSS 类替换，如使用 <input> 替换 <el-input>，使用 <button> 替换 <el-button>，并相应地调整样式和事件绑定。