Vue.js 學習資源

我堅持今天一定要寫點什麼東西 (別問我在堅持什麼 XD)，所以先來談談 vue.js 這個 Library (暫時我還不知道，該定義它是 Library 還是 Framework，就目前的感覺，我覺得較像 Library )。


以目前的前端比較紅的幾個 Lib/Framework，你可能很常聽到以下幾個選擇:
1. React (這...不用我說了吧XD)
2. Angular 2 (但是，正式版還未 release，快要了.. XD)
3. Vue.js

關於 React 的關鍵字，你要想到 Component (View 的組件化), Virtual DOM, Flux (單向數據流概念)等等。它是 Facebook 建立，一個 JavaScript 的 Library。React 現在用的人蠻多的，不過對我自己而言，要看專案性質。目前我個人比較介意的是 ES6 要轉 ES5 的問題，覺得囉唆XD，若不是整個團隊都在使用 React，其實他的學習曲線以及周邊開發配備 (像 Webpack...)，我個人覺得都要花時間適應...，另一個就是，上網找一些問題的解法，可能有新舊寫法的差別，你要有自己轉換的能力。

Angular 2，完全不同於 Angular 1 的做法 (但你現在已經可以找到很多教學文摟!)，只是開發 ng2 有三種方式，TypeScript, Dart, JavaScript，這個也只能觀望未來的開發者是用什麼來寫了...。我現在還沒有深入的研究的意思，主要是工作也還沒用到，不過當年 Angular 1 出來的時候，很多公司都採用 Angular 1，不知道這些維持用 Angular 1的專案，未來會怎麼走..我也是挺好奇的。

那 Vue 呢?! 其實有在寫 Laravel 的人都知道，他也出來好一陣子了，不知道這樣說會不會有冒犯到 vue 的意思，我自己覺得 vue 蠻像 Angular 的，但是他輕量很多，拔掉一些很繞口的專有名詞之物，如 "相依性注入"，vue 把事情變得簡單很多，也支援雙向綁定 (Two-Way Data Binding，只不過 vue 預設是以單向綁定，)。我最近開始用他只是因為快。而且很多用法跟 ng 非常類似，如:

(左 angular 1)    (右 vue)

• ng-repeat => v-for, v-repeat
• ng-class => v-bind:class
• ng-if => v-if
• ng-show => v-show

大部分的 expression，若有寫過 angular，會很好轉移。這點倒是蠻無痛的。
如果你沒有學過 Angular 也沒有關係，過去你有曾經使用 jQuery 發送 ajax 取得 json 資料，然後 for loop 這包 json，不斷地組成 html 字串，最後在塞到畫面的經驗嗎？ 那麼我真的建議你可以看看 vue 的 list rendering，你只要發送 api，把資料更新到 vue 的 data 裡面去，接著準備要被重複顯示的 html 區塊，在裡面下好 v-for，這些簡單神奇的事情就會發生了，如果可以的話，就不用再自己組奇怪的 html 字串了。這只是一個比較簡單的開始 XD

所以，說好的學習資源呢?! 說真的我覺得官網寫的很清楚。若你不喜歡看英文可以看中文版。

• https://vuejsdevelopers.com/ 大推!
• https://github.com/vuejs/awesome-vue awesome vue 整理出很多 vue 的工具, 套件, UI 組件，你可以從這裡開始逛。
• 新手向：Vue 2.0 的建议学习顺序
• https://vuejs.org/guide/index.html vue 官網的 getting started。
• https://gist.github.com/hashrock/f575928d0e109ace9ad0 vuejs.md 初心者用資料
• http://www.slideshare.net/coulix/vuejs-testing 一個 unit test 的 vue slide.
• https://github.com/vuejs/vue-devtools Chrome extension，用於開發 vue 時用的工具
• https://cn.vuejs.org/guide/comparison.html Vue 與其他框架的比較，你一定要看看!

後記

我切入 vue 的時間點其實有點怪，因為我不想 maintan 一些用 jQuery 字串組出來的 dom 再 append 到某個大的 div上這種做法(沒有要怪到誰的意思，專案本身就有歷史包袱)，再者也沒有 data binding，如果要 ajax 拿一次新的資料，等於要在呼叫某個可以組出這堆 div 字串的 function，然後再做一樣的事情。

我用 vue 重寫某部分功能不需要半天的時間，而且 HTML 結構維持在 HTML 檔 (聽起來也是很合理...，只差我要不要把某部分拆出來變成 vue 的 component)，init 一個 vue 並不會跟 jQuery 有任何衝突，只需要把 vue.min.js 下載下來。只是在 maintain 之間，要 Regressive Enhancement，我的目標是希望把 jQuery 很多需要 ajax 後的事情都搬到 vue 去...。 中途會有一些 jQuery 會需要更新 vue 裡面的資料的這種互相溝通的情況，倒也算是一段陣痛期... ，總是會需要經過這一段的，誰都希望專案好 maintain 一點 QQ。