Upgrade to Pro — share decks privately, control downloads, hide ads and more …

由 jQuery 轉 VueJS 的正確姿勢

由 jQuery 轉 VueJS 的正確姿勢

VueJS 台灣 Meetup #1
2017/06/01

Kuro Hsu

June 01, 2017
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

  1. • 以 操作 DOM 為基礎 的開發模式 • 特性: • 所有操作都是以

    DOM 為基礎出發 • 屬於指令式編程 ( Imperative programming ) • 開發模式較直觀,但容易易陷入「⾒見見樹不⾒見見林林」的迷思
  2. • 以 操作 物件模型 為基礎 的開發模式 • 特性: • 關注點放在資料

    ( Model ) 與狀狀態,⽽而不是 DOM • 屬於宣告式編程 ( Declarative programming ) • 開發模式相對抽象,也簡化繁複操作元素的開發模式
  3. jQuery 開發者關⼼心的事... • DOM Selectors • Attrs / Props 的

    get 與 set • Class、樣式與動畫 • 事件處理理 • Ajax • 是否能與現有的 jQuery plugins 相容
  4. • Vue 採⽤用 mustache 語法作為 template ,
 將值置入 {{ }}

    即可。 <span>Message: {{ msg }}</span> 單次綁定: <div v-once>{{ msg }}</div> HTML 渲染: <div v-html="raw_html"> HTML 屬性: <div id="item-{{ id }}"></div>
  5. 以運算式作為資料來來源 • {{ number + 1 }} • {{ ok

    ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} • {{ var a = 1 }} • {{ if (ok) { return message } }} 以下是 不合法 的運算式:
  6. 以 jQuery UI 為例例 • 將 jQuery, jQuery UI 等

    JS library 載入 • 將原本的 input 包裝成⼦子組件,如 <date-picker> • 透過 props 傳遞 date-picker 的參參數,原本 jQuery UI 做的事情則在 mounted 後交還給 jQuery UI 處 理理。 • 更更新後的內容再透過 $emit 回傳給上層元件
  7. 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 元件被銷毀後呼叫
  8. ⼩小結 • 使⽤用 VueJS 開發的第⼀一件事就是拋開直接操作 DOM 的觀 念念。 • jQuery

    與 VueJS 兩兩者並不衝突,VueJS 重視資料綁定及 畫⾯面元件,⽽而 jQuery 的 ajax 與 animation 等效果是 VueJS 所缺少的。 • 如果要兩兩者並存,⼀一定要在 Vue 實體 mounted 完成後再 由 jQuery 來來處理理,但切記不要直接操作 DOM,以免造成 與 Vue 實體的資料綁定互相衝突。 • VueJS 不是為了了取代 jQuery ⽽而⽣生。