2016年6月9日 星期四

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。

2 則留言:

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

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...