Vue——创建待办事件列表

msmxsd

已于 2022-05-02 13:30:14 修改

阅读量1.2k

点赞数

分类专栏： Vue学习文章标签： Javascript 前端框架 vue

于 2022-04-16 17:45:48 首次发布

本文链接：https://blog.csdn.net/qq_45943210/article/details/124216108

版权

这篇博客详细介绍了如何使用Vue.js创建一个待办事项列表应用，包括App.vue、ToDoForm.vue、ToDoItem.vue和ToDoItemEditForm.vue组件的交互。通过事件监听和触发，实现了待办事项的添加、删除、编辑以及选中状态的管理。同时，讨论了Vue的refs特性，用于直接访问子组件或DOM节点，确保VDOM与真实DOM同步。最后，总结了Vue的事件绑定和生命周期方法的重要性。

摘要由CSDN通过智能技术生成

根据MDN网站学习记录笔记

创建一个待办事件列表实现待办事件的增删改以及选中功能，项目源码查看

一、主要vue文件梳理

App.vue

<to-do-form>监听：

todo-added事件当表单被提交时通过ToDoForm组件中的onSubmit()方法被回调到父组件app.vue

<to-do-item>监听：

checkbox-changed事件是从ToDoItem组件中的input标签被选中或取消的时候触发回调到app.vue
当按下“Delete”按钮时，由ToDoItem组件内部的deleteToDo()方法发出的item-deleted事件。结果:调用deleteToDo()方法删除关联的todo项。
当ToDoItemEditForm内部的onSubmit()方法发出的item-edited事件被成功监听时，ToDoItem组件内部的itemEdited()方法发出item-edited事件。最后在app.vue中调用editToDo()方法来更新关联的todo项目的标签。

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <h1>To-Do List</h1>
    <to-do-form @todo-added="addToDo"></to-do-form>
    
    <h2 i