一起学 Vue：CRUD（增删改查）

在 web 开发中，CRUD 是最基础的操作之一，它即增加、查询、更新和删除（Create, Read, Update 和 Delete）数据操作。本文将带领大家学习 Vue.js 如何实现 CRUD 操作。

前置知识

在开始学习 Vue.js 中 CRUD 的实现，需要先掌握 Vue.js 基础知识，具体包括：

• Vue.js 模板语法与常用指令
• Vue.js 组件（组件生命周期、props、slot 等知识点）
• Vue.js 中的路由（使用 Vue Router 完成前端路由功能）

如果还没有掌握这些知识点，可以先查看官方文档，并在实践中熟练掌握。

CRUD 的 Vue 实现

接下来，我们会以简单的TODO List 示例来演示 CRUD 的 Vue 实现。

创建 TODO 组件

我们先创建一个 TODO 组件，用于展示待办事件的列表，和一个表单用于添加新的待办事项：

<template>
  <div>
    <h1>TODO List</h1>

    <form>
      <input type="text" v-model="newTodo" placeholder="Add Todo">
      <button @click.prevent="addTodo()">Add</button>
    </form>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: ['Item 1', 'Item 2', 'Item 3'],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push(this.newTodo)
      this.newTodo = ''
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

在上述代码中，我们定义了一个包含待办事项的数组（todos），并用 v-for 指令循环展示待办事项。同时，我们还添加了一个表单用于添加新的待办事项，并在添加按钮上定义 @click 事件来调用 addTodo 方法。该方法用于将新的待办事项添加到数组中，并清空输入框。

类似的，我们添加了一个 Delete 按钮，用于调用 deleteTodo 方法来删除数组中的某一项。

建立路由

在上面的代码中，我们已经实现了待办事项的增加和删除操作，接下来我们需要建立路由，以便用户在浏览器中访问时可以看到对应的页面。

我们可以使用 Vue Router 来实现路由的功能。我们可以新建一个 routes.js 文件，定义路由的路径和对应的组件：

import TodoList from './components/TodoList.vue'

export default [
  { path: '/', component: TodoList },
]

我们定义默认路由的访问路径为 '/'，当用户浏览到该路径时，我们让他们访问到这个 TodoList 组件。

接下来我们在 main.js 文件中引入路由和之前定义的组件，并配置路由：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.config.productionTip = false

Vue.use(VueRouter)

const router = new VueRouter({ routes })

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在上述代码中，我们首先导入了 VueRouter 和 routes 文件，并在 Vue 实例中注入路由。最后，在 new Vue() 中传入 router 参数，让路由生效。

使用子组件实现增加和删除

在上面的例子中，我们的代码比较混乱，并没有将代码分离出来。我们将使用 Vue 的组件机制拆分代码，真正实现复用组件。

首先，我们新建一个组件，用于展示“新增待办事项”的表单，也可以使用它来编辑待办事项：

<template>
  <form>
    <input type="text" v-model="newTodo" placeholder="Add Todo">
    <button @click.prevent="add()">Add</button>
  </form>
</template>

<script>
export default {
  props: {
    add: Function
  },
  data() {
    return {
      newTodo: ''
    }
  }
}
</script>

在上述代码中，我们将表单单独抽离出来，通过 props 传递 addTodo 方法来实现新增待办事项的功能。

我们还需要新建一个组件，用于展示待办事项列表中的删除按钮：

<template>
  <button @click="$emit('delete')">Delete</button>
</template>

在上述代码中，我们使用 $emit 方法来触发父组件的 deleteTodo 事件。

现在我们可以在 TodoList 组件中使用这两个组件：

<template>
  <div>
    <h1>TODO List</h1>

    <AddTodo @add="addTodo"></AddTodo>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <DeleteTodo @delete="deleteTodo(index)"></DeleteTodo>
      </li>
    </ul>
  </div>
</template>

<script>
import AddTodo from './AddTodo.vue'
import DeleteTodo from './DeleteTodo.vue'

export default {
  components: {
    AddTodo,
    DeleteTodo
  },
  data() {
    return {
      todos: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push(newTodo)
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

在上面的代码中，我们将表单和删除按钮取出，变成了两个独立的组件，而不是直接写在 TodoList 组件中。这使得我们的代码更加模块化和易于维护。需要注意的是，我们通过 $emit 方法，将 AddTodo 组件中的行为转移到了 TodoList 中（如新增待办事项），也将 DeleteTodo 组件中的行为（如删除待办事项）传递回 TodoList 中。

现在，我们完成了一个完整的 TODO List，可以通过路由访问，并且拥有增加、删除待办事项的功能。

结语

本文带领大家学习了 Vue.js 中的 CRUD 操作，让读者能够在实际项目中去实现这些功能。需要强调的是，在开发实际应用之前，我们需要深入学习 Vue.js 相关知识，并且在实际运用中熟练掌握。