Vue專案實戰（一）——ToDoList

豆包君發表於2019-04-02
Vue

@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小白課》，那麼對Vue專案的整體情況有了一定了解，並且搭建好了vue的環境。本篇我們就來練習一下Vue，實現ToDoList專案。

 倘若對VueCLI專案不是特別瞭解，請先參考：

以下是我們的搭建好的專案目錄結構：

Vue專案實戰（一）——ToDoList

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

一、建立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。

二、配置路由

 /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
    }
  ]
})
複製程式碼

三、編寫頁面

1、建立ToDoList元件

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

 我們可以將/src/components中的HelloWorld.vue檔案改名為ToDoList.vue,並且將其<template>標籤的內容刪除，只需要保留一個div根元件就好。如下，我們在元件模板中新建一個My ToDoList的標題：

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

2、繫結資料

 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。

Vue專案實戰（一）——ToDoList

 改變title的值，顯示的內容也會立即重新整理。如果title的內容包含html元素，比如

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

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

Vue專案實戰（一）——ToDoList

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

Vue專案實戰（一）——ToDoList

3、建立並渲染列表

 接下來，我們使用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繫結到列表中，渲染後的結果如下：

Vue專案實戰（一）——ToDoList

4、繫結刪除事件

接下來我們使用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)
      }
    })
  }
}
複製程式碼

5、使用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自增，並且最後將輸入框清空。

6、總結

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

Vue專案實戰（一）——ToDoList

 如果喜歡，可以再加一些樣式。

 大家可以在後續的學習過程中加入更多的功能，鞏固自己學到的知識。

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

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

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

相關文章