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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- MT【311】三角递推数列
已知数列$\{a_n\}$满足$a_1=\dfrac{1}{2},a_{n+1}=\sin\left(\dfrac{\pi}{2}a_n\right),S_n$ 为$\{a_n\}$的前$n$项和,求 ...
- IP地址等价类测试用例
下面是一个比较完善的设计方案,这个方案中,首先把IP地址分成有效可用的IP地址和有效但不可用的IP地址两个等价类:其中有效可用的IP地址中包括IP地址的A,B,C三类地址,有效但不可用的IP地址包括D ...
- poj1845 sumdiv (因数的和)
首先分解质因数,$A^B=p_1^{m_1B}p_2^{m_2B}...p_n^{m_nB}$ 然后的话,它的所有因数的和就是$\prod{(1+p_i^1+p_i^2+...+p_i^n)}$ 用一 ...
- Composer 安装时要求输入授权用户名密码？
D:\work\dreamland-yii>composer require "saviorlv/yii2-dysms:dev-master" Authentication ...
- Win32-API: 终于能正常的捕获焦点事件: WM_COMMAND、BN_SETFOCUS、EN_SETFOCUS
学习和使用win32-api来写窗口程序算算也有二三年了. 以前有个需求,想捕获控件的焦点事件(SETFOCUS. KILLFOCUS),我一直认为应该捕获 WM_SETFOCUS 和 WM_KILL ...
- 第三十四节，目标检测之谷歌Object Detection API源码解析
我们在第三十二节,使用谷歌Object Detection API进行目标检测.训练新的模型(使用VOC 2012数据集)那一节我们介绍了如何使用谷歌Object Detection API进行目标检 ...
- 第五节，Neural Networks and Deep Learning 一书小节(中)
在这一节,我们对上一个程序(Network1.py)进行了优化 3.改进神经网络的学习方法 (1)交叉熵代价函数的引入 Network1程序采用了S型神经元,S型神经元存在一个问题,当输出层神经元的输 ...
- java8 List<对象> 转 Set、Map（高级）
实体类 public class Student { private int id; private String name; private String score; private int cl ...
- 计算机基础：计算机网络-chapter5 运输层
一.运输层做什么事情,通过什么协议实现, 运输层做什么 为相互通信的应用提供逻辑通信 通过端口号来确定应用,提供端到端的服务: 为什么需要运输层,IP层不是就实现了传输数据吗 从IP层来说,是两台主机 ...
- aliyun centos7 挂载云盘
买了云盘,在哪里放着,也没有用到,今天把她挂上去吧! 1.查看SSD云盘sudo fdisk -l 可以看到SSD系统已经识别为/dev/vdb 2.格式化云盘sudo mkfs.ext4 /dev/ ...