Vue項目實戰（一）——ToDoList

@vue-cli2搭建待辦事項項目

create by db on 2019-3-10 16:28:10
Recently revised in 2019-4-1 17:06:13

 Hello 小夥伴們，若是以爲本文還不錯，麻煩點個贊或者給個 star，大家的贊和 star 是我前進的動力！GitHub 地址

 查閱網上諸多資料，並結合本身的學習經驗，寫下這篇Vue學習筆記，以記錄本身的學習心得。現分享給你們，以供參考。

 做爲一隻前端菜鳥，本篇文章旨在記錄本身的學習心得，若有不足，還請多多指教，謝謝你們。

前言

I hear and I fogorget.

I see and I remember.

I do and I understand.

 小白課系列告一段落，下面開始咱們的實戰課程吧！

• 注：本項目基於VueCLI2框架實現搭建

 參考文獻：

• Vue之ToDoList實戰 | CSDN -充電實踐
• 簡單實現一個todo-list | FatDong1
• TodoMVC Example | Vue官網

正文

 若是看完了《Vue小白課》，那麼對Vue項目的總體狀況有了必定了解，而且搭建好了vue的環境。本篇咱們就來練習一下Vue，實現ToDoList項目。

 假若對VueCLI項目不是特別瞭解，請先參考：

• Vue小白課（一）——CLI搭建項目（Vue2.x）
• Vue小白課（二）——項目結構解析（Vue2.x）

如下是咱們的搭建好的項目目錄結構：

 在這個ToDoList當中，涉及到知識點包括如下內容:

1、建立Vue實例

 在 main.js 中，咱們看到vue-cli默認的

new Vue({
  el: '#ToDoList',
  router,
  components: { ToDoList },
  template: '<ToDoList/>'
}
複製代碼

 其中，el是Vue實例化的選項，提供一個在頁面上已存在的 DOM 元素（#ToDoList）做爲 Vue 實例的掛載目標。能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例。

 router是Vue的路由。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是創建起url和頁面之間的映射關係。

 至於咱們爲啥不能用a標籤，這是由於用Vue作的都是單頁應用，就至關於只有一個主的index.html頁面，因此你寫的標籤是不起做用的，你必須使用vue-router來進行管理。

 components，組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 js 特性擴展。

 template，模板,做爲 Vue 實例的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。

2、配置路由

 /src/router中的index.js文件是Vue項目的路由配置文件。

 要使用路由咱們首先要在router/index.js文件中建立路由並配置路由映射。咱們能夠將vue-cli默認的HelloWorld組件更名爲ToDoList,以下：

// 引入路由模塊並使用它
import Vue from 'vue'
import Router from 'vue-router'
import ToDoList from '@/components/ToDoList'

Vue.use(Router)

// 建立路由實例並配置路由映射 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'ToDoList',
      component: ToDoList
    }
  ]
})
複製代碼

3、編寫頁面

一、建立ToDoList組件

 既然咱們配置了ToDoList的路由，就必須建立其相對應的組件。

 咱們能夠將/src/components中的HelloWorld.vue文件更名爲ToDoList.vue,而且將其<template>標籤的內容刪除，只須要保留一個div根組件就好。以下，咱們在組件模板中新建一個My ToDoList的標題：

<template>
  <div class="ToDoList">
    <h1>My ToDoList</h1>
  </div>
</template>
複製代碼

二、綁定數據

 Vue是一個MVVM框架，那麼最基礎的就是數據綁定，怎樣實現數據綁定呢？

 首先來認識一下data

data就是Vue 實例的數據對象。

 在 ToDoList.vue 中，Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data 的屬性可以響應數據變化。

<script>
export default {
  name: 'ToDoList',
  data () {
    return {
      title: 'ToDoList'
    }
  }
}
</script>
複製代碼

 上面的js代碼，咱們在ToDoList.vue中使用data，來返回title，咱們的目的是title可以展示到頁面上，那麼這條數據如何展示呢？

<template>
  <div class="ToDoList">
    <h1 v-text="title">My ToDoList</h1>
  </div>
</template>
複製代碼

 在組件模板的標題h1中，咱們使用v-text命令綁定title，這樣就會自動替換本來html文本,顯示了title。

 改變title的值，顯示的內容也會當即刷新。若是title的內容包含html元素，好比

title: '<span></span>this is a todo list'

 那麼使用v-text顯示會是：

而使用v-html命令會自動替換html元素：

三、建立並渲染列表

 接下來，咱們使用v-for指令來實現列表的渲染：

<template>
  <div class="ToDoList">
    <h1 v-html="title"></h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <!-- 待辦事項 -->
        <span v-text="item.title"></span>
        <!-- 完成按鈕 -->
        <button>完成</button>
      </li>
    </ul>
  </div>
</template>

<script> export default { name: 'ToDoList', data () { return { title: 'ToDoList', //標題名稱 //待辦事項列表 items: [ { id: 1, title: '吃飯' }, { id: 2, title: '睡覺' }, { id: 3, title: '打豆豆' } ] } } } </script>
複製代碼

注：

 vue中列表循環需加:key="惟一標識" 惟一標識能夠是item裏面id、index等，由於vue組件高度複用，增長Key能夠標識組件的惟一性。爲了更好地區別各個組件， key的做用主要是爲了高效的更新虛擬DOM。詳情請參考

VUE中演示v-for爲何要加key

 在data中，咱們又返回了items數組，其中每一個元素包括id,title，咱們將items使用v-for綁定到列表中，渲染後的結果以下：

四、綁定刪除事件

接下來咱們使用v-on來爲按鈕綁定事件，目的是點擊刪除按鈕的時候，將列表中相應的選項刪除。

<button v-on:click="toggleFinish(recycleItem)">完成</button>
複製代碼

這裏咱們增長了click方法，方法名爲toggleFinish，參數爲字符串item。

• methods的使用

緊接着上面定義的toggleFinish方法，vue使用methods來添加各類不一樣的事件：

methods: {
// 點擊完成按鈕，刪除對應事項
  toggleFinish (recycleItem) {
    // 使用map遍歷
    this.items.map((item, index) => {
      if (item.id === recycleItem.id) {
        // 刪除對應事項
        this.items.splice(index, 1)
      }
    })
  }
}
複製代碼

五、使用input輸入框添加新事項

 截至目前咱們使用的都是現成的列表，接下來咱們使用輸入框來動態爲列表添加條目：

<div>
  <input type="text" v-model="newItem">
  <button @click="addNewItem">添加</button>
</div>
複製代碼

 使用指令v-model在表單控件或者組件上建立雙向綁定，即綁定newItem，使用@來綁定事件監聽器，點擊日添加按鈕會響應事件addNewItem。

addNewItem一樣在methods中編寫以下：

// 點擊添加按鈕，添加新的待辦事項
addNewItem () {
  // 使用push爲數組添加新元素
  this.items.push({
    id: this.id, // id 惟一且自增
    title: this.newItem // todo 標題
  })
  // id 自增
  this.id++;
  // 清空輸入框
  this.newItem = ''
}
}
複製代碼

 在data中，咱們聲明一個變量id默認爲0，items默認爲空，newItem也爲空。輸入框輸入內容後，點擊添加按鈕items中push一條內容，其中包括id與title，而後id自增，而且最後將輸入框清空。

六、總結

 經過以上幾個關鍵的知識點，咱們最終就實現了ToDoList的基本功能，效果以下：

 若是喜歡，能夠再加一些樣式。

 你們能夠在後續的學習過程當中加入更多的功能，鞏固本身學到的知識。

 路漫漫其修遠兮，與諸君共勉。

後記：Hello 小夥伴們，若是以爲本文還不錯，記得點個贊或者給個 star，大家的贊和 star 是我編寫更多更豐富文章的動力！GitHub 地址

db 的文檔庫 由 db 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/danygitgit上的做品創做。
本許可協議受權以外的使用權限能夠從 creativecommons.org/licenses/by… 處得到。