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
640
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
750
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.4k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
130
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.3k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
780
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
420
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
Where will it converge?
ibknadedeji
0
180
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
500
20250929_QaaS_vol20
mura_shin
0
110
VCC 2025 Write-up
bata_24
0
180
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
270
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
190
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Gamification - CAS2011
davidbonilla
81
5.5k
Rails Girls Zürich Keynote
gr2m
95
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Typedesign – Prime Four
hannesfritz
42
2.8k
Statistics for Hackers
jakevdp
799
220k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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