本文是鐵人賽的第三十篇文章，在這三十天中，我把 Vue.js 又從頭在看了一遍，原以為已經熟悉的框架，沒想到在寫文章的時候還是遇到了很多不清楚或是觀念模糊的地方，在這些時間內又重新理了一次 Vue.js 相關的知識，之前原本比較模糊的觀念又更加的具體。

本來想要寫到原碼分析的，沒有想到 30 篇的篇幅還是太短了，之後有機會在來深入研究，謝謝每一個閱讀本系列文的人，有任何問題都可以留言，在我能力範圍的都會為各位解答，如果文章有任何的錯誤也請跟我說，謝謝，我們下次還有機會再見。

每篇文章的簡介

基礎知識

• 初探 Vue.js : 基本原理及建立第一支應用
• Vue 實例 : Vue 物件實體及組件
• Vue 實體的生命週期 : Vue 實體的鉤子函數
• 模板語法 Part 1 - Mustache 標籤 : 模板響應及 Mustache 標籤
• 模板語法 Part 2 - Directives : v-html 、 v-if 、 v-bind 及 v-on Directives 的介紹
• 計算屬性 : 計算屬性及與方法的比較
• 監聽器( watch ) : 監聽器的介紹
• 計算屬性跟監聽器的比較 : 比較計算屬性及監聽器的差異
• Class 的綁定 : 使用 v-bind 綁定 class
• 樣式綁定 : 使用 v-bind 綁定 Style
• 條件渲染 : 介紹 v-if 、 v-else 、 v-else-if 的使用方式
• 列表渲染 : v-for 介紹
• 響應系統 : 整個 Vue.js 響應系統介紹
• 使用 set 新增實體中的屬性 : 使用 set 在 mounted 後新增實體屬性
• 事件處理 : 事件處理的介紹
• v-on 的修飾符 Part 1 - 事件修飾符 : 事件修飾符的介紹
• v-on 的修飾符 Part 2 - 按鍵修飾符 : 按鍵修飾符的介紹
• 表單綁定 : form 上的 input 、 select 的綁定方式

組件

• 組件基礎 : 組件概念介紹
• 組件間的資料傳輸 : 使用 props 屬性及 $emit 事件傳輸組件間的資料
• 組件註冊 : 組件的全域及區域註冊
• props 屬性 : 使用 props 屬性由上到下組件的資料傳輸
• 屬性驗證 : 屬性的各種驗證方式定義
• 屬性注意事項 : 沒有定義在 props 屬性上的 DOM 屬性介紹
• 客製事件 : 客製組件自己的事件
• 插槽 : 在父組件中定義子組件內的內容
• 動態組件 : 不會被銷毀的組件定義
• 非同步組件 : 組件的非同步定義方式

推薦網站

Vue.js 在網路上有很多的資源，下面是我自己用過覺得不錯的學習資源:

• CodePen : 線上的網頁編輯器
• Vue.js 官網 : Vue.js 官方文件
• MDN Web Docs : 網頁相關知識文件
• Vue.js 技术揭秘 : Vue.js 原碼分析

GitHub Repository

最後附上GitHub的連結，希望有時間可以補齊系例文。