摘要：前言在學習組件化開發的時候，自己雖然也能編碼實現，但如果不做筆記，只是寫代碼，學習的效果還不夠好。為組件準備好數據之后，就可以開始用它了。新增的代碼如下上面是組件新增的代碼，用戶點擊按鈕之后，會執行該組件內的函數。

在學習 Vue.js 組件化開發 Todo List 的時候，自己雖然也能編碼實現，但如果不做筆記，只是寫代碼，學習的效果還不夠好。只有把自己的實現思路記錄下來，遇到的問題和解決方法也記錄下來，用文字把這個過程梳理清楚，才能對整個項目有更加清晰、準確的認識。

注：該項目通過 vue-cli 搭建，GitHub 上的地址：todo-list。

先寫一個最簡單的組件，就是用 v-for 指令顯示待辦事項清單。數據也是用的本地的數據，這樣在這一步能夠把更多的精力放在學習組件的編寫上。

首先，當然是在 components 目錄下新建 TodoItem.vue 文件，用來顯示待辦事項清單，代碼如下：

在 script 中，name 選項定義了組件的名稱 TodoItem，props 選項則定義了組件所接收數據的名稱 tasks 和類型：數組（Array）。

在 template 中，則在根元素 ul 內，通過 li 元素顯示待辦事項的名稱 task.title。加了另一條語句 :key="task.id"，是因為 Vue 建議在用 v-for 遍歷時，為所遍歷的每一項提供一個唯一的 key 屬性（參考：key）。這一項不加也完全沒關系，只不過 vue-cli 附帶的 ESLint 會有錯誤提示，所以我這里就加上了。

另外這里還有個小知識點，Vue 規定組件的 template 中只能有一個根元素，也就是說下面這種寫法是會報錯的。個人猜測，之所以會有這種規定，也是為了最終渲染出來的 HTML 結構能更加清晰。仔細想想，這個理念也和組件化是相通的，不是嘛？

這個組件最基本的內容已經寫好了，接下來就在 App.vue 中引入它。

引入組件之后，當然還要為它提供數據，這樣組件才有內容可以顯示。這里也有個知識點，組件中的數據對象 data 必須是函數，因為這樣能夠保證組件實例不會修改同一個數據對象。剛開始寫組件的時候可能容易忽略這個知識點，多寫幾次就記住了。

export default {
  name: "app",
  components: {
    TodoItem
  },
  data() {
    return {
      tasks: [
        {
          id: "6b9a86f6-1d1a-558a-83df-f98d84cd87bd",
          title: "JS",
          content: "Learn JavaScript",
          completed: true,
          createdAt: "2017-08-02"
        },
        {
          id: "1211bb33-a249-5782-bd97-0d5652438476",
          title: "Vue",
          content: "Learn Vue.js and master it!",
          completed: false,
          createdAt: "2018-01-02"
        }
      ]
    };
  }
};

為組件準備好數據之后，就可以開始用它了。組件的基本用法也很簡單，按照它的要求提供數據，然后組件就會按照自己設定的樣式把數據顯示出來。

上面的代碼中，調用了 TodoItem 這個組件，并且將父組件中的數據屬性 tasks 綁定到 TodoItem 這個組件的 props 選項上。在 :tasks="tasks" 這句代碼中，等號前的 tasks 是子組件 TodoItem 中定義的名稱，可以近似地理解為“形參”；等號后面的 tasks 則是父組件中的數據屬性，可以近似地理解為“實參”。所以這種用法也可以理解成 :形參="實參"，希望這種寫法能夠幫大家更容易地理解組件傳入數據的語法。而父組件的數據屬性和子組件的 props 選項都用 tasks 這個名稱，是為了保持代碼上的一致性，剛接觸組件的時候可能覺得分不清誰是誰，但是代碼寫多了之后就能體會到這種寫法的好處了，父組件只負責提供數據，子組件只負責使用數據，保持一致的命名，閱讀和修改代碼的時候就能很容易看出來互相之間的關系。

保存代碼，然后在終端中執行 npm run serve，構建工具就會自動編譯，然后在瀏覽器中打開頁面，如果能夠看到類似下圖中的效果，就說明已經寫好了一個最簡單的組件了，接下來就要豐富這個 Todo List 的各項功能了。

要使用 Bootstrap 的樣式，首先需要把它的 CSS 文件引入進來，編輯 public 目錄下的 index.html 文件，在 head 中加入下面的 CSS。后面需要引入 CSS 或者 JS 的時候，都可以在這里引入。當然了，也可以通過 npm install xxx 指令以后端庫的形式引入，不過這樣只能引入 JS，沒法引入 CSS。不過有一天在火車上擼代碼的時候，發現了以后端形式引入庫的一個便利之處，就是它一旦安裝好了，沒有網絡的情況下也完全可以正常用。

接下來就是搭框架，先修改 App.vue，確定整體框架：

在根 div 中加上 class="container"，這樣子元素就可以應用 col-md-8 這樣的網格樣式了。然后在子元素中加上 class="col-md-8 offset-md-2 mt-5"，col-md-8 表示待辦事項占12列寬度的網格中的8列，offset-md-2 表示往右偏移2列之后顯示待辦事項，這樣就能夠居中顯示了。mt-5 則表示待辦事項距離上方有一定空白，留白了才好看。

每個待辦事項要顯示標題、內容、日期，可以用 Bootstrap 的 Custom Content 列表。

觀察上圖對應的代碼可以知道，a 標簽內的 h5 標簽可用于顯示待辦事項的標題，相鄰的 small 標簽可用于顯示時間，a 標簽內最后的 small 標簽則可用顯示于事項的具體內容，因此 TodoItem.vue 組件中可以改成如下內容。

在瀏覽器中看看頁面效果，怎么樣，還不錯吧？

在實際業務中，數據都是放在服務器上，往往會在前端頁面加載完成之后，再向服務器請求數據。這樣前后端分離，讓前端頁面只關注界面部分，數據由后端負責提供，將前后端解耦，就降低了互相之間的依賴性。

要向服務器請求數據，可以用 axios 這個庫，和前面引入 Bootstrap 的 CSS 一樣，編輯 public 目錄下的 index.html 文件，將 axios 這個庫的鏈接加進來。

然后再編輯父組件 App.vue，將數據屬性 tasks 的初始值設置為空數組，在 Vue 實例的 created 這個生命周期鉤子中獲取數據。數據方面參考一個簡單的 JSON 存儲服務這篇文章的建議 ，放在 myjson 上。

const tasksUrl = "https://api.myjson.com/bins/xxxxx";

export default {
  name: "app",
  components: {
    TodoItem
  },
  data() {
    return {
      tasks: []
    };
  },
  methods: {
    fetchData(jsonUrl, obj) {
      axios
        .get(jsonUrl)
        .then(response => response.data)
        .then(data => {
          data.forEach(ele => {
            obj.push(ele);
          });
        })
        .catch(console.log());
    },
  },
  created() {
    this.fetchData(tasksUrl, this.tasks);
  }
};

從上面的代碼可以看到，數據屬性的值保存在 tasksUrl 這個 URL 中，通過 axios 獲取數據。在 Vue 中更新數組，需要用特定的變異方法，才能觸發視圖的更新，也就是上面代碼中的 obj.push(ele)。

另外，上面將更新數據部分的代碼抽離成一個多帶帶的函數 fetchData，這樣能夠提高代碼的可讀性。否則如果 created 這個鉤子中需要執行五六個操作的時候，把具體的代碼全放到這里面，那代碼就亂得沒法看了。

為了優化用戶體驗，可以用 v-cloak 指令，實現組件在數據加載完成之后才顯示的功能。

具體的測試結果，可以看視頻：http://7xq4gx.com1.z0.glb.clouddn.com/v-cloak_fast-3g.mp4。

在上面這個視頻中，通過 Chrome 開發者工具將網速限制為 "Fast 3G" 模式，以便更清楚地展示這個過程。然后點擊刷新按鈕加載頁面，能夠看到頁面在成功獲取到服務器上的數據之后，才會渲染組件內容并顯示出來，在這之前頁面則一直是空白狀態。

前面知道怎么用組件顯示待辦事項清單了，那么顯示一個菜單列表也很容易了，照葫蘆畫瓢就行。

首先在父組件 App.vue 中準備數據 menus。

export default {
  name: "app",
  components: {
    TodoItem,
    TodoMenu
  },
  data() {
    return {
      tasks: [],
      menus: [
        { tag: "all", text: "全部" },
        { tag: "doing", text: "未完成" },
        { tag: "done", text: "已完成" }
      ]
    };
  }
}

然后選擇按鈕的樣式，自己選用了 Outline buttons，組件代碼如下：

與之前編寫 TodoItem 組件時相比，代碼上主要的區別在于 props 的定義更加詳細了，理由參見 Vue.js 官方文檔中的風格指南：Prop 定義。

下面是當前的頁面效果：

基本的功能做出來了，接著來調整一下 TodoMenu 組件的樣式，讓它更好看一些。

首先是要給按鈕之間加上間距，也是前面提到過的留白，就跟設計 PPT 一樣，把頁面塞得滿滿的其實很難看。查看 Bootstrap 的文檔 Margin and padding，知道了可以用 mr-x 這樣的類來設置右邊距，測試了幾個值之后，最終確定為 mr-2。

然后還要給上面的一排按鈕和下面的待辦事項清單之間也加上間距，這里就用 mb-3 設置按鈕的下邊距，之前在 TodoItem 組件中設置的 mt-5 則刪掉。

現在的頁面效果就是這個樣子的了：

查看 Bootstrap 的文檔可以知道，給按鈕添加一個 active 類，按鈕就會處于被點擊的狀態。這樣一來，只需要修改 menus 的數據結構，給每個對象添加一個名為 active 的布爾型變量，然后給 TodoMenu 組件動態綁定 active 類，就能實現頁面加載完成后突出顯示第一個按鈕的功能了。

// App.vue
menus: [
  { tag: "all", text: "全部", active: true },
  { tag: "doing", text: "未完成", active: false },
  { tag: "done", text: "已完成", active: false }
]

除了要在網頁加載完成后突出顯示第一個按鈕，還需要在用戶點擊各個按鈕之后，突出顯示用戶所點擊的按鈕，這樣能夠讓用戶很清楚地看到自己所選中的是哪個按鈕。

實現這個需求的流程如下（用了庫 ramda）：

查找 menus 中 active 屬性為 true 的對象，也就是之前被點擊的按鈕對應的數據。

查找 menus 中當前被點擊的按鈕對應的對象：這個需要在子組件 TodoMenu.vue 中觸發事件，將被點擊的按鈕所對應的數據（menu.tag）傳遞給父組件 App.vue，然后在父組件中查找該數據所對應的對象，如果和第一次查找的對象相同，說明前后兩次點擊了同一個按鈕，那么就不用重復操作了。否則就需要把前一次點擊的按鈕的 active 屬性設置為 false，然后將當前被點擊的按鈕的 active 屬性設置為 true，這樣就能夠突出顯示被點擊的按鈕了。

新增的代碼如下：

上面是組件 TodoMenu.vue 新增的代碼，用戶點擊按鈕之后，會執行該組件內的 activeButton 函數。在函數中會觸發 active 事件，并將當前按鈕所對應對象的 tag 屬性的值傳給父組件。

而上面的這段代碼則是父組件 App.vue 中新增的代碼，父組件監聽到了子組件觸發的 active 事件，就會執行父組件中的 activeButton 函數，對比兩次點擊的是否為同一按鈕，然后根據結果執行對應的操作：如果點擊的是不同的按鈕，則將之前所點擊的按鈕對應的對象屬性 active 值設置為 false，并將當前點擊的按鈕對應的對象屬性的 active 的值設置為 true，Vue 監聽到對象屬性的變化，從而將類名動態綁定到 HTML 標簽上，實現按鈕的突出顯示。

PS：自己之前的實現方案，是通過 jQuery 先將 menus 中所有對象的 active 屬性設置為 false，然后用原生 JS 將觸發了監聽事件對象的 active 屬性設置為 true，雖然代碼也很簡潔，但是代碼的邏輯還是不如用 ramda 這個庫的實現方式清晰。

這個需求可以在上一個需求的流程里完成，就是頁面加載完成時，顯示全部的待辦事項；之后每次用戶點擊按鈕，和前一次突出顯示的按鈕進行對比，如果相同，說明顯示的還是那些待辦事項，自然不用做什么操作；如果不同，那就顯示按鈕所對應分類的待辦事項。

export default {
  data() {
    return {
      currTag: ""
    }
  },
  computed: {
    filteredTasks() {
      if (this.currTag === "all") {
        return JSON.parse(JSON.stringify(this.tasks));
      } else if (this.currTag === "doing") {
        return R.filter(task => task.completed === false)(this.tasks);
      } else if (this.currTag === "done") {
        return R.filter(task => task.completed === true)(this.tasks);
      } else {
        return null;
      }
    }
  },
  methods: {
    fetchData(jsonUrl, obj) {
      axios
        .get(jsonUrl)
        .then(response => response.data)
        .then(data => {
          data.forEach(ele => {
            obj.push(ele);
          });
        })
        .then((this.currTag = "all"))
        .catch(console.log());
    }
  }
}

在上面的代碼中，通過字符串屬性 currTag 標記當前所點擊的按鈕，計算屬性 filteredTaks 則根據 currTag 的值篩選出所要顯示的待辦事項。而在 fetchData 方法中，新增的 .then((this.currTag = "all")) 會在獲取到數據之后設置所要顯示的事項類別，這樣整個流程就完整了。

上面這些只是功能上的變動，在界面部分也要對應調整，這樣才能有更好的用戶體驗。具體來說，就是對于已完成的待辦事項，復選框應為選中狀態，并且文字的顏色要淡一些，這樣才能和未完成的待辦事項區分開來。

而實際的代碼其實很簡單，就是將傳入組件的數據與 HTML 元素動態綁定：

下面是調整好界面之后的效果圖：

首先設計編輯界面的基本樣式，在這里用的是 Bootstrap 中的 Card 這個組件，這樣可以把內部的元素都包裹到 card 中。待辦事項的標題和內容顯示在 textarea 元素中，待辦事項的創建時間則顯示在 card-footer 中。這個組件的代碼如下所示：

從上面的代碼中可以看到，將 id 為 title 的 textarea 與 task.title 屬性進行了雙向綁定，id 為 content 的 textarea 則與 task.content 屬性進行了雙向綁定，分別用來顯示待辦事項的標題和內容。

在父組件 App.vue 中，對象類型的數據屬性 currTask 保存子組件 TodoEdit.vue 中所要顯示的待辦事項，并通過布爾類型的計算屬性 renderEdit 決定是否要渲染子組件 TodoEdit.vue。在用戶還沒有點擊待辦事項的時候，還不需要渲染編輯界面，數據屬性 currTask 還是個空對象，計算屬性 renderEdit 為 false。在用戶點擊了某個待辦事項之后，需要在編輯界面中顯示數據屬性 currTask 中的內容，計算屬性 renderEdit 為 true，這樣才會渲染子組件 TodoEdit.vue。

父組件 App.vue 中新增的代碼如下所示：

從上面的代碼可以看到，在頁面及數據加載完成之后，用戶點擊待辦事項之前，不會顯示編輯界面。用戶點擊待辦事項之后，將當前事項的信息保存至數據屬性 currTask 中，計算屬性 renderEdit 此時的值也為 true，便會渲染子組件 TodoEdit.vue，并將數據屬性 currTask 的內容顯示在子組件中。

完成之后的效果如下圖所示：

按照上面的方法完善代碼之后，現在可以顯示待辦事項的編輯界面了。但是點擊待辦事項的話，瀏覽器地址欄中的地址會在最后附加上一個 # 字符：http://localhost:8080/#。如果不想有這種變化，那么就可以去掉 TodoItem.vue 組件的 href 屬性，然后設置鼠標懸浮至該組件的 a 標簽時顯示手型指針即可：

此外，由于 TodoEdit.vue 組件中，顯示待辦事項標題和內容用的都是 textarea 標簽，而這個標簽是可以通過拖動其右下角的標記來改變其大小的。但是對于待辦事項而言，標題的文字數量一般都不多，不希望改變其大小，那么就要為這個標簽進行多帶帶的設置，設置其 resize 屬性為 none 即可。

此時的效果如下所示：

這個功能所要實現的效果，就是用戶連續多次點擊同一個待辦事項時，編輯界面會在顯示/隱藏兩種狀態之間來回切換，給用戶以更好的使用體驗。

最開始的思路：

新建數據屬性 prevId 用于保存用戶上一次點擊的待辦事項的 id 屬性，并且將用戶本次點擊的待辦事項的 id 屬性與之進行對比。

如果兩個屬性值不同，說明前后兩次點擊的是不同的待辦事項，就不需要隱藏編輯界面，并且將用戶本次所點擊的待辦事項的 id 屬性保存在 prevId 中，這樣用戶下一次再點擊待辦事項，就能與更新后的 prevId 屬性進行對比。

如果兩個屬性值相同，說明兩次點擊的是同一個待辦事項，那么 prevId 屬性就沒必要更新了，同時要切換編輯界面的顯示狀態。

從前面的代碼可以知道，計算屬性 renderEdit 的值決定了是否要渲染組件 TodoEdit.vue，數據屬性 currTask 非空就會渲染。而用戶首次點擊待辦事項之后，currTask 就永遠都是非空的了，也就意味著編輯界面一直會被渲染。而這里需要實現的功能，是要讓這個組件在顯示/隱藏兩種狀態之間來回切換，需要注意的是，組件的“渲染”和“顯示”是兩回事，被渲染出來的組件，可以通過設置其 display 這個 CSS 屬性的值為 false 來把它隱藏了。那么 Vue.js 中有沒有類似的方式實現這個功能呢？當然有！那就是 v-show 指令。該指令后跟的表達式只要為真值，就會顯示該元素，否則就會隱藏該元素。這不剛好就是我們需要的功能嗎？這樣一來，就可以通過優化代碼邏輯，讓上面新建的數據屬性 prevId 來完成兩件事：一方面這個數據屬性可以用來保存每次點擊的待辦事項的 id 屬性，另一方面還可以用它來決定是否要顯示編輯界面。啊哈，一舉兩得，是不是很爽？另外，prevId 這個名稱只是表示了它最原始的含義，其實可以重命名為 showEdit，用來表示它最終的業務邏輯，這樣在閱讀代碼的時候就更容易理解了。下面就是優化后的代碼邏輯：

頁面加載完成，showEdit 為空。

首次點擊某個事項，保存 id 至 showEdit。

之后再點擊同一個事項，id 與 showEdit 相同，則清空 showEdit。

點擊不同的事項，id 與 showEdit 不同，則更新至 showEdit 中。

流程已經很清楚了，代碼自然也是水到渠成：

俗話說優化無止境，上面的 editTask 方法中新增的代碼，其實還可以進一步優化，不知道你有沒有想到該如何優化呢？快動手試試吧！

Collapsible contents (code block) in comments / spoiler tag · Issue #166 · dear-github/dear-github：用 Markdown 語法，實現內容的折疊效果。不過最后呈現出來的效果不好，就沒有用上。