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
630
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
740
[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
770
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
410
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
AWS DDoS攻撃防御の最前線
ryutakondo
1
160
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.3k
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
1.1k
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
370
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
700
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
220
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
8
330
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
140
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
830
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.5k
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
120
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
29
13k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Code Review Best Practice
trishagee
69
19k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Language of Interfaces
destraynor
158
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
It's Worth the Effort
3n
185
28k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
142
24k
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