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

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

後記

我切入 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。

留言

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源