Sharing material for VueJS without sample code.

1. VueJS
20150630
Daniel.Chou

2. Why use VueJS?

3. jQuery不是好好的??

4. 我也很曾經很愛jQuery…

5. 爆炸了的event…
• Shit，這個$(“.eIsRepeat”)到底是誰??要又去
HTML裡面去找 >”<

6. 爆炸了的欄位對應…像這樣
• 你覺得還好?

7. 不然就這樣….
• 處理資料順便hide() and Show()

8. 大絕招!?...
• 因為要動態建立表單
• HTML給寫在JS內了… >”<

9. 這只是簡單小系統而已

10. VueJS就在解決這些問題

11. What is VueJS?

12. Vuejs is..
• 有效快速建立互動網頁的lib
– 只專注在ViewModel layer上
– 以抽象方式產生Directives, Filters去操作DOM。
• MVVM?
– Model、view、viewmodel

13. Philosophy
• 建立可data-binding的HTML component組件。
– 可快速建立prototype、可混用jQuery、jQuery UI…。
– 參考了
• AngularJS
• KnockoutJS
• Ractive.JS
• Rivets.JS
• ReactJS 等特點。
– 並不是萬能的Framework，but….
– 簡單、功能之間取個平衡點。

14. MVVM 基本上限制了你的寫法
• Pros
– 開發快、不用想太久。
– 事後好維護。
– Template與Data可分工
– 低耦合架構、可單元測試、整合測試。
• Cons
– 需要學習成本。
– 版本迭更快。

15. VueJS 開發思考順序
• 準備好JSON
• 以Component為單位
– 寫UI
– 初始化資料
– 對外參數
– 對內參數
– 定義過濾器
– Event設定
• 直接就用在HTML上
• JSON from Object.
• Component.
– Template
– fetchData
– Props (new!!)
– Data
– Filter
– Methods
• <my-component></my-
component>

16. 其他請看Sample