由 jQuery 轉 VueJS 的正確姿勢

Slide 1

Slide 1 text

由 jQuery 轉 VueJS 的正確姿勢 Kuro Hsu @ Vue.js 台灣 Meetup 2017#01

Slide 2

Slide 2 text

http://vue.tw VueJS 台灣有專屬網址了了

Slide 3

Slide 3 text

Kuro Hsu http://kuro.tw [email protected] @kurotanshi

Slide 4

Slide 4 text

開始之前，先看實際範例例

Slide 5

Slide 5 text

http://jsbin.com/ziseyikove/1/edit?html,js,output

Slide 6

Slide 6 text

http://jsbin.com/dufadosocu/1/edit?html,js,output

Slide 7

Slide 7 text

好像沒什什麼差別嘛⽤用 Vue 寫的⾏行行數還比較多

Slide 8

Slide 8 text

⼗十個前端有⼗十⼀一個都討厭的表單驗證

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

SELECTORS HELL http://jsbin.com/cilufagĳa/1/edit?html,js,output ⼀一⾴頁投影片還放不下

Slide 11

Slide 11 text

http://jsbin.com/kucawilahu/1/edit?html,js,output

Slide 12

Slide 12 text

http://jsbin.com/kucawilahu/1/edit?html,js,output

Slide 13

Slide 13 text

還是沒什什麼差別...嗎？

Slide 14

Slide 14 text

• 以操作 DOM 為基礎的開發模式 • 特性： • 所有操作都是以 DOM 為基礎出發 • 屬於指令式編程 ( Imperative programming ) • 開發模式較直觀，但容易易陷入「⾒見見樹不⾒見見林林」的迷思

Slide 15

Slide 15 text

• 以操作物件模型為基礎的開發模式 • 特性： • 關注點放在資料 ( Model ) 與狀狀態，⽽而不是 DOM • 屬於宣告式編程 ( Declarative programming ) • 開發模式相對抽象，也簡化繁複操作元素的開發模式

Slide 16

Slide 16 text

Source: Vue.js: The Progressive Framework  https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/ VueJS - 漸進式框架 core vue-router vuex vue-loader webpack …

Slide 17

Slide 17 text

將 Vue.js 加入現有專案

Slide 18

Slide 18 text

直接引入 vue.js

Slide 19

Slide 19 text

http://vuejs.org/guide/installation.html

Slide 20

Slide 20 text

jQuery 開發者關⼼心的事... • DOM Selectors • Attrs / Props 的 get 與 set • Class、樣式與動畫 • 事件處理理 • Ajax • 是否能與現有的 jQuery plugins 相容

Slide 21

Slide 21 text

操作網⾴頁元素

Slide 22

Slide 22 text

操作網⾴頁元素都說了了不要直接操作 DOM

Slide 23

Slide 23 text

Hello Vue ! http://vuejs.org/guide/#Handling-User-Input

Slide 24

Slide 24 text

MVVM (Model-View-ViewModel)

Slide 25

Slide 25 text

http://jsbin.com/kubojanuqi/1/edit?html,js,output 元件系統

Slide 26

Slide 26 text

• Vue 採⽤用 mustache 語法作為 template ，  將值置入 {{ }} 即可。 Message: {{ msg }} 單次綁定:

HTML 渲染:

HTML 屬性:

Slide 27

Slide 27 text

以運算式作為資料來來源 • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} • {{ var a = 1 }} • {{ if (ok) { return message } }} 以下是不合法的運算式：

Slide 28

Slide 28 text

Vue 實體屬性

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

v-model 表單綁定 http://jsbin.com/yiwukehida/1/edit?html,js,output

Slide 31

Slide 31 text

v-bind 屬性綁定 http://jsbin.com/mogosowola/1/edit?html,js,output

Slide 32

Slide 32 text

事件處理理: v-on

Slide 33

Slide 33 text

click http://jsbin.com/tuzeyusuje/2/edit?html,js,output

Slide 34

Slide 34 text

修飾⼦子 Modiﬁers

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Class、樣式與動畫

Slide 37

Slide 37 text

http://jsbin.com/lovirumofo/1/edit?html,js,output

Slide 38

Slide 38 text

v-if / v-else http://jsbin.com/jexojeqiﬁ/1/edit?html,js,output

Slide 39

Slide 39 text

v-show http://jsbin.com/nimalemoko/1/edit?html,js,output

Slide 40

Slide 40 text

v-if with template 注意： v-show 不⽀支援 template。 http://jsbin.com/tufoyĳohu/1/edit?html,js,output

Slide 41

Slide 41 text

transitions

Slide 42

Slide 42 text

fade in Vue (Using CSS) http://jsbin.com/teﬁkesaha/1/edit?html,js,output

Slide 43

Slide 43 text

slide in Vue (Using jQuery) http://jsbin.com/mekocojujo/1/edit?html,js,output

Slide 44

Slide 44 text

Ajax • Vue.js 本⾝身沒有提供 ajax 的功能，所以開發者可以⾃自⾏行行使⽤用習慣的⽅方式取得資料。 • 像是⼤大家都很熟悉的 jQuery.ajax • 如果不想載入 jQuery，當然也可以⽤用   axios 這個專⾨門處理理 $http 的外掛模組。

Slide 45

Slide 45 text

$.ajax http://jsbin.com/luqihabele/1/edit?html,js,output

Slide 46

Slide 46 text

axios https://github.com/mzabriskie/axios http://jsbin.com/voqegupaje/edit?html,js,output

Slide 47

Slide 47 text

透過 this 存取 data 內容

Slide 48

Slide 48 text

v-for ⾃自動⽣生成列列表 http://jsbin.com/bayutonuha/1/edit?html,js,output

Slide 49

Slide 49 text

與現有的 jQuery plugins 相容 ?

Slide 50

Slide 50 text

以 jQuery UI 為例例 • 將 jQuery, jQuery UI 等 JS library 載入 • 將原本的 input 包裝成⼦子組件，如 • 透過 props 傳遞 date-picker 的參參數，原本 jQuery UI 做的事情則在 mounted 後交還給 jQuery UI 處理理。 • 更更新後的內容再透過 $emit 回傳給上層元件

Slide 51

Slide 51 text

https://jsbin.com/dokezajixo/1/edit?html,js,output

Slide 52

Slide 52 text

https://jsbin.com/dokezajixo/1/edit?html,js,output

Slide 53

Slide 53 text

原本 jQuery UI 控制項的程式

Slide 54

Slide 54 text

Vue 1.x Vue 2.0 hook 說明 init beforeCreate 元件實體剛被建立，屬性計算之前。 created created 元件實體已建立，屬性已綁定，但 DOM 還沒⽣生成。 beforeCompile beforeMount 模板 (template) 編譯或掛載⾄至 HTML 之前 compiled mounted 模板 (template) 編譯或掛載⾄至 HTML 之後 ready mounted 模板 (template) 編譯或掛載⾄至 HTML 之後 - beforeUpdate 元件被更更新之前 - updated 元件被更更新之後 - activated keep-alive ⽤用，元件被啟動時呼叫 - deactivated keep-alive ⽤用，元件被移除時呼叫 beforeDestory beforeDestory 元件被銷毀前呼叫 destoryed destoryed 元件被銷毀後呼叫

Slide 55

Slide 55 text

⼩小結 • 使⽤用 VueJS 開發的第⼀一件事就是拋開直接操作 DOM 的觀念念。 • jQuery 與 VueJS 兩兩者並不衝突，VueJS 重視資料綁定及畫⾯面元件，⽽而 jQuery 的 ajax 與 animation 等效果是 VueJS 所缺少的。 • 如果要兩兩者並存，⼀一定要在 Vue 實體 mounted 完成後再由 jQuery 來來處理理，但切記不要直接操作 DOM，以免造成與 Vue 實體的資料綁定互相衝突。 • VueJS 不是為了了取代 jQuery ⽽而⽣生。

Slide 56

Slide 56 text

• 為了了解決現有的問題 • 為了了排除 / 減少將來來可能⾯面臨臨的問題 • 不要⼿手拿槌⼦子就把所有東⻄西當釘⼦子敲技術選擇適才適所