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

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

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

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

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

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

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

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

這個組件最基本的內(nèi)容已經(jīng)寫好了，接下來就在 App.vue 中引入它。

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

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"
        }
      ]
    };
  }
};

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

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

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

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

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

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

每個待辦事項要顯示標(biāo)題、內(nèi)容、日期，可以用 Bootstrap 的 Custom Content 列表。

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

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

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

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

然后再編輯父組件 App.vue，將數(shù)據(jù)屬性 tasks 的初始值設(shè)置為空數(shù)組，在 Vue 實例的 created 這個生命周期鉤子中獲取數(shù)據(jù)。數(shù)據(jù)方面參考一個簡單的 JSON 存儲服務(wù)這篇文章的建議 ，放在 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);
  }
};

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

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

為了優(yōu)化用戶體驗，可以用 v-cloak 指令，實現(xiàn)組件在數(shù)據(jù)加載完成之后才顯示的功能。

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

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

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

首先在父組件 App.vue 中準(zhǔn)備數(shù)據(jù) menus。

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

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

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

下面是當(dāng)前的頁面效果：

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

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

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

現(xiàn)在的頁面效果就是這個樣子的了：

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

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

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

實現(xiàn)這個需求的流程如下（用了庫 ramda）：

查找 menus 中 active 屬性為 true 的對象，也就是之前被點擊的按鈕對應(yīng)的數(shù)據(jù)。

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

新增的代碼如下：

上面是組件 TodoMenu.vue 新增的代碼，用戶點擊按鈕之后，會執(zhí)行該組件內(nèi)的 activeButton 函數(shù)。在函數(shù)中會觸發(fā) active 事件，并將當(dāng)前按鈕所對應(yīng)對象的 tag 屬性的值傳給父組件。

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

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

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

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 標(biāo)記當(dāng)前所點擊的按鈕，計算屬性 filteredTaks 則根據(jù) currTag 的值篩選出所要顯示的待辦事項。而在 fetchData 方法中，新增的 .then((this.currTag = "all")) 會在獲取到數(shù)據(jù)之后設(shè)置所要顯示的事項類別，這樣整個流程就完整了。

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

而實際的代碼其實很簡單，就是將傳入組件的數(shù)據(jù)與 HTML 元素動態(tài)綁定：

下面是調(diào)整好界面之后的效果圖：

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

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

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

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

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

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

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

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

此時的效果如下所示：

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

最開始的思路：

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

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

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

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

頁面加載完成，showEdit 為空。

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

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

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

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

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

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