Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
由 jQuery 轉 VueJS 的正確姿勢
Search
Kuro Hsu
June 01, 2017
Technology
10
3.1k
由 jQuery 轉 VueJS 的正確姿勢
VueJS 台灣 Meetup #1
2017/06/01
Kuro Hsu
June 01, 2017
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
Laravel x Vite
kurotanshi
0
600
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
660
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
91
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
700
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.7k
Other Decks in Technology
See All in Technology
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
310
ドメインと向き合う - 旅行予約編
hidenorigoto
4
530
エムスリーマネジメントチーム紹介資料 / Introduction of M3 Management Team
m3_engineering
0
260
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
4
150
PREEMPT_RT over the years
ennael
PRO
0
330
XPを始める新人に伝えたい近道の鍵
nakasho
1
280
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
220
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
290
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
370
RAGの性能を評価しよう
kurahara
1
300
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
120
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Bash Introduction
62gerente
608
210k
Fireside Chat
paigeccino
32
2.9k
Faster Mobile Websites
deanohume
304
30k
Practical Orchestrator
shlominoach
185
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
44
2k
Infographics Made Easy
chrislema
239
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
6
240
4 Signs Your Business is Dying
shpigford
180
21k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Transcript
由 jQuery 轉 VueJS 的正確姿勢 Kuro Hsu @ Vue.js 台灣
Meetup 2017#01
http://vue.tw VueJS 台灣有專屬網址了了
Kuro Hsu http://kuro.tw
[email protected]
@kurotanshi
開始之前,先看實際範例例
http://jsbin.com/ziseyikove/1/edit?html,js,output
http://jsbin.com/dufadosocu/1/edit?html,js,output
好像沒什什麼差別嘛 ⽤用 Vue 寫的⾏行行數還比較多
⼗十個前端有⼗十⼀一個都討厭的表單驗證
None
SELECTORS HELL http://jsbin.com/cilufagija/1/edit?html,js,output ⼀一⾴頁投影片還放不下
http://jsbin.com/kucawilahu/1/edit?html,js,output
http://jsbin.com/kucawilahu/1/edit?html,js,output
還是沒什什麼差別...嗎?
• 以 操作 DOM 為基礎 的開發模式 • 特性: • 所有操作都是以
DOM 為基礎出發 • 屬於指令式編程 ( Imperative programming ) • 開發模式較直觀,但容易易陷入「⾒見見樹不⾒見見林林」的迷思
• 以 操作 物件模型 為基礎 的開發模式 • 特性: • 關注點放在資料
( Model ) 與狀狀態,⽽而不是 DOM • 屬於宣告式編程 ( Declarative programming ) • 開發模式相對抽象,也簡化繁複操作元素的開發模式
Source: Vue.js: The Progressive Framework https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/ VueJS - 漸進式框架 core
vue-router vuex vue-loader webpack …
將 Vue.js 加入現有專案
直接引入 vue.js
http://vuejs.org/guide/installation.html
jQuery 開發者關⼼心的事... • DOM Selectors • Attrs / Props 的
get 與 set • Class、樣式與動畫 • 事件處理理 • Ajax • 是否能與現有的 jQuery plugins 相容
操作網⾴頁元素
操作網⾴頁元素 都說了了不要直接操作 DOM
Hello Vue ! http://vuejs.org/guide/#Handling-User-Input
MVVM (Model-View-ViewModel)
http://jsbin.com/kubojanuqi/1/edit?html,js,output 元件系統
• Vue 採⽤用 mustache 語法作為 template , 將值置入 {{ }}
即可。 <span>Message: {{ msg }}</span> 單次綁定: <div v-once>{{ msg }}</div> HTML 渲染: <div v-html="raw_html"> HTML 屬性: <div id="item-{{ id }}"></div>
以運算式作為資料來來源 • {{ number + 1 }} • {{ ok
? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} • {{ var a = 1 }} • {{ if (ok) { return message } }} 以下是 不合法 的運算式:
Vue 實體屬性
None
v-model 表單綁定 http://jsbin.com/yiwukehida/1/edit?html,js,output
v-bind 屬性綁定 http://jsbin.com/mogosowola/1/edit?html,js,output
事件處理理: v-on
click http://jsbin.com/tuzeyusuje/2/edit?html,js,output
修飾⼦子 Modifiers
None
Class、樣式與動畫
http://jsbin.com/lovirumofo/1/edit?html,js,output
v-if / v-else http://jsbin.com/jexojeqifi/1/edit?html,js,output
v-show http://jsbin.com/nimalemoko/1/edit?html,js,output
v-if with template 注意: v-show 不⽀支援 template。 http://jsbin.com/tufoyijohu/1/edit?html,js,output
transitions
fade in Vue (Using CSS) http://jsbin.com/tefikesaha/1/edit?html,js,output
slide in Vue (Using jQuery) http://jsbin.com/mekocojujo/1/edit?html,js,output
Ajax • Vue.js 本⾝身沒有提供 ajax 的功能,所以開發者可 以⾃自⾏行行使⽤用習慣的⽅方式取得資料。 • 像是⼤大家都很熟悉的 jQuery.ajax
• 如果不想載入 jQuery,當然也可以⽤用 axios 這個專⾨門處理理 $http 的外掛模組。
$.ajax http://jsbin.com/luqihabele/1/edit?html,js,output
axios https://github.com/mzabriskie/axios http://jsbin.com/voqegupaje/edit?html,js,output
透過 this 存取 data 內容
v-for ⾃自動⽣生成列列表 http://jsbin.com/bayutonuha/1/edit?html,js,output
與現有的 jQuery plugins 相容 ?
以 jQuery UI 為例例 • 將 jQuery, jQuery UI 等
JS library 載入 • 將原本的 input 包裝成⼦子組件,如 <date-picker> • 透過 props 傳遞 date-picker 的參參數,原本 jQuery UI 做的事情則在 mounted 後交還給 jQuery UI 處 理理。 • 更更新後的內容再透過 $emit 回傳給上層元件
https://jsbin.com/dokezajixo/1/edit?html,js,output
https://jsbin.com/dokezajixo/1/edit?html,js,output
原本 jQuery UI 控制項的程式
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 元件被銷毀後呼叫
⼩小結 • 使⽤用 VueJS 開發的第⼀一件事就是拋開直接操作 DOM 的觀 念念。 • jQuery
與 VueJS 兩兩者並不衝突,VueJS 重視資料綁定及 畫⾯面元件,⽽而 jQuery 的 ajax 與 animation 等效果是 VueJS 所缺少的。 • 如果要兩兩者並存,⼀一定要在 Vue 實體 mounted 完成後再 由 jQuery 來來處理理,但切記不要直接操作 DOM,以免造成 與 Vue 實體的資料綁定互相衝突。 • VueJS 不是為了了取代 jQuery ⽽而⽣生。
• 為了了解決現有的問題 • 為了了排除 / 減少將來來可能⾯面臨臨的問題 • 不要⼿手拿槌⼦子就把所有東⻄西當釘⼦子敲 技術選擇適才適所
⼯工商服務 https://5xruby.tw/talks/vuejs-201706
特別感謝場地⽀支援
Thanks