<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<!--默認(rèn)顏色為灰色 navbar-inverse是反色導(dǎo)航條-->
<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="請(qǐng)輸入添加的項(xiàng)目" v-model="newItem" @keydown.Enter="addnew">
<!--form-control是將輸入框橫向填滿(mǎn)-->
<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中有數(shù)據(jù)就用localStorage垂券，沒(méi)有用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)
//第一個(gè)參數(shù)是事件，第二個(gè)是回調(diào)函數(shù)落剪，第三個(gè)默認(rèn)為false
//監(jiān)控hash的變化，如果頁(yè)面已經(jīng)有hash了锣杂，重新刷新頁(yè)面也要獲取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不會(huì)觸發(fā)watch此洲，watch默認(rèn)只監(jiān)控一層是數(shù)據(jù)變化，數(shù)組變化能夠監(jiān)控业崖，數(shù)組內(nèi)對(duì)象內(nèi)容變化不會(huì)監(jiān)控到
handler(newVal,oldVal){//默認(rèn)寫(xiě)成函數(shù)野芒，相當(dāng)于默認(rèn)寫(xiě)了handler
//localStorage默認(rèn)存儲(chǔ)字符串
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":"背英語(yǔ)","hasdone":false,"flag":true},
{"name":"打游戲","hasdone":false,"flag":true},
{"name":"散步","hasdone":false,"flag":true}
]
