Vue學習筆記——制作一個todoList
阿新 • • 發佈：2017-11-21
delet hold del div eve charset 當前 esc 例如 
列表渲染
v-for指令
根據一組數組的選項列表進行渲染
語法：value,key in items | value,key of items
變異方法
vue提供一組方法，對數組進行操作的時候，會觸發視圖更新。
push() pop() shift() unshift() splice() sort() reverse()
事件處理器
v-on指令
用來監聽DOM事件觸發代碼
語法：v-on:eventName="eventHandle"
指令簡寫：@
事件處理函數：寫在methods中統一管理
事件對象：在事件處理函數中獲取
事件修飾符
事件處理函數只有純粹的邏輯判斷，不處理DOM事件的細節。例如阻止冒泡，取消默認行為，判斷按鍵。
修飾符的位置：v-on:eventName.修飾符
修飾符：.stop .prevent .capture .self .once
按鍵修飾符：.enter .tab .delete .esc .space .up .down .left .right
.ctrl .alt .shift .meta .鍵值
條件渲染
根據表達式的值，用來顯示或隱藏元素
語法：v-show="表達式"（表達式值為true顯示）
元素會被渲染在頁面中，只根據表達式的值進行css切換
動態綁定class
class也為元素的屬性，可以使用v-bind:class
語法：v-bind:class="{className:表達式}"（表達式值為true添加className）
v-bind指令簡寫為：
自定義指令
除了vue內置的指令，可以自己設置指令
選項對象的directives屬性
{
directives:{}
}
鉤子函數
update被綁定元素所在的模板更新時調用
鉤子函數中的參數：
el:指令所綁定的元素，可以用來直接操作DOM
binding:一個對象
value:指令的綁定值
計算數據
模板是為了描述視圖的結構，模板中放入太多邏輯會導致模板過重難以維護。
例如下面在模板中篩選未完成任務個數，這樣的寫法是不夠好的：
<li> {{ list.filter(function(item){ return !item.isChecked; }).length }} 個任務未完成</li>
在計算一個屬性時，vue.js更新它的依賴列表並緩存結果，只有當其中一個依賴發生了變化，緩存的結果才無效。
語法：在選項對象中
{
...
computed:{}
}
對上面的例子的改進：
computed:{ nocheckLength:function(){ return this.list.filter(function(item){ return !item.isChecked; }).length } },
附上已具備增刪改的todoList代碼
todoList.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList</title> <link rel="stylesheet" type="text/css" href="./index.css"> <script src="./vue.js"></script> </head> <body> <div class="page-top"> <div class="page-content"> <h2>任務計劃列表</h2> </div> </div> <div class="main"> <h3 class="big-title">添加任務：</h3> <input type="text" placeholder="例如：買大房子； 提示：回車即可添加任務" class="task-input" v-on:keyup.enter="addTodo" v-model="todo" /> <ul class="task-count" v-show="list.length"> <li> {{ nocheckLength }} 個任務未完成</li> <li class="active"> <a href="#" class="active">所有任務</a> <a href="#">未完成的任務</a> <a href="#">完成的任務</a> </li> </ul> <h3 class="big-title">任務列表：</h3> <div class="tasks"> <span class="no-task-tip" v-show="!list.length">還沒有添加任何任務</span> <ul class="todo-list"> <li class="todo" :class="{completed:item.isChecked,editing:item === editorTodos}" v-for="item in list"> <div class="view"> <input type="checkbox" class="toggle" v-model="item.isChecked"> <label @dblclick="editorTodo(item)">{{item.title}}</label> <button class="destroy" @click="deleteTodo(item)"></button> </div> <input type="text" class="edit" v-model="item.title" v-focus="editorTodos === item" @blur="editorTodoed(item)" @keyup.13="editorTodoed(item)" @keyup.esc="cancelTodo(item)" /> </li> </ul> </div> </div> <script src="./app.js"></script> </body> </html>View Code
index.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList</title> <link rel="stylesheet" type="text/css" href="./index.css"> <script src="./vue.js"></script> </head> <body> <div class="page-top"> <div class="page-content"> <h2>任務計劃列表</h2> </div> </div> <div class="main"> <h3 class="big-title">添加任務：</h3> <input type="text" placeholder="例如：買大房子； 提示：回車即可添加任務" class="task-input" v-on:keyup.enter="addTodo" v-model="todo" /> <ul class="task-count" v-show="list.length"> <li> {{ nocheckLength }} 個任務未完成</li> <li class="active"> <a href="#" class="active">所有任務</a> <a href="#">未完成的任務</a> <a href="#">完成的任務</a> </li> </ul> <h3 class="big-title">任務列表：</h3> <div class="tasks"> <span class="no-task-tip" v-show="!list.length">還沒有添加任何任務</span> <ul class="todo-list"> <li class="todo" :class="{completed:item.isChecked,editing:item === editorTodos}" v-for="item in list"> <div class="view"> <input type="checkbox" class="toggle" v-model="item.isChecked"> <label @dblclick="editorTodo(item)">{{item.title}}</label> <button class="destroy" @click="deleteTodo(item)"></button> </div> <input type="text" class="edit" v-model="item.title" v-focus="editorTodos === item" @blur="editorTodoed(item)" @keyup.13="editorTodoed(item)" @keyup.esc="cancelTodo(item)" /> </li> </ul> </div> </div> <script src="./app.js"></script> </body> </html>View Code
app.js
var list=[ { title:"學習vue", isChecked:false //狀態為true，選中 }, { title:"走向人生巔峰", isChecked:true } ]; new Vue({ el:".main", data:{ list:list, todo:‘‘, editorTodos:‘‘ ,//記錄正在編輯的數據 beforeTitle:‘‘ //記錄正在編輯的數據的title }, computed:{ nocheckLength:function(){ return this.list.filter(function(item){ return !item.isChecked; }).length } }, methods:{ //添加任務 addTodo(ev){ //函數簡寫的方式，es6 this.list.push({ title:this.todo, isChecked:false }); //事件處理函數中的this指向的是當前這個根實例 this.todo = ‘‘; }, //刪除任務 deleteTodo(todo){ var index = this.list.indexOf(todo); this.list.splice(index,1); }, //編輯任務 editorTodo(todo){ console.log(todo); //編輯任務的時候記錄一下這條任務的title,方便在取消編輯的時候重新復制回來 this.beforeTitle = todo.title; this.editorTodos = todo; }, //編輯完成 editorTodoed(todo){ this.editorTodos = ""; }, //取消編輯 cancelTodo(todo){ todo.title = this.beforeTitle; this.beforeTitle = ‘‘; //讓div顯示，input隱藏 this.editorTodos = ‘‘; } }, directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus(); } } } } });View Code
Vue學習筆記——制作一個todoList