前言：看了網(wǎng)上的教程，寫一個(gè)建議的便簽（當(dāng)然你也可以叫它留言板）
功能描述：
- 可在input輸入框輸入文字內(nèi)容，按回車按鍵進(jìn)行發(fā)布；
- 可點(diǎn)擊單選按鈕，來(lái)指定“朕已閱”的便簽；
- 可刪除指定“不順眼”的便簽。
html代碼布局：
<body>
<div class="page-top">
<div class="page-content wrap">
<h2>計(jì)劃任務(wù)表</h2>
</div>
</div>
<div class="main wrap">
<h3 class="big-title">添加任務(wù)：</h3>
<input
@keyup.enter = "addTodo"
v-model="todo"
type="text"
placeholder="例如：吃飯睡覺打豆豆： 提示：+回車即可添加任務(wù)"
class="task-input" /> <!-- addTodo(123,$event)行間傳參的時(shí)候，vue里面還要用事件對(duì)象的話就用$event-->
<ul class="task-count clearFix">
<li class="fl" style="color: #ff8000;margin-left: 20px;">
<!--{{
list.filter(function(item){
return !item.isChecked
}).length
}}-->
{{ noCheckLength }}
個(gè)未完成任務(wù)
</li>
<li class="action fr">
<a href="#all" class="fl" :class="{active:false}">所有任務(wù)</a>
<a href="#unfinished" class="fl">未完成任務(wù)</a>
<a href="#finished" class="fl">已完成任務(wù)</a>
</li>
</ul>
<h3 class="big-title">任務(wù)列表：</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">還沒有添加任何任務(wù)</span>
<!--<span class="no-task-tip tip-toggle">
<input type="checkbox" checked="" class="toggle" />
<span>全部標(biāo)記為已完成</span>
</span>-->
<ul class="todo-list" v-show="list.length">
<li class="todo" :class="{completed: item.isChecked,editing: item === editorTodos}" v-for="item in filterList">
<div class="view">
<input class="fl" type="checkbox" v-model="item.isChecked" class="toggle"><!-- 將單選按鈕的數(shù)據(jù)進(jìn)行雙向綁定，選中與不選中傳值 -->
<!--<label class="fl" for=""><a href="javascript:;" v-text="item.title"></a></label>-->
<label class="fl" for=""><a href="javascript:;" @dblclick="edtorTodo(item)">{{ item.title }}</a></label>
<a href="javascript:;" class="destroy fr" @click="delTodo(item)">刪除</a>
</div>
<input @blur="edtorTodoed(item)" @keyup.13="edtorTodoed(item)" @keyup.esc="cancelTodo(item)" v-focus="editorTodos === item" type="text" class="edit" v-model="item.title" />
</li>
</ul>
</div>
</div>
</body>
css樣式設(shè)置：
*{margin: 0;padding: 0}
li{list-style: none;}
a{text-decoration: none;color: #333;}
img {border: none;display: block;}
.clearFix:after{
content: '';
display: block;
clear: both;
height: 0;
width: 0;
}
.clearFix{zoom: 1}
.fl{float: left;}
.fr{float: right;}
.wrap{
width: 980px;
margin: 0 auto;
}
/**************************/
.page-top{
background-color: #e8593c;
height: 40px;
border-top: 1px solid #b56553;
border-bottom: 1px solid #b56553;
}
.page-top .page-content h2{
width: 100%;
line-height:40px;
color: #fff;
text-align: center;
font-size: 22px;
}
/***********************/
.main{
margin-top: 10px;
}
.main .big-title{
font-size: 18px;
}
.main .task-input{
margin-top: 15px;
width: calc(100% - 20px);
height: 30px;
padding-left: 20px;
font-size: 12px;
}
.task-count{
margin-top: 10px;
}
.task-count .action a{
padding: 5px 20px;
}
.task-count .action a.active{
border:1px solid #ff8000;
}
.tasks {
margin-top: 10px;
}
.tasks .no-task-tip{
display: block;
color: #ccc;
margin-left: 25px;
font-size: 12px;
margin-bottom: 10px;
}
.todo-list .todo{
height: 40px;
border: 1px solid #999;
margin-bottom: 5px;
position: relative;
}
.tasks .todo-list .editing .edit{display: block;}
.todo-list .completed .view label a{
color: #ccc;
font-size: 22px;
text-decoration: line-through;
}
.todo-list .todo .edit{
position: absolute;
left: 0;
top: 0;
display: none;
width: calc(100% - 50px);
height: 40px;
border: none;
padding-left: 50px;
font-size: 24px;
}
.todo .view input[type="checkbox"]{
width: 20px;
height: 20px;
margin-left: 20px;
margin-top: 13px;
margin-right: 10px;
}
.todo .view label a{
font-size: 24px;
line-height:40px;
color: #000;
}
.todo .view .destroy{
height: 40px;
width: auto;
line-height:40px;
margin-right: 20px;
font-size: 14px;
color: #f00;
border: none;
background-color: #fff;
cursor: pointer;
}
核心部分js代碼實(shí)現(xiàn)：
document.addEventListener('DOMContentLoaded',function () {
//存取localStorage中的數(shù)據(jù)
var store = {
save(key,value) {
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){//獲取
return JSON.parse(localStorage.getItem(key)) || [];
}
}
/*var list = [
{
title: "吃飯睡覺",
isChecked: false //狀態(tài)為false，為不選中，任務(wù)未完成
},
{
title: "web前端開發(fā)",
isChecked: true //狀態(tài)為true，為選中，任務(wù)已完成
}
];*/
var fiter = {
all:function (list) {
return list;
},
finished:function (list) {
return list.filter(function (item) {
return item.isChecked
});
},
unfinished:function (list) {
return list.filter(function (item) {
return !item.isChecked
});
}
}
//取出所有的值
var list = store.fetch("datura_msg");
var vm = new Vue({
//這里面是選項(xiàng)對(duì)象，里面有很多值
el: ".main",//掛在點(diǎn)，掛在到main上
data: {
list: list, //留言的內(nèi)容數(shù)組，注意這里數(shù)組內(nèi)每一條數(shù)據(jù)都是一個(gè)json
todo: '',
listMsg: {},
editorTodos: '',//記錄正在編輯的數(shù)據(jù)
beforeTitle: '',//記錄正在編輯的數(shù)據(jù)的title
visibility: 'all'//通過這個(gè)屬性值的變化對(duì)數(shù)據(jù)進(jìn)行篩選
},
watch: {
/* list: function () {//監(jiān)聽list這個(gè)屬性，當(dāng)這個(gè)屬性對(duì)應(yīng)的值發(fā)生變化就會(huì)執(zhí)行函數(shù)
store.save("datura_msg",this.list);
}*/
list: {
handler:function () {
store.save("datura_msg",this.list);
},
deep:true
}
},
computed: {
noCheckLength:function () {
return this.list.filter(function(item){
return !item.isChecked
}).length
},
filterList:function () {
//過濾的時(shí)候有三種情況 all finished unfinished
//return fiter[this.visibility](list);//函數(shù)調(diào)用
//找到了過濾函數(shù)，就返回過濾后的數(shù)據(jù)，如果沒有就返回所有數(shù)據(jù)
return fiter[this.visibility]?fiter[this.visibility](list):list;
}
},
methods: {
addTodo(data,ev){ //添加任務(wù) 第二個(gè)參數(shù)接收一下事件對(duì)象
//向list中添加一項(xiàng)任務(wù)
//事件處理函數(shù)中的this，指向的的那個(gè)根實(shí)例
/*if(ev.keyCode == 13){
this.list.push({
title:ev.target.value //這里是操作dom了，影響性能
});
}*/
/* this.list.push({ //向list中添加一項(xiàng)任務(wù)
title:this.todo,
isChecked:false
});*/
this.listMsg = {
title:this.todo,
isChecked:false
}
this.list.push(this.listMsg);
this.todo = ''
},
delTodo(todo) {//刪除任務(wù)
//在數(shù)組中查找點(diǎn)擊當(dāng)前數(shù)據(jù)在list數(shù)組中的位置，找到其索引值
var index = this.list.indexOf(todo);
if(confirm("確定刪除？")){
this.list.splice(index,1);
}
},
edtorTodo(todo) {//編輯任務(wù)
//編輯任務(wù)的時(shí)候。記錄一下編輯這條任務(wù)的title，方便在取消編輯的時(shí)候重新給之前的title
this.beforeTitle = todo.title;
this.editorTodos = todo;
},
edtorTodoed(todo) {//任務(wù)編輯成功
this.editorTodos = '';
},
cancelTodo(todo) {//取消編輯
todo.title = this.beforeTitle;
this.beforeTitle = '';
//讓div顯示出來(lái),input隱藏
this.editorTodos = '';
}
},
directives: {
"focus": {
update(el,binding) {
// console.log(el);//指綁定的元素，可以用來(lái)直接操作DOM => <input type="text" class="edit" />
//console.log(binding);
if(binding.value == true){
el.focus();//當(dāng)前編輯元素獲取焦點(diǎn)
}
}
}
}
});
function watchHashChange() {
//var hash = window.location.hash;
var hash = window.location.hash.slice(1);
vm.visibility = hash;
//console.log(hash);
}
watchHashChange();
window.addEventListener('hashchange',watchHashChange,false);
},false);
效果如圖：
