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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- QML用Qt.labs.settings实现保存用户设置
举个简单的例子: main.cpp中设置程序信息 QGuiApplication::setApplicationName("Gallery"); QGuiApplication:: ...
- Mysql 语句优化
通过 show status 命令了解各个 sql 语句的执行频率格式:Mysql> show [session | global] status;注:session 表示当前连接global ...
- Hdoj 2046.骨牌铺方格 题解
Problem Description 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数. 例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图: Inpu ...
- Codeforces | CF1033D 【Divisors】
题目大意:给定\(n(1\leq n\leq500)\)个数\(a_1,a_2\cdots,a_n(1\leq a_i\leq2\cdot10^{18})\),每个数有\(3\sim5\)个因数,求\ ...
- CCCC 喊山
2016年天梯赛模拟&初赛题集(nwu) 编程题30小题,共计580分 580分 编程题 5-14 喊山 (30分) 喊山,是人双手围在嘴边成喇叭状,对着远方高山发出“喂—喂喂—喂喂喂…… ...
- Haunted Graveyard ZOJ - 3391（SPFA）
从点(n,1)到点(1,m)的最短路径,可以转换地图成从(1,1)到(n,m)的最短路,因为有负权回路,所以要用spfa来判负环, 注意一下如果负环把终点包围在内的话, 如果用负环的话会输出无穷,但是 ...
- kali源更新
对于新装kali的同学一点存在着更新源的问题 这是对初次安装,进行系统更新的教程 首先需要有gpg_key wget -q -O - https://archive.kali.org/archive- ...
- 编写高质量代码:改善Java程序的151个建议 --[78~92]
编写高质量代码:改善Java程序的151个建议 --[78~92] HashMap中的hashCode应避免冲突 多线程使用Vector或HashTable Vector是ArrayList的多线程版 ...
- 洛谷P4363 一双木棋 chess
洛谷P4363 一双木棋 chess 省选最水的一道题了. 且看我数个月AC一道题...... 具体是这样的:我们发现这个下了棋的地方一定形成一个锯齿形,那么怎么状态压缩呢? 维护轮廓线! 从左下角出 ...
- 【洛谷 P1616 疯狂的采药】
题目背景 此题为NOIP2005普及组第三题的疯狂版. 此题为纪念LiYuxiang而生. 题目描述 LiYuxiang是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的 ...