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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 「HDU - 2857」Mirror and Light（点关于直线的对称点）
题目链接 Mirror and Light 题意 一条直线代表镜子,一个入射光线上的点,一个反射光线上的点,求反射点.(都在一个二维平面内) 题解 找出入射光线关于镜子直线的对称点,然后和反射光线连边 ...
- 06 Zabbix4.0系统CISCO交换机告警模板规划信息(基础)
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 06 Zabbix4.0系统CISCO交换机告警模板规划信息(基础) 1. Host groups ...
- 【agc013d】Piling Up（动态规划）
[agc013d]Piling Up(动态规划) 题面 atcoder 洛谷 有\(n\)个球,颜色为黑白中的一种,初始时颜色任意. 进行\(m\)次操作,每次操作都是先拿出一个求,再放进黑白各一个, ...
- Django（四）框架之第三篇模板语法
https://www.cnblogs.com/yuanchenqi/articles/6083427.htm https://www.cnblogs.com/haiyan123/p/7725568. ...
- 若要允许 GET 请求，请将 JsonRequestBehavior 设置为 AllowGet
http://www.cnblogs.com/Steven7Gao/archive/2012/06/13/2547905.html 若要允许 GET 请求,请将 JsonRequestBehavior ...
- postman 介绍
- 把本人基于Dubbo的毕业设计分享粗来~
这个毕业设计不是太让我满意,可能时间关系吧,但是现在工作了我也懒得没时间去完善了[目前也就有一个功能没完成,就是给产品经理送绿帽子的模块] 项目地址:GitHub 技术栈:Spring+SpringM ...
- 【非专业前端】使用vue2.5.17+element2.4.5
开发工具:WebStorm 先搞好环境 可以看出,想安装@vue/cli需要node.js.先去下载安装好. 然后安装@vue/cli npm install -g @vue/clinpm insta ...
- mongoDB-权限控制
启动服务D:\MongoDB\Server\3.6\bin>mongod.exe --dbpath D:\MongoDB\Server\3.6\data 扩展 无认证启动:mongod --po ...
- text-overflow文本溢出隐藏“...”显示
一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...