Vue todolist
2018-11-23 本文已影响0人
大白熊_8133
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<!--默认颜色为灰色 navbar-inverse是反色导航条-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
大白熊
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="panel panel-info">
<div style="font-size:30px" class="panel-heading" >还有<span class="text-danger" v-cloak>{{x}}</span>件事需要完成</div>
<div class="panel-body">
<input type="text" class="form-control" placeholder="请输入添加的项目" v-model="newItem" @keydown.Enter="addnew">
<!--form-control是将输入框横向填满-->
<ul class="nav nav-pills" style="margin-top:5px">
<li role="presentation" :class="{active:hash=='#/all'}"><a href="#/all" >全部</a></li>
<li role="presentation" :class="{active:hash=='#/finish'}"><a href="#/finish">已完成</a></li>
<li role="presentation" :class="{active:hash=='#/unfinish'}"><a href="#/unfinish">未完成</a></li>
</ul>
<ul class="list-group" style="margin-top:5px">
<li class="list-group-item" v-for="thing in things" :class="{disabled:thing.hasdone}" @dblclick="change(thing)" >
<span v-show="thing.flag">
<input type="checkbox" v-model="thing.hasdone" v-cloak >
{{thing.name}}
</span>
<input type="text" v-show="!thing.flag" v-model="thing.name" @keydown.Enter="thing.flag=!thing.flag" @blur="thing.flag=!thing.flag" v-focus="!thing.flag">
<button class="btn btn-xs btn-danger pull-right" @click="del(thing)">删除</button>
</li>
</ul>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="pro.json"></script>
<script>
const vm=new Vue(
{
directives:{
//自定义指令
focus(el,bindings){
//el指操纵的dom
if(bindings.value==true)
{//bindings是绑定的属性，.value表示值
el.focus()
}
}
},
el:"#app",
created(){
if(localStorage.getItem('data')==null)
{
//如果localStorage中有数据就用localStorage，没有用json中定义的
axios.get('./todo.json').then(data=>{this.allthings=data.data},function(err){alert("err")})
}
else {
this.allthings=JSON.parse(localStorage.getItem('data'))
}
this.finishthings=this.allthings.filter((item)=>item.hasdone)
this.unfinishthings=this.allthings.filter((item)=>!item.hasdone)
//第一个参数是事件，第二个是回调函数，第三个默认为false
//监控hash的变化，如果页面已经有hash了，重新刷新页面也要获取hash
this.hash=window.location.hash||'#/all';
window.addEventListener("hashchange",()=>{
this.hash=window.location.hash
},false)
},
computed:{
things:{
get(){
if(this.hash=='#/all')
{
return this.allthings;
}
else if(this.hash=='#/unfinish')
{
return this.unfinishthings;
}
else if(this.hash=='#/finish')
{
return this.finishthings;
}
}
},
x:{
get(){
return this.allthings.filter(item=>!item.hasdone).length
}
}
},
methods:
{
change(thing)
{
this.allthings.forEach(item=>{
if(item==thing)
item.flag=false;
else {
item.flag=true
}
})
},
del(o){
this.allthings=this.allthings.filter(item=>item!=o)
},
addnew(){
this.allthings.push({name:this.newItem,hasdone:false,flag:true})
this.newItem=""
}
},
watch:{
allthings:{
//改变name不会触发watch，watch默认只监控一层是数据变化，数组变化能够监控，数组内对象内容变化不会监控到
handler(newVal,oldVal){//默认写成函数，相当于默认写了handler
//localStorage默认存储字符串
localStorage.setItem('data',JSON.stringify(this.allthings))
this.finishthings=this.allthings.filter((item)=>item.hasdone)
this.unfinishthings=this.allthings.filter((item)=>!item.hasdone)
},deep:true
}
},
data:{
allthings:[],
unfinishthings:[],
finishthings:[],
newItem:"",
hash:""
}
}
)
</script>
</body>
</html>
todo.json文件
[
{"name":"背英语","hasdone":false,"flag":true},
{"name":"打游戏","hasdone":false,"flag":true},
{"name":"散步","hasdone":false,"flag":true}
]
