vue基于组件实现简单的todolist
把todolist拆分为header、footer、list三个模块
index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<section class="todoapp" id="app">
<div>
<my-header
@addrecord="parentAdd"
></my-header>
<section class="main">
<input
class="toggle-all"
type="checkbox"
v-model="all" >
<List
:act="filters"
@rmdata="parentRm"
>
</List>
</section>
<my-footer
v-show="!!arr.length"
:n="num"
:cn="cnum"
></my-footer>
</div>
</section>
<script src="js/vue.min.js"></script>
<script src="component/header.js"></script>
<script src="component/footer.js"></script>
<script src="component/list.js"></script>
<script>
/*
实现的一些功能：
1、输入内容回车添加内容
2、全选功能
3、勾选任意内容进行删除
4、根据hash不同，过滤渲染的数据
*/
new Vue({
el:'#app',
data:{
filters:[],//拿到过滤之后的数据
cunm:'/checked',//值根据hash值而改变，且会影响tab的active状态
arr:[
{
id:0,
city:'多伦多',
checked:true
},
{
id:1,
city:'悉尼',
checked:false
},
{
id:2,
city:'慕尼黑',
checked:false
},
{
id:3,
city:'雅加达',
checked:false
}
]
},
methods:{
//把传过来的数据添加到数组中
parentAdd(data){
this.arr.unshift(data)
},
//利用filter删除（把e.id等于id的过滤掉，留下不等于id的）
parentRm(id){
this.arr = this.arr.filter(e=>e.id!==id)
},
hashFn(){
//当hash改变时候，过滤数据
let H = window.location.hash.split('#')[1];
this.cnum = H;
this.filters = this.arr.filter(e=>{
switch(H){
case '/all':
return e;
break;
case '/unchecked':
return !e.checked;
break;
case '/checked':
return e.checked;
break;
default:
return e;
break
}
});
}
},
computed:{
all:{
get(){
//如果arr的length没有直接返回false
if(!this.arr.length){
return false;
}
//所有checked都是真的，就全部选中
return this.arr.every(e=>e.checked)
},
set(newVal){
//把所有的checked都等于newVal
return this.arr.forEach(e=>{
e.checked = newVal
})
}
},
num(){
//未选中的个数
return this.arr.filter(e=>!e.checked).length;
}
},
//当点击选中的时候，会改变arr的数据，当arr中的数据改变就重新过滤数组
watch:{
arr:{
handler(){
this.hashFn();
},
deep:true
}
},
created(){
let hash = window.location.hash;
//如果没有hash就给他设置
if(!hash){
window.location.hash = '#/all';
}else{
this.hashFn();
}
window.onhashchange = () =>{
this.hashFn();
}
}
});
</script>
</body>
</html>
header.js文件
Vue.component('my-header',{
template:`
<header class="header" >
<h1>todos</h1>
<input
class="new-todo"
placeholder="请输入内容"
@keyup.13="add"
v-model="val"
>
</header>
`,
data(){
return{
val:''
}
},
methods:{
add(){
//添加数据
if(this.val){
this.$emit('addrecord',{
id:+new Date,
city:this.val,
checked:false
})
this.val = ''//把原先输入的内容清空
}
}
}
})
list.js文件
Vue.component('list',{
//li中class是动态的，需要给个val.checked
template:`
<ul class="todo-list">
<li
v-for="(val,key) in act"
:class="{completed:val.checked}"
>
<div class="view">
<input
class="toggle"
type="checkbox"
v-model="val.checked"
>
<label>{{val.city}}</label>
<button class="destroy" @click="rm(val.id)"></button>
</div>
</li>
</ul>
`,
props:['act'],
methods:{
rm(id){
this.$emit('rmdata',id)
}
}
})
footer.js文件
Vue.component('my-footer',{
template:`
<footer class="footer">
<span class="todo-count">
<strong>{{n}}</strong>
<span>条未选中</span>
</span>
<ul class="filters">
<li v-for="(val,key) in btns">
<a
:href="val.hash"
:class="{selected:val.hash.substring(1) == cn}"
>{{val.name}}</a>
</li>
</ul>
</footer>
`,
props:['n','cn'],
data(){
return {
num:'#/all',
btns:[
{
hash:'#/all',
name:'全部'
},
{
hash:'#/unchecked',
name:'未选中'
},
{
hash:'#/checked',
name:'已选中'
},
]
}
}
})
vue基于组件实现简单的todolist的更多相关文章
- vue结合element-ui做简单版todolist
结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; ...
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- vue入门——组件基础todolist
1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...
- jmGraph：一个基于html5的简单画图组件
jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...
- 一个基于 easyui, vue 和 maptalks 的简单地图应用
一个基于 easyui, vue 和 maptalks 的简单地图应用 做了一个小应用,结合 easyui , vue 和 maptalks 的简单的地图应用.可以用来画图,什么的. 地址
- vuex的简单例子和vue model组件
好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 【BZOJ 1701】Cow School（斜率优化/动态凸包/分治优化）
原题题解和数据下载 Usaco2007 Jan 题意 小牛参加了n个测试,第i个测试满分是\(p_i\),它的得分是\(t_i\).老师去掉\(t_i/p_i\)最小的d个测试,将剩下的总得分/总满分 ...
- 【UOJ#422】【集训队作业2018】小Z的礼物（min-max容斥，轮廓线dp）
[UOJ#422][集训队作业2018]小Z的礼物(min-max容斥,轮廓线dp) 题面 UOJ 题解 毒瘤xzy,怎么能搬这种题当做WC模拟题QwQ 一开始开错题了,根本就不会做. 后来发现是每次 ...
- 「SCOI2016」美味 解题报告
「SCOI2016」美味 状态极差无比,一个锤子题目而已 考虑每次对\(b\)和\(d\)求\(c=d \ xor \ (a+b)\)的最大值,因为异或每一位是独立的,所以我们可以尝试按位贪心. 如果 ...
- layer 弹出层
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- kafka命令行脚本使用
zookeeper集群部署:http://www.cnblogs.com/ding2016/p/8280696.html kafka集群部署:http://www.cnblogs.com/ding20 ...
- 牛客练习赛43 Tachibana Kanade Loves Review C(最小生成树Kruskal)
链接:https://ac.nowcoder.com/acm/contest/548/C来源:牛客网 题目描述 立华奏是一个刚刚开始学习 OI 的萌新. 最近,实力强大的 QingyuQingyu 当 ...
- ACM-ICPC 2018 南京赛区网络预赛 L题（分层最短路）
题目链接:https://nanti.jisuanke.com/t/31001 题目大意:给出一个含有n个点m条边的带权有向图,求1号顶点到n号顶点的最短路,可以使<=k条任意边的权值变为0. ...
- [模板]ETT
解:splay维护括号序列,就是进子树一次出子树一次.树上每个点直接记录这两个点的编号. 建树的时候按照分配的编号建树. #include <bits/stdc++.h> typedef ...
- openvpn部署账号密码登录
1.开启服务器端路由转发功能: 修改配置文件/etc/sysctl.conf中 net.ipv4.ip_forward = 0 改为 net.ipv4.ip_forward = 1 [root@nod ...
- 关于Java中扫描仪next（）与nextLine（）的区别
首先,next()一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键.Tab键或Enter键等结束符,next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后 ...