php增删改查crud,一起学Vue：CRUD(增删改查)

目标

使用Vue构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。

效果页面

比如我们要实现这样列表、新增、编辑三个页面：

列表页面

image

新增页面

image

编辑页面

image

我们把这些用户信息保存到Todos的数组中，然后增删改查就在这个数组上进行：

Todos: [{

Name: "遛狗"

},

{

Name: "跑步"

}

]

我们在这里一共要实现TodoList.vue、TodoAdd.vue、TodoEdit.vue三个组件，分别对应列表页面、新增页面、编辑页面的处理

列表功能

首先，在TodoList.vue中提供一个setTodos方法，将需要展示的数据给了数组Todos：

setTodos(arr) {

this.Todos = JSON.parse(JSON.stringify(arr));

}

然后，在html中使用v-for把Todos数组渲染出来：

{{index+1}}{{item.Name}}

编辑

删除

新增功能

首先，在TodoList.vue中提供一个新增按钮及新增页面组件：

新增

接下来，TodoList.vue中提供addTodo方法，控制TodoAdd页面是否显示：

addTodo() {

this.addDialogVisible = true;

},

接下来，在TodoAdd.vue中提供一个save和cancel方法，分别调用TodoList.vue中的createTodo和cancel方法：

save() {

this.$emit('save', this.selectedItem);

},

cancel() {

this.$emit('cancel');

}

最后，我们分别提供createTodo方法，主要使用push方法，把信息添加到Todos数组的最后：

createTodo(item) {

this.Todos.push(item);

this.setTodos(this.Todos);

this.selectedIndex = -1;

this.selectedItem = {}

this.addDialogVisible = false;

},

修改功能

首先，在TodoList.vue中提供一个编辑按钮及编辑页面组件：

编辑

接下来，TodoList.vue中提供editTodo方法，控制TodoEdit页面是否显示：

editTodo(index) {

this.selectedIndex = index;

this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));

this.editDialogVisible = true;

},

接下来，在TodoEdit.vue中提供一个save和cancel方法，分别调用TodoList.vue中的updateTodo和cancel方法：

save() {

this.$emit('save', this.selectedItem);

},

cancel() {

this.$emit('cancel');

}

最后，我们分别提供updateTodo方法，更新信息到Todos数组：

updateTodo(item) {

this.Todos[this.selectedIndex] = item;

this.setTodos(this.Todos);

this.selectedIndex = -1;

this.selectedItem = {}

this.editDialogVisible = false;

},

删除功能

在vue中提供一个deleteTodo方法，删除时，通过splice(index, 1)，可以删除index位置的数据，页面上的数据自动就会更新：

deleteTodo(index) {

this.Todos.splice(index, 1);

this.selectedIndex = -1;

this.selectedItem = {}

},

小结

目前为止，我们完成了Vue的CRUD，其实里面的难点不太多，主要是练习下组件间的数据与事件传递。