多年來，Vue.js 都是令人激動的前端元件中相對簡單的一個。使用它非常直觀的 API， 以及應用的普適性，它能獲得這麼多的擁躉毫不奇怪。
如果你也想學習 VUE，那麼就跟我一步步的學吧！相信我，這是最好的 VUE 入門教程！
其他相關文章：
1. [完結] The PHP Practitioner [Laracasts 免費影片中文語音]
2. [完結] Laravel 6 From Scratch [Laracasts 免費影片中文語音]
3. [完結] Laravel 6 實戰 - 寫一個 Twitter - [Laracasts 免費影片中文語音]
1.基礎資料繫結
讓我們從一個基礎資料繫結開始我們的 VUE 學習。你會初步的看到這個框架的美妙之處，自動化的實現和互動性。
2.設定 VUE 開發工具
讓我們馬上安裝 VUE 開發工具。你會看到，它給我們獲取頁面例項的介面。特別在早期，你會充分的受益於這個 Chrome 外掛。
3.列表
現實中，我們通常會更多的用到陣列而不是字串。本課，你會學習到如何使用 v-for 指令來過濾一個列表的內容，然後把它們渲染到頁面上。我們同時也會看看如何進行互動。
4.VUE 事件監聽器
在之前一課，我們預設使用了傳統事件監聽器和 DOM 遍歷。幸好我們透過 VUE 可以更簡單的實現這個功能。我們會講解 v-on 指令的使用來註冊事件監聽器。
5.屬性和類繫結
我們還沒介紹 Vue 裡的屬性繫結。這是必須要理解的關鍵概念，所以確保認真觀看本課。我們可以使用 v-bind 指令來繫結我們模型中的引數到元素的屬性。
6.計算引數
通常我們可能需要對某些資料進行一些計算，在渲染到頁面之前。這時候，Vue 的計算引數就可以滿足我們的需求。
7.元件基礎
我們開始學習 Vue 的元件。我們會一直用到這些，一旦你把 Vue 融入日常工作，所以接下來的課程要好好看。
8.元件中的元件
我們現在只學習瞭如何建立單個元件，當然，我們可能需要在元件中包含子元件。本課我們就來看一些基礎例子。
9.元件實戰練習一：Message
我們開始建立一個實戰元件的案例學習。我們先來個簡單的，轉換 Bulma 的 message 成為一個完全的 Vue 的帶行為的元件。
點選檢視B站影片>>>
10.元件實戰練習二：Modal
我們來進行下一個元件練習。傳統的 Modal 元件提供了一些教學的關鍵點，我們來學習元件之間如何交流。如果一個 Vue 元件需要被另一個元件的某個行為通知，應該如何去做？我們如何實現？
11.元件實戰練習三：Tabs
我們再來看一個元件實戰，然後再講新的話題。我們來重建一個新的 tabs 功能，這個很常見。這會讓我們學習到很多有趣的技巧。
12.元件資訊傳遞案例1：自定義事件
讓我們看看我們還能做些什麼，當需要在 Vue 元件之間傳遞資訊時，或者換句話說，一個元件如何告訴另一個元件某個特定的行為或者事件發生了？
13.元件資訊傳遞案例2：事件排程程式
處理元件之間資訊傳遞的下一個選項是建立自己的時間排程程式。別擔心，它比它聽起來簡單多了，因為 Vue 已經實現了這些介面！
14.給 Slots 命名
目前為止，我們只瀏覽了預設的元件 slot 。換句話說，我們只能把內容插入到 slot 標籤的位置。那麼，我們有辦法進行更多的操控嗎？我們來用 Modal 元件進行演示。如果你想插入一個 header ，然後再插入一個 footer ，那麼給 slots 命名就可以了。
15.單次使用的元件和行內模板
並不是所有的元件都需要重複使用。有時候，一個單次使用的，檢視專用的元件恰恰是最適合的。本課，我們一起看看基本概念，然後討論如何使用 inline-template 方法直接把模板巢狀在 HTML 檔案中。
16.webpack 和 vue-cli
我們來專注於檔案結構，並且我們在實際應用中如何配置 Vue。也就是說，我們要同時學習 webpack 和 vue-li 。我事先警告大家，這個過程會有些令人困惑。但是跟著我的講解，我們會得心應手的。
17.實時模組替換
實時模組替換是非常酷的。它會在你每次改變模組的時候自動重新整理頁面。而更加棒的是，所有元件的狀態都是保持不變的。考慮一下它類似於你應用的每個模組的實時過載。本課，我們快速的講解它們是如何做到的。
18.Vue 透過 Axios 實現 Ajax 請求
Vue 並不提供 Ajax 功能。我們可以利用整個 JavaScript 社群提供的類庫。也許你已經使用 jQuery 了？如果是的，那麼 $.ajax 就可以實現 ajax 請求。
19.物件導向的表單：第一部分
我們來看看一些技巧，可以簡化我們的表單建立。如果你注意到你自己總是重複寫一些表單程式碼，那麼何不抽取一個 Form 類呢？讓我們一起來看看吧！
20.物件導向的表單：第二部分
現在我們的錯誤處理已經有了自己的類了，現在我們開始專門編寫 Form 類。它負責初始化表單，傳送 AJAX 請求到伺服器。準備好開始了嗎？
一旦你完成了本課，就輪到你自己行動了。你如何把它們應用到自己的程式簡化自己的表單呢？試試看，分享出來吧！
21.物件導向的表單：第三部分
我們再花一節課時間，重構一下我們的表單，順便再對前兩課做一些說明。我們要讓我們的 Form 再提交以後返回一個 Promise ，我們會建立一些 AJAX 的幫助函式，最後，我們重構兩個方法來使程式碼更加清晰。
22.Webpack 配置從零開始寫
我們已經學了一點關於 vue-loader，用於學習的目的，我們來從零開始寫一個 Webpack 的配置檔案，這樣我們可以學會抽取和匯入模組。這可以讓你們打好堅實的基礎，並且也讓大家有機會看到這些東西到底多麼強大（剛開始確實也是十分令人困惑）。別擔心，下節課，我會教你一些方法來簡化使用 Webpack。
23.認識 Laravel Mix
有一個問題，對於任何已有的工具，對於任何一個新專案，我們是不是要一遍又一遍的去寫同樣的配置檔案呢？如果我們能夠為 80% 的簡單需求使用者寫好基本配置，它們只希望通用的 ES2015 加上模組編譯，一些 CSS 處理和一些其他常見任務。而對於剩餘的 20% 使用者，他們又能夠透過對背後的配置進行調整來實現他們自己的需求。上面說的，實際上就是 Laravel Mix 所實現的。
24.共享狀態基礎
我們來學習共享狀態。我們一定會很快遇到此類需求的。如果你又多個 Vue 例項或者元件，它們需要訪問相同的資料，那麼它們就需要進行相互的資料同步——我們該怎麼做？
25.自定義 input 元件
你一定會遇到需要在自己的元件內包裹一個 input 的時候。這時候，你可以有一個唯一的地方去處理資料清理，驗證，儲存以及一些列行為等。然而，在這個過程，你可能會發現，v-model 指令不再像往常那樣有用。
本課，我們會了解到，Vue 的 v-model 指令的本質是什麼，以及我們如何自定義任何一個元件。
26.Vue SPA 要點：路由
作為一個工作流練習，在接下來幾課中，我們會學習一些關於使用 Vue 2 建立完整 SPA 應用的一些關鍵要點。首先，我們需要建立客戶端的路由，然後把它們整合到 Vue 中去。和往常一樣，我們會從零開始寫，然後逐步建立起我們的專案。
27.SPA 和後端
一個單頁面應用仍然需要從後端獲取資料，本課，我們會利用一下 Laravel 來構建一個 Status 模型，然後建立一些資料。然後，一旦建立了必要的路由，我們就可以透過 JSON 獲取資料。這樣，Vue 和 Axios 就可以很容易的從我們的伺服器獲取資料了。
28.Vue 過濾器
前一節課，我們採用了一個簡單的函式來實現將日期格式化成為人類可讀的模式。但是，Vue 過濾器可能是一個更加合適的方法，來實現類似的簡單操作。
29.專門的 Form 元件
我們繼續我們的 Stream 應用建設，看看新增新的 Status 的實現。為了實現這個功能，我們建立了一個專門的表單元件，然後引入了我們之前寫的 Form 和 Errors 類，參看我們19、20、21，三節課的內容。隨後我們更新了後端 laravel 的服務端程式碼。
30.測試 Vue
本課，我們配置了非常棒的 Ava 測試框架，然後測試一個非常基礎的 Vue 元件，從零開始編寫。你會看到，這裡會有些小的問題需要解決的。
31.Vue 元件職責
我們來花點時間討論結構和職責，關於你寫的 Vue 元件。特別的，我們會看一個可以被抽取出來的子元件。
32.Vue 次級類
時不時的，我們會發現某些特定的元件會有一些特別的功能。為了避免一遍遍的複製貼上這類邏輯，還有什麼其他辦法嗎？當然有，我們可以為了這個目標建立一個混合體，我們可以建立一個專門的次級類。本課，我們就使用常見的 collection 概念來演示這個流程。
33.限制範圍的 Slots
限制範圍的 Slots 讓我們可以往任何給定的 Vue 元件中插入一個合理的模板，並且你可以傳入資料。如果你想改寫一個父標籤中的給定 slot，但是不能改寫底層的資料，那麼限定範圍的 slot 模板就是你的解決方案。
本作品採用《CC 協議》，轉載必須註明作者和本文連結