vue-vue2脚手架5-TodoList案例（2）

最新推荐文章于 2024-03-29 13:50:28 发布
最新推荐文章于 2024-03-29 13:50:28 发布
阅读量749 收藏 1
点赞数
分类专栏： # vue2脚手架 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhougubei/article/details/121292566
版权

vue-vue2脚手架5-TodoList案例

vue-vue2脚手架5-TodoList案例（1）

删除按钮

以下是我的代码对button按钮注释

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

这里我前面给的静态资源有个问题 app里面 css文件时 scope 的，可以把scope删除
这里需要向上一篇文章讲的那样重复讲delete按钮添加

顶部代码：App.vue


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

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

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				todos:[
					{id:'001',title:'吃饭',done:true},
					{id:'002',title:'睡觉',done:false},
                    {id:'003',title:'玩游戏',done:true}
				]
			}
		},
        methods: {
			//添加一个todo
			addtodo(todo){
				
				console.log('APP.log',todo)
				this.todos.unshift(todo)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			}


		},
	}
</script>

中层：MyList.vue

在这里插入图片描述
底层：MyItem.vue

<template>
	<li>
		<label>
			<!-- <input type="checkbox"  :checked="todo.done"  @click="handckeck(todo.id)"/> -->
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<input type="checkbox"   v-model="todo.done" />
			
			<span>{{todo.title}}</span>
		</label>
		<button class="btn btn-danger"  @click="ondelete(todo.id)" >删除</button>
	</li>
</template>

<script>
	export default {
		name:'MyItem',
	
		props:['todo','deleteTodo'],

       methods: {
         ondelete(id){
               console.log("获取删除id",id)
                if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					this.deleteTodo(id)
				}

        }
	},
		
	}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>

这里 css代码 博主加了 hover时间，如果鼠标点击上去可以对按钮进行block

在这里插入图片描述

其实这种方法很繁琐！后面博主会将更加便利的方法，先从简单的开始

底部统计 reduce的使用

从上一篇将todos 传给 MyFooter.vue，进行数据的统计

底部代码 MyFooter.vue

<template >
	<div class="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成{{donetotal}}</span> / 全部{{todos.length}}
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
</template>
<script>
	export default {
		name:'MyFooter',

		props:['todos'],

		computed: {
            donetotal(){
				//  第一遍简单偏离方式
                // let i=0
                // this.todos.forEach((todo) => {
				// 	if(todo.done) i++

				// });
                // return i

            //   第二种写法
            //   const x=  this.todos.reduce((pre,current)=>{
			// 		console.log('@',pre,current)
			// 		return pre + (current.done ? 1 : 0)
            //     },0)
			//    return x

              //简写
               return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0) ,0)
           
                  
			}

		}
	}
</script>

底部全选框实现1

MyFooter.vue

<template >
	<div class="todo-footer">
        <label>
          <input type="checkbox"  :checked="isAll" @change="checkall"/>
        </label>
        <span>
          <span>已完成{{donetotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
</template>
<script>
	export default {
		name:'MyFooter',

		props:['todos','checkalltodo'],

		computed: {
             total(){
               return this.todos.length
            },

            donetotal(){
              //简写
               return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0) ,0)
             
			},
            isAll() {
                    console.log("那哦草" ,this.donetotal === this.total && this.total > 0)
                    return this.donetotal === this.total && this.total > 0
			}

		},
		methods: {
			checkall(e){
				console.log(e.target.checked)
                   this.checkalltodo(e.target.checked)
			}
		},
	}
</script>

App.vue


<template>

<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader :addtodo="addtodo"/>
      <MyList :todos="todos" :deleteTodo="deleteTodo"  />
      <MyFooter :todos="todos" :checkalltodo="checkalltodo"/>
      
    </div>
  </div>
</div>

</template>



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

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				todos:[
					{id:'001',title:'吃饭',done:true},
					{id:'002',title:'睡觉',done:false},
                    {id:'003',title:'玩游戏',done:true}
				]
			}
		},
        methods: {
			//添加一个todo
			addtodo(todo){
				
				console.log('APP.log',todo)
				this.todos.unshift(todo)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			// 全选/全不选
            checkalltodo(done){
               this.todos.forEach((todo)=>{
                todo.done=done
               })

			}

		},
	}
</script>

底部全选框升级2

升级版可以用   <input type="checkbox"  v-model="isAll" /> 来实现该操作
不过有个问题就是点击全选的时候会出现你没有set命令。类似java bean的属性

在这里插入图片描述

<template >
	<div class="todo-footer">
        <label>
        <!--  <input type="checkbox"  :checked="isAll" @change="checkall"/>  --> 

        <input type="checkbox"  v-model="isAll" />
        </label>
        <span>
          <span>已完成{{donetotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
</template>
<script>
	export default {
		name:'MyFooter',

		props:['todos','checkalltodo'],

		computed: {
             total(){
               return this.todos.length
            },

            donetotal(){
				
              //简写
               return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0) ,0)
             
			},
            isAll : {
                   get(){
                        return this.donetotal === this.total && this.total > 0
                    },
                   set(value){
                        this.checkalltodo(value)
                   } 
			}

		},
		methods: {

			checkall(e){
				console.log(e.target.checked)
                   this.checkalltodo(e.target.checked)
			}
		},
	}
</script>

前面说的 v-model 不好是因为他是直接修改了 props， 这里用的是 方法，是正规手段

清除已完成任务

 同上啊，这些操作

App.vue


<template>

<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader :addtodo="addtodo"/>
      <MyList :todos="todos" :deleteTodo="deleteTodo"  />
      <MyFooter :todos="todos" :checkalltodo="checkalltodo" :clearAllTodo="clearAllTodo" />
      
    </div>
  </div>
</div>

</template>



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

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				todos:[
					{id:'001',title:'吃饭',done:true},
					{id:'002',title:'睡觉',done:false},
                    {id:'003',title:'玩游戏',done:true}
				]
			}
		},
        methods: {
			//添加一个todo
			addtodo(todo){
				
				console.log('APP.log',todo)
				this.todos.unshift(todo)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			// 全选/全不选
            checkalltodo(done){
               this.todos.forEach((todo)=>{
                todo.done=done
               })

			},
			clearAllTodo(){
                 this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})

			}

		},
	}
</script>

MyFooter.vue

<template >
	<div class="todo-footer">
        <label>
        <!--  <input type="checkbox"  :checked="isAll" @change="checkall"/>  --> 

        <input type="checkbox"  v-model="isAll" />
        </label>
        <span>
          <span>已完成{{donetotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
      </div>
</template>
<script>
	export default {
		name:'MyFooter',

		props:['todos','checkalltodo','clearAllTodo'],

		computed: {
             total(){
               return this.todos.length
            },

            donetotal(){
				// diyiban
                // let i=0
                // this.todos.forEach((todo) => {
				// 	if(todo.done) i++

				// });
                // return i

            //   第二种写法
            //   const x=  this.todos.reduce((pre,current)=>{
			// 		console.log('@',pre,current)
			// 		return pre + (current.done ? 1 : 0)
            //     },0)
			//    return x

              //简写
               return this.todos.reduce((pre,current) => pre + (current.done ? 1 : 0) ,0)
             
			},
            isAll : {
                   get(){
                        return this.donetotal === this.total && this.total > 0
                    },
                   set(value){
                        this.checkalltodo(value)
                   } 
			}

		},
		methods: {

			checkall(e){
				console.log(e.target.checked)
                   this.checkalltodo(e.target.checked)
			},
			//清空所有已完成
            clearAll(){
				this.clearAllTodo()
             }
		},
	}
</script>

总结TodoList案例

  1. 组件化编码流程：
​	(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

​	(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

​			1).一个组件在用：放在组件自身即可。

​			2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

​	(3).实现交互：从绑定事件开始。
  1. props适用于：
    (1).父组件 ==> 子组件 通信
    (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
  1. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
  1. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

最终项目分享

飘然渡沧海
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue2+element+springboot+mybatis+jpa+mysql的学籍管理系统源码
06-03
本系统作为vue2初学者的入门系统，通过开发经典的《学籍管理系统》模拟项目，使vue2的初学者快速掌握从无到有的搭建一套vue2+element前端+spring boot后端+mysql数据库的前后端分离的现代主流项目架构。 全套资源包包括：vue前端源码、springboot后端源码、jdk、nvm安装包、nodejs安装包、MySQL安装包，学籍管理系统使用说明文档 详细介绍请参看：https://blog.csdn.net/leonMary/article/details/125110390
基于Vue的在线购物系统的设计与实现(论文+源码)_kaic
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
03-21 7695
随着互联网技术的不断发展，人们生活水平的不断提高，在此背景下，人们消费水平不断提高，我国零售业得到了快速发展，线下商场存在门面的租赁费，导致商品价格高，商品过多，人们购买商品需要消耗大量的时间去购买，再者商品性价比不高，且种类不够丰富。本文通过观察分析淘宝、京东、唯品会以及拼多多等多个平台，采用Vue.js技术和Mysql数据库以及JavaScript技术开发一款在线购物系统，为人们的生活购物服务，进一步促进我国电子商务的发展，从开发的过程中，掌握软件工程的思想，并能够根据开发经验，提出有意义的建议。
基于ssm+vue的外卖点餐系统论文
qq_q992250277的博客
12-14 1803
通过对外卖点餐系统的开发，让我深刻明白开发一个程序软件需要经历的流程，当确定要开发一个外卖点餐系统的程序时，我在开发期间，对其功能进行合理的需求分析，然后才是程序软件的功能的框架设计，数据库的实体与数据表设计，程序软件的功能详细界面实现，以及程序的功能测试等进行全方位的细致考虑，虽然在此过程中，各个环节都遇到了大大小小的困难，但是通过对这些问题进行反复的分析，深入的思考，借助各种相关文献资料提供的方法与解决思路成功解决面临的各个问题，最后成功的让我开发的外卖点餐系统得以正常运行。
vue网络工程毕业论文(毕设)课题大全
最新发布
Belinda44的博客
03-29 701
🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的java web缺少创新和亮点，往往达不到毕业答辩的要求，这两年不断有学弟学妹告诉学长自己做的java web管理系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设，学长分享5个优质java web毕业设计项目，需要的自取。题目1 : 基于SSM的网上租车系统🥇 题目综合评分(每项满分5分)难度系数：3分工作量：5分创新点：3分界面美化：5分开发语言：Java框架：ssmJDK版本：JDK1.8。
基于vue框架的移动端电子商务系统的设计与实现（毕业设计+论文）
qq405425197的专栏
02-18 1822
网络购物这一消费方式给人们生活带来的变化，除了购物场所的改变以外，更重要的是大大改变了传统的消费行为习惯，无论是否在网上购物，上网查看产品的相关信息，已经成为购物决策环节的重要组成部分，高速发展的互联网技术为网上购物系统的发展提供了强大的动力，同时，网上购物的环境已经逐步得到了改善
vue - Vue脚手架-TodoList案例.doc
07-09
Vue脚手架 TodoList 案例 本文档主要介绍了使用 Vue 脚手架实现 TodoList 案例的步骤和关键技术点。该案例旨在帮助开发者熟悉 Vue 组件化编码流程，并掌握 Vue 的一些重要方法。 一、 TodoList 案例的主要步骤 1....
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
vue-todolist，vue小目标列表实现，vue任务列表实现
12-09
vue-todolist包括三个版本，一个是脚手架的，一个是普通vue的，一个是使用vue组件编写的。不能用的，一定是环境没有搭配好，我的博客里会有相关的介绍和本资源的简介图，可以看一下。（脚手架删除少传了一个参数 ...
vue-todolist
03-25
在实际操作中，你可以从`vue-todolist-master`文件夹中的`src`目录开始探索。这里通常包含`App.vue`（主组件）、`components`（存放自定义组件）和`main.js`（入口文件）等。通过阅读源代码并尝试修改，你可以逐步...
vue3+ts入门（todolist案例）
02-10
在这个"vue3+ts入门（todolist案例）"中，我们将探讨如何结合 Vue3 和 TypeScript 创建一个简单的待办事项列表应用，即 Todolist。 1. **Vue3 的主要更新**： - **Composition API**：Vue3 引入了 Composition API...
【035】基于Vue的电商推荐管理系统（含源码数据库、超详细论文）
lllbn的博客
02-26 2685
电商推荐系统的开发过程中，采用B / S架构，主要使用技术进行开发，结合最新流行的Nodejs技术。该电商推荐系统包括用户和管理员。其主要功能包括管理员：首页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理；随着社会的发展，计算机的优势和普及使得电商推荐系统的开发成为必需。电商推荐系统主要是借助计算机，通过对电商推荐信息进行管理。本论文对电商推荐系统的发展背景进行详细的介绍，并且对系统开发技术进行介绍，然后对系统进行需求分析，对电商推荐系统业务流程、系统结构以及数据都进行详细说明。
Vue简介
csdn_jwdlh的博客
04-26 606
Vue介绍 什么是Vue? 一套用于构建用户界面的渐进式javascript框架 渐进式：自底向上增量开发的设计 vue特点： 采用组件化模式，提高代码复用率，且让代码更好的维护 声明式编码，让编码人员无需直接操作DOM，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点 MVVM模型 vue 是 MVVM 模式的框架 Vue实例 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 <div id="root"></div> <scr
ssm基于VUE.js的在线教育系统论文
QQ1928499906的博客
01-14 1175
2.1系统开发使用的关键技术本系统在开发中选择B/S框架进行设计，语言采用Java，数据库采用Mysql，并在设计中加入VUE.js技术，本系统的运行环境为Idea。2.2 VUE.js技术介绍VUE.js是一个用来开发前台界面的JavaScript框架，体积非常的小，所以运行效率非常的高，可以直接通过虚拟设定的 DOM进行各种JavaScript计算，因为操作过程中相当于是一个预处理，所以并没有真实的DOM，也可以称作为一个虚拟的DOM。
信息管理VUE毕业设计项目分享【含源码+论文】
WEB_DC的博客
03-16 336
🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的java web缺少创新和亮点，往往达不到毕业答辩的要求，这两年不断有学弟学妹告诉学长自己做的java web管理系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设，学长分享5个优质java web毕业设计项目，需要的自取。题目1 : 基于SSM的网上租车系统🥇 题目综合评分(每项满分5分)难度系数：3分工作量：5分创新点：3分界面美化：5分开发语言：Java框架：ssmJDK版本：JDK1.8。
vue的简介
qq_52340496的博客
03-25 1544
1.vue是一套用于构建用户界面的渐进式js框架（就是将我们看到的数据用界面展现出来） 2.特点:①采用组件化模式，提高代码复用率和让代码更好维护 ②声明式编码，让编码人员无需直接操作dom，提高开发效率 ③使用虚拟dom和优秀的diff算法，尽量复用dom节点 ...
1.vue 2 简介(入门)。
weixin_45735755的博客
07-18 252
入门级 Vue 简介
vue2简单理解
m0_70901094的博客
09-07 754
vue2
Vue介绍 -2
weixin_45905671的博客
03-31 230
使用JavaScript表达式 在使用了v-bind的html属性，或者使用了{{}}的文本。我们还可以执行一个JavaScript表达式 注意，只能是JavaScript表达式，不能是语句，比如var a=1;a=2;这样的是js语句，不是表达式了 条件判断 在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的 有时候我们想要在一个条件中加载多...
Vue2 必备的50个知识点
qq_37916164的博客
03-23 5989
1、Vue的优点？Vue的缺点？ 优点： 渐进式 组件化开发 虚拟dom 响应式数据 单页面路由 数据与视图分开 缺点： 单页面不利于seo 不兼容IE 首屏加载时间长 2、为什么说Vue是一个渐进式框架？ Vue的全家桶，你可以选择不用，或者只选几样去用，比如不用vuex 3、Vue跟React的异同点？ 相同点： 都是单向数据流 都使用了虚拟DOM的技术 都支持SSR ..
vue-admin-template脚手架包
08-04
关于"vue-admin-template"脚手架包，它是一个基于Vue.js和Element UI的后台管理系统脚手架，提供了一套完整的开发模板和常用的功能组件，可以快速搭建一个现代化的后台管理系统。 它具有以下特点： - 基于最新的Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值