和我一塊兒入坑-Vue入門-ToDoList

和我一塊兒入坑-Vue入門-ToDoList

本項目是仿照這個作滴 ToDoList 。使用Vue實現這個代辦事項功能。完整的項目在這裏GitHub vue-todolist。

（一）基本功

Vue官方文檔 瞭解一下

1. 前置項
   安裝Node，建議使用nvm安裝，逼格比較高（手動滑稽）

2. 而後全局安裝 Vue CLI
   竟然還更名了

   npm install -g @vue/cli

3. 建立項目

   vue create vue-todolist

4. 啓動CLI服務

   cd vue-todolist
   $ npm run serve

5. 目錄結構
   根據本身的習慣建立文件,並刪除多餘的代碼。我是以下建立的：

   ├── public                                            
   ├── src                                         
   │   ├── assets                             
   │   │   └── css                              
   │   │       └── styles.css                                          
   │   ├── utils
   │   │   └── utils.js
   │   ├── views
   │   │   └── Home.vue                               
   │   ├── App.vue
   │   ├── main.js
   │   ├── router.js

（二）Html和CSS部分

打開控制檯將樣式文件複製粘貼到styles.css文件中。在main.js中導入樣式

// main.js
import '@/assets/css/styles.css'

將html複製粘貼到Home.vue中的template中

<!-- Home.vue -->
<template>
  <div>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input type="text" placeholder="添加ToDo"/>
      </section>
    </header>
    <section>
      <h2>正在進行
        <span>1</span>
      </h2>
      <ol class="demo-box">
        <li>
          <input type="checkbox">
          <p>記得吃藥</p>
          <a>-</a>
        </li>
      </ol>
      <h2>已經完成
        <span>1</span>
      </h2>
      <ul>
        <li draggable="true">
          <input type="checkbox"checked="checked">
          <p>記得吃飯</p>
          <a>-</a>
        </li>
      </ul>
    </section>
    <footer>
      Copyright &copy; 2014 todolist.cn
      <a>clear</a>
    </footer>
  </div>
</template>

複製完成後，頁面長這樣

（三）實現ToDoList的功能

添加代辦事項

使用v-model 指令在input框上建立雙向數據綁定。併爲按鍵添加修飾符，監聽鍵盤enter鍵。

<input type="text" v-model="todo"  @keyup.enter="addTodo" placeholder="添加ToDo" />

data () {
  return {
    todo: '',
    todoList: [],
    todoLen: 0
  }
},
methods: (
  addTodo () {
    let todoObj = {
      todo: this.todo,
      done: false
    }
    this.todoList.push(todoObj)
    this.todoLen++
    this.todo = ''
  },
)

循環添加的事項

使用v-for將所添加的事項循環顯示，並使用v-if條件渲染只顯示的內容。

<li v-for="(item, index) in todoList" :key="index" v-if="item.done === false">
  <input type="checkbox">
  <p>{{item.todo}}</p>
  <a>-</a>
</li>

這個時候就能夠看到添加的內容了

切換狀態及刪除功能

綁定切換狀態、刪除的事件

<h2>正在進行
  <span>{{todoLen}}</span>
</h2>
<ol class="demo-box">
  <li v-for="(item, index) in todoList" :key="index" v-if="item.done === false">
    <input type="checkbox" @change="changeTodo(index,true)">
    <p>{{item.todo}}</p>
    <a @click="deleteTodo(index,true)">-</a>
  </li>
</ol>
<h2>已經完成
  <span>{{todoList.length - todoLen}}</span>
</h2>
<ul>
  <li v-for="(item, index) in todoList" :key="index" v-if="item.done === true">
    <input type="checkbox" @change="changeTodo(index,false)" checked='checked'>
    <p>{{item.todo}}</p>
    <a @click="deleteTodo(index,false)">-</a>
  </li>
</ul>

根據done的值來控制是否顯示，在點擊事件中對done取反。對未完成的事項長度進行加減。

changeTodo (index, done) {
  if (done) {
    this.todoLen--
    this.todoList[index].done = true
  } else {
    this.todoLen++
    this.todoList[index].done = false
  }
},
deleteTodo (index, done) {
  if(done){
    this.todoLen--
  }
  this.todoList.splice(index, 1)
},

到此爲止，這個功能就算完成了，可是當咱們刷新頁面後數據就不見了，這裏咱們須要用到localStorage。

localStorage的使用

todoList數組的每一次增長和刪減都會用到localStorage，將localStorage封裝起來方便使用。

// utils.js
export function setItem (key, value) {
  localStorage.setItem(key, JSON.stringify(value))
}
export function getItem (key) {
  return JSON.parse(localStorage.getItem(key))
}
export function removeItem (key) {
  localStorage.removeItem(key)
}

導入utils

import * as Utils from '@/utils/utils'

在數組的每一次改變都須要使用Utils.setItem進行數據的存儲。在addTodo方法中，必定要對Utils.getItem返回的數據進行判斷，不然會報「Cannot read property 'push' of null」

addTodo () {
  let todoObj = {
    todo: this.todo,
    done: false
  }
  var tempList = Utils.getItem('todoList')
  if (tempList) {
    tempList.push(todoObj)
    Utils.setItem('todoList', tempList)
  } else {
    var tempData = []
    tempData.push(todoObj)
    Utils.setItem('todoList', tempData)
  }
  this.todoList.push(todoObj)
  this.todoLen++
  this.todo = ''
},
deleteTodo (index, done) {
  if(done){
    this.todoLen--
  }
  this.todoList.splice(index, 1)
  Utils.setItem('todoList', this.todoList)
  
},
changeTodo (index, done) {
  if (done) {
    this.todoLen--
    this.todoList[index].done = true
    Utils.setItem('todoList', this.todoList)
  } else {
    this.todoLen++
    this.todoList[index].done = false
    Utils.setItem('todoList', this.todoList)
  }
},

初始事件

在初始的時候對未完成事項進行自加運輸，以獲得初始的長度。

methods： {
  initTodo () {
    var todoArr = Utils.getItem('todoList')
    if (todoArr) {
      for (let i = 0, len = todoArr.length; i < len; i++) {
        if (todoArr[i].done === false) {
          this.todoLen++
        }
      }
      this.todoList = todoArr
    }
  },
}
mounted () {
  this.initTodo()
}

還有頁腳的clear按鈕

<footer>Copyright &copy; 2014 todolist.cn<a @click="clearData()">clear</a></footer>

clearData () {
  localStorage.clear()
  this.todoList = []
  this.todoLen = 0
}

說在後面的話

完整的項目在這裏GitHub vue-todolist。

實際上，關於這個ToDoList我寫了三個小demo，分別是
Angular ToDoList的小博文，完整的項目在這裏GitHub ng-first。
React Native ToDoList的小博文，完整的項目在這裏GitHub AwesomeProject。
Vue ToDoList的小博文，完整的項目在這裏GitHub vue-todolist。

爲何寫了三個呢？
由於我閒啊！！

爲何都是寫這種超級簡單的小demo?
由於複雜的我不會!

說實話，你到底想幹嗎？
原本我是想對三個框架進行對比，結果發現技術不佳，學藝不深，沒法對其進行比對。因此結論是喜歡哪一個就用哪一個好了 （這樣很差，不要學我） 。

自問自答是否是很尷尬？ 是的。