第 2 篇：上手 Vue 展示 todo 列表

削微寒發表於2020-11-06
Vue

作者：HelloGitHub-追夢人物

追夢人物的 Vue 系列教程在他的部落格已經全部更新完成，地址：

https://www.zmrenwu.com/courses/vue2x-todo-tutorial/

注意：追夢的部落格在國外所以訪問速度慢，需要耐心等待一下。本號將不再連載本系列，望周知。

UI

我們先來寫好 Todo 應用的 HTML 文件模板，然後再用 Vue 來操作模板中的資料。由於我們的重點在 Vue 的學習，因此 Todo 應用的 UI 採用了極簡風格設計。可以看到模板的程式碼量非常少，如果加入過多的 CSS 樣式，在教程中程式碼看起來就會非常混亂。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloVue Todo Tutorial</title>
  <style>
    .completed {
      text-decoration: line-through;
    }

    .selected {
      color: red;
    }
  </style>
</head>
<body>
<div id="todo-app">
  <div>
    <input type="button" value="全部標為完成"/>
    <input type="text" placeholder="新增 todo"/>
  </div>
  <!-- todo list -->
  <ul>
    <li>
      <span class="completed">學習 Vue</span>
      <input type="button" value="標為完成">
      <input type="button" value="刪除">
      <input type="text" value="編輯 todo..."/>
    </li>
    <li>
      <span>整個牛專案</span>
      <input type="button" value="標為完成">
      <input type="button" value="刪除">
      <input type="text" value="編輯 todo..."/>
    </li>
    <li>
      <span>迎娶白富美走上人生巔峰</span>
      <input type="button" value="標為完成">
      <input type="button" value="刪除">
      <input type="text" value="編輯 todo..."/>
    </li>
  </ul>
  <!-- end todo list -->
  <div>
    <span>剩餘 3 項未完成 ---</span>
    <span>篩選：
      <input type="button" class="selected" value="全部">
      <input type="button" value="進行中">
      <input type="button" value="已完成">
      <input type="button" value="清除已完成">
      <input type="button" value="清除全部">
    </span>
  </div>
</div>
</body>
</html>

請複製上述程式碼到一個 HTML 檔案然後使用瀏覽器開啟，你就可以看到介面了。

不過目前還只有 UI，我們接下來將使用 Vue 一步步實現以下完整的功能：

  • 在頂部輸入框輸入內容，按Enter鍵新增 todo
  • 全部 todo 列表顯示在輸入框下方的列表
  • 將單個 todo 標為完成
  • 刪除單個 todo
  • 雙擊 todo 進行編輯，按 esc 鍵取消編輯
  • 下方顯示未完成的 todo 數量
  • 可通過篩選按鈕篩選未完成的 todo、已完成的 todo 等
  • 可一次性將全部 todo 標為完成，可一次性清除全部已完成 todo，或者一次性清除全部 todo。
  • 其它更加豐富的功能

接下來就讓我們一個一個以 Vue 的方式來實現它們吧！

todo 列表

在上面的模板程式碼中，todo 列表的值都是我們直接寫在 HTML 文件裡的。合理的情況應該是根據使用者新增和刪除 todo 時動態地顯示全部內容，這就要交給 Vue 了。當然，第一步是要先構建 Vue 的例項，注意這個例項目前是沒有繫結任何資料的，其 data 是一個空函式，不返回任何有用的資料：

<body>
<div id="todo-app">
    ...
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#todo-app',
        data: function () {
        },
    })
</script>
</body>

我們現在還沒有實現使用者新增 todo 的功能，我們先做個弊，假設使用者已經輸入了一些 todo，存在一個 todos 列表裡，現在需要將 Vue 例項和這個 todos 繫結：

var app = new Vue({
    el: '#todo-app',
    data: function () {
        return {
            todos: [
                {id: 0, title: '學習 Vue'},
                {id: 1, title: '整個牛專案'},
                {id: 2, title: '迎娶白富美走上人生巔峰'},
            ]
        }
    },
})

現在每一個 todo 都是一個物件，它有 id 和 title 兩個屬性，id 用來唯一標識這個 todo。然後我們就在模板中迴圈顯示這個 todos 列表，Vue 中迴圈指令用 v-for：

<div id="todo-app">
  ...
  <!--todo list-->
  <ul>
    <li v-for='todo in todos' :key='todo.id'>
      <span>{{ todo.title }}</span>
      <input type="button" value="標為完成">
      <input type="button" value="刪除">
      <input type="text" value="編輯 todo..."/>
    </li>
  </ul>
  <!-- end todo list -->
  ...
</div>

注意到 v-for='todo in todos' 這種寫法，其含義就是迴圈 todos 列表，將列表的每一項儲存到 todo 變數，迴圈渲染 li 元素的內容。特別注意我們還給 li 元素繫結了一個 key 屬性，這將告訴 Vue 每個渲染的 li 元素都是不同的，因為 id 不同。

你可以刪除或者新增 todos 列表中的元素，然後重新整理瀏覽器，可以看到頁面渲染的內容會跟著變化。你也可以在按 F12 進入瀏覽器的除錯視窗，在命令列（console）輸入命令：

app.todos = [
                {id: 1, title: '整個牛專案'},
                {id: 2, title: '迎娶白富美（或走上人生巔峰）'},
            ]

這個 app 是我們建立的 Vue 例項的名字，然後引用它繫結的資料 todos，我們給它賦了一個新的值，你會實時地看到瀏覽器渲染的結果變化了。Vue 就是這麼神奇！

顯然，人工為 todos 列表新增資料是一點也不好玩的，我們希望在上方的輸入框輸入想要新增的 todo，然後按回車就自動給我們新增 todo，接下來我們就來實現它。

追夢人物的 Vue 系列教程在他的部落格已經全部更新完成，地址：

https://www.zmrenwu.com/courses/vue2x-todo-tutorial/

注意：追夢的部落格在國外所以訪問速度慢，需要耐心等待一下。本號將不再連載本系列，望周知。

相關文章