Vue的todoMVC使用詳解

這次給大家帶來Vue的todoMVC使用詳解，Vue的todoMVC使用注意事項有哪些，下面就是實戰案例，一起來看一下。

這個樣本是模仿官網樣本樣式和功能用我自己的方式寫的，基本上沒有看官網的源碼，只參考自訂指令。讓我們一步步來探討一下。官網demo

要實現的功能

1. 單條添加todo

2. 單條刪除todo

3. 雙擊編輯todo

4. 單條todo已完成相應樣式狀態改變

5. 全部todo是已完成相應樣式狀態改變

6. 清除全部已完成todos

7. 待辦todos數量顯示

8. 所有todos，已完成todos，未完成todos篩選

單條添加todo

<input type="text" class="todos_add" placeholder="What needs to be done?" @keyup.enter="addTodo($event.target)" //綁定enter事件ref="currentInput">//操作input元素使enter一下之後清空輸入框內容

data() {//一些初始化資料 return {  todolists: [],  dataStatus: ["All", "Active", "Completed"],  dataStatusIndex: 0,  whichShow: true,  defaultShow: true }},addTodo(e) { //添加todo var val = e.value if (val === "") {return} //如果輸入內容為空白則立即返回 this.todoLists = this.todoLists.concat({//使用concat這個api添加todo  value: val, //輸入內容  isEditing: false, //是否在編輯狀態  isActive: false, //刪除X表徵圖是否啟用  isChecked: false //是否已完成 }) this.$refs.currentInput.value = "" //按下enter添加todo之後把輸入框value清零 window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式儲存資料},

把每條todo的對應狀態都存在同一個對象當中，在操作改變todo狀態的時候不會被統一處理，使得每條todo都有單獨的狀態。

單條刪除todo

 <li class="content_todoList" v-for="(list,index) in todoLists"  @mouseover="list.isActive = true" //滑鼠移入todo改變對應todo的isActive狀態 @mouseleave="list.isActive=false" //滑鼠移出todo改變對應todo的isActive狀態 <span class="el-icon-close content_todoList_delete"  :class="{show: list.isActive}" //動態綁定class使滑鼠移動到某一todo顯示X表徵圖 @click="deleteTodo(index)"> //綁定刪除單條todo事件 </span></li>

deleteTodo(index) { //刪除單條todo  this.todoLists.splice(index, 1)//使用splice的api  window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式儲存資料//localStorage儲存資料},

在每個li元素上綁定了滑鼠移入和移除的事件來動態改變每個todo的isActive，然後再使用isActive動態顯示class。

雙擊編輯todo&&單條todo已完成

<input type="checkbox" class="checkBox" v-model="list.isChecked">//雙向繫結isChecked<p class="content_todoList_main" @dblclick="toEdit(list)" //雙擊事件v-show="!list.isEditing" //切換元素:class="{deleted:list.isChecked}"> //動態綁定class該表已完成todo樣式{{list.value}}</p><input type="text" class="content_todoList_main main_input" v-model="list.value" //雙向繫結可輸入valuev-show="list.isEditing" //切換元素v-todo-focus="list.value" //自訂指令，雙擊之後自動focus對焦@blur="unEdit(list)"> //綁定blur失去焦時間點事件

methods: { toEdit(obj) { //使添加的todothing可編輯  obj.isEditing = true },  unEdit(obj) { //使添加的todothing不可編輯  obj.isEditing = false },}directives: { //自訂focus指令,需要一個binding參數做判斷 "todo-focus": function (el, binding) {  if (binding.value) {   el.focus()  } }}

通過每個todo裡的isEditing屬性控制show和是否可編輯兩個狀態，雙擊p之後改變當前todo的isEditing為true，從而顯示為input，input失去焦點之後再通過blur事件改為false。

通過todo的idChecked來控制是否已完成，從而動態改變樣式。

全部todos已完成

<span class="icon-down el-icon-arrow-down" //使用element庫做向下箭頭iconv-show="todoLists.length>0" //通過todoLists控制是否顯示向下箭頭icon@click="selectAllTodos"></span> //全部已完成事件

selectAllTodos() { //設定所有todo為已完成,使用map的api通過todo的isChecked屬性操作 this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)}

待辦todos數量顯示

<p class="data_times" v-show="times === 0"> //times為0顯示item，大於0顯示items，細節註定成敗 <span>{{times}}</span>&nbsp item left</p><p class="data_times" v-show="times > 0"><span>{{times}}</span>&nbsp items left</p>

computed: { times() { //使用計算屬性計算待辦todos的次數   let todoArr = this.todoLists  let times = 0  for (let i = 0; i < todoArr.length; i++) {   if (todoArr[i].isChecked === false) {    times++   }  }  return times }},

使用了計算屬性對todoLists計算，用for迴圈刷選出idChecked為true的累加，最後返回times。

清除全部已完成todos

<p class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length"> //如果待辦事件次數小於總todoLists長度就顯示“clear completed” <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a></p><p class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length"> //如果待辦事件次數等於總todoLists長度就顯示“clear completed” <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></p>

clearTodos() { //清空已完成的todoLists，使用filter的api進行篩選 this.todoLists = this.todoLists.filter(todo => todo.isChecked === false) window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式儲存資料},

如果待辦todos的times小於todoLists長度，就證明有已完成的todo，就可以顯示“clear completed”，如果相等就說明沒有已完成的todo。

三種狀態篩選

所有todos，已完成todos，未完成todos篩選

<li class="content_todoList" v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)"><p class="data_status"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"  :class="{active: index === dataStatusIndex}" //動態class實現tab切換 v-for="(item ,index) in dataStatus" v-for迴圈 @click="switchStatus(index)" //切換不同tab顯示內容 :key="index">  {{item}} </a></p>

switchStatus(index) { //通過if條件判斷操作 this.dataStatusIndex = index if (this.dataStatus[index] === "Active") {  this.defaultShow = false  this.whichShow = false } else if (this.dataStatus[index] === "Completed") {  this.defaultShow = false  this.whichShow = true } else if (this.dataStatus[index] === "All") {  this.defaultShow = true }},

我這裡是同時if條件句判斷操作，有點麻煩，目前還沒有想出來其他方案。在li元素使用三元運算子和或運算子進行操作顯示不同狀態的todos。

完整代碼

<style> * {  padding: 0;  margin: 0;  box-sizing: border-box; } input {  outline: none; } ul, li, ol {  list-style: none; } #app {  width: 800px;  height: 900px;  margin: 0 auto;  text-align: center;  background-color: rgb(245, 245, 245);  padding: 24px 0; } #app .header {  font-size: 48px; } .content {  width: 72%;  margin: 0 auto;  box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);  position: relative; } .icon-down {  position: absolute;  font-size: 24px;  top: 16px;  left: 16px;  cursor: pointer; } #app .content .todos_add {  width: 100%;  height: 56px;  padding: 16px 56px;  font-size: 24px;  border: 1px solid transparent; } .content_todoLists {  position: relative;  z-index: 3; } .content_todoList {  display: flex;  flex-direction: row;  border-top: 1px solid #ccc;  font-size: 24px;  padding: 8px;  background-color: white;  align-items: center; } .checkBox {  width: 20px;  height: 20px;  margin-left: 10px; } .content_todoList_main {  flex: 1;  text-align: left;  margin-left: 16px;  font-size: 20px;  padding: 6px 0; } .main_input {  position: relative;  z-index: 1; } .content_todoList_delete {  position: absolute;  right: 16px;  color: rgb(252, 55, 55);  font-weight: 500;  display: none;  cursor: pointer; } .show {  display: block; } .deleted {  text-decoration-line: line-through;  color: #bbb; } .show:hover {  color: rgb(255, 0, 0);  font-weight: 700; } ::-moz-placeholder {  color: rgb(221, 218, 218); } ::-webkit-input-placeholder {  color: rgb(221, 218, 218); } :-ms-input-placeholder {  color: rgb(221, 218, 218); } .data {  display: flex;  justify-content: space-between;  padding: 8px;  font-size: 14px;  font-weight: 300;  color: rgb(145, 145, 145); } a {  text-decoration: none;  color: rgb(145, 145, 145); } .data_times {  width: 73px; } .data_clearTodos {  width: 142px; } .data_status a {  display: inline-block;  border: 1px solid transparent;  border-radius: 2px;  padding: 1px 4px;  margin: 0 2px; } .data_status a:hover {  border-color: #bbb; } .data_clearTodos a:hover {  text-decoration-line: underline; } .active {  box-shadow: 0 0 1px black; }</style>

<body> <p id="app">  <header class="header">todos</header>  <p class="content">   <span class="icon-down el-icon-arrow-down"    v-show="todoLists.length>0"    @click="selectAllTodos">   </span>   <input type="text" class="todos_add" placeholder="What needs to be done?"    @keyup.enter="addTodo($event.target)"    ref="currentInput">   <ul class="content_todoLists">    <li v-for="(list,index) in todoLists" class="content_todoList"     @mouseover="list.isActive = true"     @mouseleave="list.isActive=false"    v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">     <input type="checkbox" class="checkBox" v-model="list.isChecked">     <p class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">      {{list.value}}     </p>     <input type="text" class="content_todoList_main main_input"      v-model="list.value"      v-show="list.isEditing"      v-todo-focus="list.value"     @blur="unEdit(list)">     <span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span>    </li>   </ul>   <p class="data" v-show="todoLists.length>0">    <p class="data_times" v-show="times === 0">     <span>{{times}}</span>&nbspitem left    </p>    <p class="data_times" v-show="times > 0">     <span>{{times}}</span>&nbspitems left    </p>    <p class="data_status">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">      {{item}}     </a>    </p>    <p class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>    </p>    <p class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length">     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>    </p>   </p>  </p> </p></body><script> let vm = new Vue({  el: "#app",  data() {   return {    todoLists: [],    dataStatus: ["All", "Active", "Completed"],    dataStatusIndex: 0,    whichShow: true,    defaultShow: true   }  },  computed: {   times() { //使用計算屬性計算待辦todos的次數     let todoArr = this.todoLists    let times = 0    for (let i = 0; i < todoArr.length; i++) {     if (todoArr[i].isChecked === false) {      times++     }    }    return times   }  },  methods: {   toEdit(obj) { //使添加的todo可編輯    obj.isEditing = true   },   unEdit(obj) { //使添加的todo不可編輯    obj.isEditing = false   },   addTodo(e) { //添加todo    var val = e.value    if (val === "") {     return    } //如果輸入內容為空白則立即返回    this.todoLists = this.todoLists.concat({ //使用concat這個api添加todo     value: val, //輸入內容     isEditing: false, //是否在編輯狀態     isActive: false, //刪除X表徵圖是否啟用     isChecked: false //是否已完成    })    this.$refs.currentInput.value = "" //按下enter添加todo之後把輸入框value清零    window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //使用localStorage以JSON格式儲存資料   },   deleteTodo(index) { //刪除todo    this.todoLists.splice(index, 1)    window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式儲存資料   },   switchStatus(index) { //試下下方三個狀態切換，略麻煩    this.dataStatusIndex = index    if (this.dataStatus[index] === "Active") {     this.defaultShow = false     this.whichShow = false    } else if (this.dataStatus[index] === "Completed") {     this.defaultShow = false     this.whichShow = true    } else if (this.dataStatus[index] === "All") {     this.defaultShow = true    }   },   clearTodos() { //清空已完成的todoLists    this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)    window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式儲存資料   },   selectAllTodos() { //設定所有todo為已完成    this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)   }  },  directives: { //自訂focus指令   "todo-focus": function (el, binding) {    if (binding.value) {     el.focus()    }   }  },  created() {   let myStorage = window.localStorage.getItem('content')   this.todoLists = JSON.parse(myStorage) || [] //因為todoLists初始值是null,使用或運算子，如果為null設為空白數組  } })</script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Angular2 父子組件通訊方式

javascript的代碼最佳化詳解