todo项目实现及总结

.搭建界面，主要用到了css，和less

1.当时想要用的是sass实现鼠标放在item上，就会出现X，但是不知道为什么sass引入一直报错，后来，从百度上找到了解决方案，可以引入了，但是还是用不了，然后就用了less实现了
2.由于组合选择器比id选择器优先级高，所以我当时active样式一直加不进去，后来改成了标签选择器

css选择器优先级从大到小： id>class>标签>子代>后代>伪类
组合选择器优先级最高

实现功能

1.input框输入，添加一个item，addTodo

定义方法
<inputclass="new-todo"@keyup.enter="addTodo"placeholder="What needs to be done?"/>

methods方法
addTodo(event) {let content = event.target.value.trim();//获取输入框里值，并且去除空格if (content) {this.todos.unshift({id: ++this.id,content: content,completed: false,});event.target.value = "";//添加一个item后要将input框清空}},

unshift() 方法将新项添加到数组的开头，并返回新的长度

2.点击按钮删除item

1定义方法

<button @click="delItem">X</button>

根据item的id删除选中的item
delItem(id) {let index = this.todos.findIndex((temp) => temp.id == id);this.todos.splice(index, 1);//根据id删除item},

数组的方法filter,push,pop,slice,map,unshift，shift
push() :从后面添加元素，返回值为添加完后的数组的长度
unshift():从前面添加元素, 返回值是添加完后的数组的长度
shift() 从前面删除元素，只能删除一个返回值是删除的元素
pop() 从后面删除元素，只能是一个，返回值是删除的元素
splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组
map(callback) 映射数组(遍历数组),有return 返回一个新数组。
filter(callback)过滤数组，返回一个满足要求的数组
splice() 方法向/从数组添加/删除项目，并返回删除的项目

1.箭头函数用法
这个是匿名函数：小括号，箭头，函数体，参数a
((a) => {
函数体
}；
)
2.当函数体内只有一行代码,一个参数时还可以写成这样
(a=> 函数)
2.箭头函数可以替换if，else使代码更加整洁

(function(a){if(a>30){return true}else{return false}
})
//箭头函数
(a=>a>30?true:false)

3.active样式的切换，动态的添加class=“active”

:class动态切换class

 <buttonv-for="(item, i) in filterTodo"//遍历数组，item是all,active,completed:key="i"@click="toggleItem(item)"//点击切换选中的状态:class="{ active :filter === item }"//绑定当前状态>{{ item }}</button>

 data(){return{filterTodo: ["all", "active", "completed"],//定义数组filterTodo}},

toggleItem(state) {this.filter = state;//将当前的状态赋值给filter},

4.计算属性过滤选中的状态filteredTodos

v-for="(todo, index) in filteredTodos"

computed:{filteredTodos() {if (this.filter === "all") {return this.todos;//返回全部的} else if (this.filter === "active") {return this.todos.filter((temp) => !temp.completed);//返回没有完成的} else {return this.todos.filter((temp) => temp.completed);//返回完成的}},},

filter(callback)过滤数组，返回一个满足要求的数组

5.删除所有已完成的item clearCompleted

<button @click="clearCompleted">clearCompleted</button>

methods方法
clearCompleted() {this.todos = this.todos.filter((item) => !item.completed);//将所有没完成的item赋值给todos，页面显示就是没有已完成的了},

todo项目实现及总结相关推荐

五十五、uniapp简单实现Todo项目（慕课网）
@Author:Runsen 本次案例来源于:<uni-app 5小时快速入门>,出品人:meHaoTian 通过Huilder X.创建Todo项目. 这里manifest.json需要 ...
todo项目开发_Facebook的TODO项目，巴西的Coursera，Drupal等
todo项目开发在本周的开源新闻摘要中,我们介绍了Facebook的TODO项目,Coursera在巴西推出的产品,迁移到Drupal的政府等等! 开源新闻让您阅读愉快. 2014年9月13日至19 ...
使用webpack、vue来开发一个todo项目
luxurybug有话说: 我是从有道云笔记中粘贴过来的,图片不显示, 请点击链接,查看完整笔记:点我!有道云笔记 part1.开始,简单的配置一.准备工作 webpack webpack-dev- ...
Android开源项目分类汇总-转载
太长了,还是转载吧... 今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源项目分类汇总,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有 ...
Android开源项目分类汇总[转]
Android开源项目分类汇总如果你也对开源实现库的实现原理感兴趣,欢迎 Star 和 Fork Android优秀开源项目实现原理解析欢迎加入 QQ 交流群:383537512(入群理由需要填写 ...
小小TODO标识，你用对了吗？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 日拱一兵来源 | 公众号「日拱一兵」集合! ...
Android开源项目--分类汇总
为什么80%的码农都做不了架构师?>>> 转自:https://github.com/Trinea/android-open-project Android开源项目第一篇--个 ...
Taro多端开发实现原理与项目实战(二)
Taro多端开发实现原理与项目实战(二) 多端电商平台项目概述及开发准备学习了前面的基础知识和进阶后是否跃跃欲试?我们准备了一个电商平台的项目来和大家一起实践使用 Taro 开发电商平台. 项目概述 ...
Taro多端开发实现原理与项目实战(一)
Taro 多端开发实现原理与项目实战前端多端统一开发背景与趋势介绍背景「大前端」不仅会成为移动开发与 Web 前端的发展趋势,也会是未来的显示设备终端的开发技术趋势? 越来越多的业内人士对此表示 ...