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
610
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
700
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
95
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
720
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
390
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
Qiita埋め込み用スライド
naoki_0531
0
860
なぜCodeceptJSを選んだか
goataka
0
160
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
190
生成AIのガバナンスの全体像と現実解
fnifni
1
180
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
220
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
550
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1.1k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
690
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
YesSQL, Process and Tooling at Scale
rocio
169
14k
A Tale of Four Properties
chriscoyier
157
23k
Designing Experiences People Love
moore
138
23k
Six Lessons from altMBA
skipperchong
27
3.5k
Adopting Sorbet at Scale
ufuk
73
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Writing Fast Ruby
sferik
628
61k
A designer walks into a library…
pauljervisheath
204
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
What's in a price? How to price your products and services
michaelherold
243
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
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