VUE小案例---todolist

原创 已于 2022-03-11 19:27:42 修改 · 3.4k 阅读 · 32 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

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

文章目录

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>
    </div>
  </div>
</template>

<script>
    import MyHeader  from './components/MyHeader.vue'
    import MyFooter from './components/MyFooter.vue'
    import MyList  from './components/MyList.vue'

    export default {
        name: 'App',
        components: {MyHeader,MyFooter,MyList},
        data(){
        return{
          todos:[
              {id:'001',title:'drinking',done:true},
              {id:'002',title:'smoking',done:true},
              {id:'003',title:'driving',done:true}
          ]
        }
        },
        methods: {
          addTodo(todoObj){
          this.todos.unshift(todoObj)//要传递的函数
          }
        }
    }

</script>
3.2.1.2子组件：MyHeader
<script>
    import {nanoid} from 'nanoid'
    export default {
        name: 'MyHeader ',
        props:['addTodo'],
        methods: {
            add(){
                  //包装成todo对像
                  const todoObj = {id:nanoid(),title: e.target.value,done:false}
                  this.addTodo(todoObj)
                }
            }  
  }
  
</script>
3.2.1.3效果展示：从输入框中输入数据并增加item。

在这里插入图片描述

3.2.2三代组件间传递数据

3.2.2.1App.vue

在APP中写checkTodo方法，先传给MyList，再通过MyList传给MyItem

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

<script>
    import MyHeader  from './components/MyHeader.vue'
    import MyFooter from './components/MyFooter.vue'
    import MyList  from './components/MyList.vue'

    export default {
        name: 'App',
        components: {MyHeader,MyFooter,MyList},
        data(){
        return{
          todos:[
              {id:'001',title:'drinking',done:true},
              {id:'002',title:'smoking',done:true},
              {id:'003',title:'driving',done:true}
          ]
        }
        },
        methods: {
          //添加todo
          addTodo(todoObj){
          this.todos.unshift(todoObj)
          },
          //勾选或者取消勾选
           checkTodo(id){
            this.todos.forEach(todo => {
            if(todo.id === id) todo.done = !todo.done
          });
        }
      }    
    }

</script>
3.2.2.3MyList
<template>
  <ul class="todo-main">
    <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo"/>
    
  </ul>
</template>

<script>
    import MyItem from './MyItem.vue'
    export default {
      name: 'MyList',
      components: {MyItem},
     props:['todos','checkTodo']
    }
</script>
3.2.2.3MyItem
<template>
     <li>
      <label>
        <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
        <span>{{todo.title}}</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>
    </li>
</template>
<script>
    export default {
      name: 'MyItem',
      //声明接受todo对象
      props:['todo','checkTodo'],
      methods:{
        handleCheck(id){
          this.checkTodo(id)
        }
      }
    }
</script>
3.2.2.4效果展示：勾选能够改变item的值

在这里插入图片描述
在这里插入图片描述

3.2.2.5注意
  • v-model也能实现通过勾选使得todo的值改变，但是不推荐，因为props传入的值不可改变，vue只能识别深度的改变，但其实用v-model已经改变props接受的todo的值，所以不推荐。
  • props，methods，data，computed都是在一个VC里面，所以函数名不能相同。

3.2.3实现底部全选，删除

3.2.3.1App.vue
<template>
  <!-- <div id="root"> -->
    <div class="todo-container">
        <div class="todo-wrap">
          <MyHeader :addTodo="addTodo"/>
          <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
          <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
      </div>
    </div>
 <!--  </div> -->
</template>

<script>
    import MyHeader  from './components/MyHeader.vue'
    import MyFooter from './components/MyFooter.vue'
    import MyList  from './components/MyList.vue'

    export default {
        name: 'App',
        components: {MyHeader,MyFooter,MyList},
        data(){
          return{
            todos:[
                {id:'001',title:'drinking',done:true},
                {id:'002',title:'smoking',done:true},
                {id:'003',title:'driving',done:true}
            ]
          }
        },
        methods: {
          //添加todo
          addTodo(todoObj){
          this.todos.unshift(todoObj)
          },
          //勾选或者取消勾选
           checkTodo(id){
            this.todos.forEach(todo => {
            if(todo.id === id) todo.done = !todo.done
          });
          },
           //删除一个todo
          deleteTodo(id){
            /* this.todos = this.todos.filter(
              (todo)=>{return todo.id !== id}
            ) */
            this.todos = this.todos.filter( todo => todo.id !== id)
          },
          //取消或全选todo
          checkAllTodo(done){
            this.todos.forEach((todo)=>{todo.done = done})
          },
          clearAllTodo(){
            this.todos = this.todos.filter( (todo)=>{
              return !todo.done
            })
          }         
        }
      }
</script>
3.2.3.1MyFooter.vue
<template>
  <div class="todo-footer" v-show="total" >
        <label>
         <!--  <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
          <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
          <span>已完成{{doneTodo}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll" >清除已完成任务</button>
      </div>
</template>
<script>
//import { set } from 'vue/types/umd'
    export default {
      name: 'MyFooter',
      props:['todos','checkAllTodo','clearAllTodo'],
      computed:{
        total(){
          return this.todos.length
        },
        //计算总共完成了多少，使用reduce方法。
        doneTodo(){      
              return this.todos.reduce(  (pre,todo)=> pre + (todo.done ? 1:0),0    )
        },
        isAll:{
          get(){
              return this.total === this.doneTodo && this.total >0
          },
          set(value){
                this.checkAllTodo(value)
          }     
        }         
      },
      methods:{
        clearAll(){
          this.clearAllTodo()
        }   
      } 
 }
</script>

3.2.4利用浏览器存储的版本App.vue

<script>
  export default {
    data(){
      return {
        // 从localStorage读取todos
        todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')  
    watch: { //监视
      todos:{
        deep: true, // 深度监视
        handler: function(value){
          // 将todos最新的值的json数据，保存到localStorage
          window.localStorage.setItem('todos_key', JSON.stringify(value))
        }
      }
    },   
  }
</script>

4.案例总结

总的来说本次案例注重细节，基本操作理解。
首先要学会的是组件化编码流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件：
1).一个组件单独用：放在本组件。

2). 一些组件共用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。

Vue | TodoList 案例【完整过程】
不爱吃菜的菜菜的博客
07-19 2937
是要渲染的数据，一开始存放在List里面，然后发现我们现在还没有学从Header传数据到List，所以现在把要渲染的数据放到App.vue里面。这里是todo案例，包含你要做的事情，是否完成，所以用对象来包裹最好，每一件事情item都是一个对象，所有事情list用数组来存放。父亲需要提前给儿子一个函数[props]，儿子再调用这个函数，函数的定义本身在父亲里，父亲就能收到参数了。每一个事情都是独一的，生成的id也是，为了简便，引入了。考虑数据的类型，名称，以及怎么存放。，里面的每一个对象为。........
Vue案例之实现ToDolist
a1901149的博客
03-29 784
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽**
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
vue的todoList案例
m0_55916923的博客
08-30 1551
todolist案例
Vue实例-Todo-list案例
anxiangzsq的博客
08-10 1625
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
vue-todolist:Vue-todolist
03-13
这个应用可以帮助用户管理日常任务，提供添加、删除和状态切换等功能，是学习Vue基础和实践的一个经典案例。 首先，项目的初始化工作依赖于`yarn install`命令。这会读取项目根目录下的`package.json`文件，安装...
vue综合小练习-todolist案例
最新发布
05-29
vue技术todolist小案例，实现代办事项的增删改查。包含了vuex状态管理等技术，功能齐全，适合新手小白使用。推荐下载！！！！！！！！！！！！！！！！！！！！！！！！ 阅读建议：不仅是代码编写实现也更注重内容上...
精选资源
vue - Vue脚手架-TodoList案例.doc
07-09
Vue脚手架 TodoList 案例 本文档主要介绍了使用 Vue 脚手架实现 TodoList 案例的步骤和关键技术点。该案例旨在帮助开发者熟悉 Vue 组件化编码流程，并掌握 Vue 的一些重要方法。 一、 TodoList 案例的主要步骤 1....
vue-json-server-todolist
05-14
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
vue-todolist案例
03-08
在这个"vue-todolist"案例中，我们可以看到一个基于Vue的简单待办事项列表应用。这个案例涵盖了Vue的基础知识，包括组件化开发、数据绑定、事件处理等核心概念。 1. **组件化开发**：Vue的核心特性之一就是组件化，...
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
Vue实现简单ToDolist案例
Huang_DW的博客
07-01 627
Vue实现简单ToDolist案例 <template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3&
【Vue组件之TodoList案例】
baicaixinhuaile的博客
06-16 548
vue组件todolist案例
Vue实现 TodoList
X-77
12-29 6513
手把手教你完成TodoList，定制专属待办事项！
基于vue的todolist案例
咖啡壶的博客
12-10 1927
基于vue的todolist项目
Vue：实现TodoList案例（尚硅谷）
热门推荐
做一只猫的博客
08-04 1万+
TodoList案例
Vue 学习笔记07：Todo-list 案例
iFulling的博客
03-29 1269
Todo-list 案例一、组件化编码流程二、props 扩展三、webStorage四、自定义事件五、全局事件总线六、消息订阅与发布七、nextTick八、案例代码1. Header2. List3. Item4. Footer5. App.vue6. main.js 一、组件化编码流程 拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突。 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件再用： （1）一个组件在用：放在组件自身即可。 （2）一些组件再用：放在他们共同
Vue TodoList案例
Errol's Blog
04-02 1803
Vue TodoList案例
Vue技术—TodoList案例
u013140948的博客
02-14 873
App.vue <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addtodo="addtodo"/> <MyList :todolist="todolist" :checktodo="checktodo" :deltodo="deltodo"/>
Vue TodoList案例：功能完整实现指南
【标签】部分提到了“Vue TodoList案例 Vue案例”，这意味着这个案例是针对Vue.js框架的初学者或者是希望了解如何使用Vue.js构建实际应用的开发者设计的。标签说明了案例的适用人群和它所包含的主要内容。 【压缩...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值