VUE小案例---todolist

shakalaca

已于 2022-03-11 19:27:42 修改

阅读量3.3k

点赞数 2

分类专栏：前端学习文章标签： vue.js 前端 javascript

于 2022-03-11 16:29:57 首次发布

本文链接：https://blog.youkuaiyun.com/CathyleeQ/article/details/123413082

版权

这篇博客详细介绍了使用Vue.js开发TodoList应用的过程，包括模块拆分、静态页面搭建、动态组件的实现，如动态显示数据、子组件与父组件间的通信，以及全选删除功能。此外，还强调了组件化编码的重要性，如组件按功能拆分和状态提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 模块拆分

在这里插入图片描述

2.静态页面搭建

2.1.案例目录

在这里插入图片描述

2.2.主页 index.html

在这里插入图片描述

2.3.main.js

在这里插入图片描述

2.4.App.vue

在这里插入图片描述

2.5.MyHeader.vue

在这里插入图片描述

2.6.MyList.vue

在这里插入图片描述

2.7.MyItem.vue

在这里插入图片描述

2.8.MyFooter.vue

在这里插入图片描述

2.9.静态页面效果展示

在这里插入图片描述

3.动态组件

3.1动态显示初始化数据

3.1.1 MyList.vue

定义数据：数组 todos {title, done}数组是存储要做的事的量，对象存储要做的事。
接收数据，v-for遍历数组

<template>
  <ul class="todo-main">
    <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"/>
  </ul>
</template>
<script>
    import MyItem from './MyItem.vue'
    export default {
   
      name: 'MyList',
      components: {
   MyItem},
      data(){
   
        return{
   
          todos:[
              {
   id:'001',title:'drinking',done:true},
              {
   id:'002',title:'smoking',done:true},
              {
   id:'003',title:'driving',done:true}
          ]
        }
      }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

3.1.2 MyItem.vue

得到数据，已完成事项可选

<template>
     <li>
      <label>
         <input type="checkbox" :checked="todo.done"/        <span>{
   {
   todo.title}}</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>
    </li>
</template>
<script>
    export default {
   
      name: 'MyItem',
      //声明接受todo对象
      props:['todo']
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>...

3.1.3 效果展示

在这里插入图片描述

3.2动态交互

3.2.1实现子组件向父组件传数据

基本实现方法：在父组件先写一个接受函数，再把这个接受函数传给子组件，子组件利用这个函数接收数据，从而实现传递。

3.2.1.1父组件：App

<template>
  <div id="root">
    <div class="todo-container">
        <div class="todo-wrap">
          <MyHeader : addTodo="addTodo"/>
          <MyList :todos="todos" />
          <MyFooter />
      </div>

最低0.47元/天解锁文章