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
第一次用 Vue.js 就愛上 [改]
Search
Kuro Hsu
June 23, 2016
Technology
34
4.4k
第一次用 Vue.js 就愛上 [改]
重新介紹 Vue.js 的特性,以及在 2.0 即將帶來的變革。
video link:
https://youtu.be/jXdZlbH_ut8
2016/06/23 @ 五倍紅寶石
Kuro Hsu
June 23, 2016
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
88
[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
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
4
630
waitany と waitall を作った話
mrkn
0
110
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
160
チームが自己組織化してから敢えて専任スクラムマスターを置いてみたらめちゃめちゃワークした話 / How bringing in a Scrum Master to an already self-organized team totally worked out
hc0208
2
1.6k
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
420
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
220
プロデザ! BY リクルートvol.22_様々なプロダクト経験の中で活きたPdMのスキル
recruitengineers
PRO
3
170
Dojo 20240830 COBOL to Java on Z
ichikawayasuhisa
0
240
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
OCI コスト管理
ocise
1
110
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
39k
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Faster Mobile Websites
deanohume
304
30k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
A designer walks into a library…
pauljervisheath
201
24k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Designing for Performance
lara
604
68k
Music & Morning Musume
bryan
46
6k
Raft: Consensus for Rubyists
vanstee
135
6.5k
The Pragmatic Product Professional
lauravandoore
30
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Transcript
Kuro Hsu
[email protected]
ᒫӞ稞አ Vue.js 疰眢Ӥ ҷ
• Kuro Hsu • 獮ᒒૡ纷䒍 @ 睃瞆լ褸㿁 • http://kuro.tw •
kurotanshi [at] gmail.com
Agenda • Vue.js चՕ奧 • ই֜疥 Vue ے獈䌕礯 • Vue
زկ膏ኞ蝰๗ • Vue 膏虻碘翉ਧ • Class 膏䰬ୗ • Ԫկ蒂ቘ • 窼獈 Vue زկ • 樄咳ૡٍ膏虻რ
Vue.js • 墋㻌斕ᰁጱ JS 礍牧犖胼膏ٌ犢獮ᒒ礍/獢ୗ䓚وአ牐 • ݝ襑䌕ဳࣁ view 䍅羷现ٌ䌘䛑ጱ虋玕牐 •
ྯ㮆奲կդ蔭加缏ጱ㻌ز牧磪ݱᛔጱ view 现虻碘螵蜉牐 • 虻碘翉ਧጱ粬牧奲կ膏奲կԏ樌毆戔㻌ݻ翉ਧ牧虻碘窕ๅ ฃᤩഩൎ牧䁆ᤈ硳ሲ犖ๅঅ牐 • 磧螕ݳ樄咳㻌殷䛑አ纷ୗ (SPA, Single Page Application)
10 ᑁ楮፡睞 vue.js http://goo.gl/RVQwop
MVVM (Model-View-ViewModel)
奲կ羬翄 礬زկ ৼزկ http://goo.gl/8n2bGr
疥 Vue.js ے獈䌕礯
ፗ矑獈 vue.js
蝚螂 vue-cli ୌᗝ碝䌕礯 $ npm install -g vue-cli $ vue
init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
Properties & Methods زկच痀现ොဩ
൹袅ᛔ:ڡ矐 VUE.JS (य़俘๙ੜ裡) https://goo.gl/s3livG
礬زկ ( root instance )
ৼزկ
Vue ই֜蝍擽虋玕
ಅ犥 Vue.js 犋ඪൔ IE8 犥ӥ倵薩瑊牐 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
AngularJS 1.x
ReactJS
None
Lifecycle Vue زկ䋿誢ኞ蝰๗
None
None
None
None
• init • created • beforeCompile • compiled • ready
lifecycle hooks • attached • detached • beforeDestroy • destroyed
• init • created • beforeCompile • compiled • ready
• attached • detached lifecycle hooks in Vue 2.0 • beforeDestroy • destroyed • beforeMount • mounted • beforeUpdate • updated • activated • deactivated ref: https://github.com/vuejs/vue/issues/2873#upgrade-tips
Data Binding 虻碘翉ਧ
• Vue 䟖አ mustache 承ဩ֢傶 template 牧 疥独ᗝ獈 {{ }}
ܨݢ牐 <span>Message: {{ msg }}</span> 㻌稞翉ਧ: {{* msg }} HTML 礕: {{{ raw_html }}} HTML 痀: <div id="item-{{ id }}"></div>
• {{ var a = 1 }} • {{ if
(ok) { return message } }} 犥ӥฎ犋ݳဩጱ螀ᓒୗ物 犥螀ᓒୗ֢傶虻碘㬵რ • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} ইຎᥝ氥纈ጱ虻碘襑ᥝ斃蕦褾螀ᓒ牧ݢ犥Իኧ computed 蒂ቘ牐
directives 膏 angularJS Ӟ䰬牧 Vue.js 犖׀ԧݱ圵獉ୌ directive (瞲犤)牐 http://cn.vuejs.org/api/
v-model 蔭㻌翉ਧ http://goo.gl/SWbcKb
v-bind 痀翉ਧ http://goo.gl/dk0rZC
螂筪瑊 filter • Vue.js 犖׀ԧ螂筪 {{ }} 蔭螈ୗ蜍ڊ虻碘ጱۑ胼牧 蝚螂̿ |
̀Ԁ蝫蔭纈牧犖ݢӞ稞Ԁ蝫ग़圵 filter牧ᥝੜஞ殼ଧ 㺔氂牐 • {{ 'abc' | capitalize }} ==> Abc • {{ 'abc' | uppercase }} ==> ABC • {{ 123456 | currency }} ==> $123,456.00
Computed Properties 痀懯ᓒ
痀懯ᓒ • 櫒簁ࣁ䰬粚砻ፗ矑蝚螂 {{ }} 㬵翉ਧ蔭螈ୗฎ覍ଉ ڥጱ狶ဩ牧֕ฎ舙ฎࣁ view 䌃ӥ螂ग़ጱ螵蜉螀ᓒ牧 䨝蝨౮纷ୗ嘨犋ڥ褂捝Ӭ櫞犥姘虁牐
• 蝡碻狡疰襑ᥝ蝚螂 vue زկ׀ጱ computed 痀㬵 毆ض蒂ቘ蝡犚蕦褾ጱ螵蜉砺֢牐
http://goo.gl/sHkYqF
Class and Style class 膏䰬ୗ
http://goo.gl/xqJgp9
Conditional & List Rendering 礿կ现ڜ蔭礕
v-if / v-else http://goo.gl/HJt73r
v-show
with template
v-if 膏 v-show • v-if 膏 v-show 磧य़ጱ癩獨ࣁෝ䌘 DOM ጱ砺֢牧v-if
䨝狅 ᆙ礿կ究ਧฎ玽疥زկ礕ᛗ翕殷Ӥ牧㪔究ਧԪկ膏虻碘 ጱ緳肯ฎ玽ᥝ翉ਧᛗزկፗ矑衴䵼扗زկ牐 • v-show 㳷ฎਧ䨝叨ڊزկ牧֕犥礿կ㬵獥矦 CSS (style) ጱ氥纈膏玽牐 • 舙礿կ硬虋毱耆牧አ v-show 㬵獥矦斃螕ݳ牐
v-for http://goo.gl/BwuHYB
http://goo.gl/z0CcH3
v-for with object http://goo.gl/Ela7PF
v-for with range http://goo.gl/9ggJ5F
v-for with filter http://goo.gl/nxw9I3
http://goo.gl/KRsMPM
http://goo.gl/IPwiib
拻㮆ᑃ藔: track-by አ v-for 礕ڜ蔭ጱ碻狡牧ইຎ磪㮆ࠔӞ蘷獨独牧ই id 牧 Vue ݢ犥蝚螂 track-by
᯿蕦ֵአزկ㬵猻玕硳ሲ牐
Event Handling Ԫկ蒂ቘ
v-on
http://goo.gl/Gf9hCL
None
狕觽ৼ Modifiers
None
None
Transitions 侅虋膏㵕向
http://goo.gl/Ws0e2v
None
transition with jQuery animate http://goo.gl/g4xRXt
Components 窼獈ቘ薹奲կ
Components • Component牧̿奲կ̀圸̿زկ̀牧ฎ vue 磧Ԇᥝ犖 ฎ磧䔶य़ጱ粬ԏӞ牧ਙ׀ HTML زᔰጱ硌獅牧犖疥 纷ୗ嘨蕕蚏㬵犥樄咳ᘏ᯿蕦ֵአ牐 •
奲կݢ犥ฎᛔਧ嬝ጱزᔰ牧犖ݢ犥ฎܻኞጱ HTML زᔰጱ ୵ୗ珊匍牐
None
❌
props • ྯ㮆زկ䋿誢ጱ scope ᮷ฎ加缏ጱ牧ಅ犥犋䛑扗ࣁৼز կጱ秇奲ፗ矑አᆿزկጱ虻碘牧蝡䰬䨝蝨౮زկ樌螂ଶ 肄ݳ牧犋ฃ姘虁牐 • prop 毆戔ฎ㻌ݻ翉ਧ牧ݢ蝚螂狕觽ৼ
.sync 䔶ګ瞲ਧ傶 櫕ݻ翉ਧ牧 .once 瞲ਧ㻌稞翉ਧ牐
http://goo.gl/52SIzs
傶ԧ嘦狒虻碘ྋ嘦牧䔶篇ୌ捍ࣁ種ے獈ࣳ獨ڣ䥁牐 ই犋瞲ਧ㯽獈虻碘ࣳ獨牧㳷戔傶 null牐
ᆿ膏ৼ • 䛑蝚螂 prop 痀牧疥ᆿ䍅虻碘㯽螏妔ৼ奲կ牧 ᘒ犋ฎፗ矑ኧৼ奲կፗ矑አᆿ䍅虻碘牐 • ৼ奲կݢ犥蝚螂 this.$parent 㬵ਂ玲犢ጱᆿ䍅奲կ牐
ইຎᥝፗ矑玲礬䋿誢ጱ扖牧㳷ݢ蝚螂 this.$root 㬵ਂ玲牐 • ᆿᕟկ㳷ฎ蝚螂 this.$children 蝡㮆౮㹓 (檋ڜ)牧㬵ਂ玲犢 ጱৼ奲կ牐֕ฎᥝဳ this.$children ጱ殼ଧ䨝ݑک v-if ጱ段牧ୌ捍ض犥 v-ref 妔ৼ奲կ戔ਧ獨ݷ犥嘦狒犋ݑ奲կ ጱ殼ଧ段牐
http://goo.gl/umMf39
None
None
ᆿৼԪկ㯽螏 • 蝚螂 $on() 㬵緳肯Ԫկ牐 • ֵአ $emit() ࣁਙӤᶎ藉咳Ԫկ牐 •
ֵአ $dispatch() ݻӤ㯽螏Ԫկ牧Ԫկ䨝窂茐ᆿ䍅ݻӤٛု • ֵአ $broadcast() 皞砮Ԫկ牧Ԫկ䨝ݻӥ㯽螏ᕳಅ磪ጱ盅 դ奲կ牐 • ᥝဳጱฎ牧膏 DOM Event 犋ݶ牧ԪկࣁݻӤٛုጱ螂纷 Ӿ牧ᒫӞ稞䁆ᤈ callback ጱ碻狡䨝ᛔ㵕؊ྊݻӤٛု牧ᴻ覍 ࣁ callback function 愊ᶎ return true牐
http://goo.gl/phpbDQ
None
㵕眲瞲ਧ奲կ :is http://goo.gl/K0Zrps
None
keep-alive • ইຎమᥝ獥矦ڊ݄ጱزկኸࣁ懿䛂誢Ӿ牧ݢ犥狒ኸزկ ጱ制眲Ӭ螨ع᯿碝礕牧ݢ犥ے獈 keep-alive 痀牐
翥捌֢አऒ
ৼزկጱ獉ࣁৼ奲կ獉蝱ᤈ翥捌牧 ᆿزկ毆癲ጱ獉䨝ᤩ篷憙 http://goo.gl/lErGx4
slot • 觊犲 angular ጱ transclusion牐 • 㷢ᘍ W3C web-components
ጱ slot 憒塅秂伛㬵䋿 ֢牐 • slot ጱ獉ฎࣁ̿ᆿ奲կ̀ጱ֢አऒ獉蝱ᤈ翥捌牐
http://goo.gl/vmxj9G
Tools & Resources 樄咳ૡٍ膏䋊聜虻რ
Vue.js dev-tools https://goo.gl/T6Fvtu
Vue-cli https://github.com/vuejs/vue-cli
蝚螂 vue-cli ୌᗝ碝䌕礯 $ npm install -g vue-cli $ vue
init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
HTML Script Style Vue file
Awesome Vue.js https://github.com/vuejs/awesome-vue
Next,… Vue 2.0 ! • ֢ᘏ蔭纈毆懯 犊์Ӿෲ 咳牦 • Vue
1.0 य़蟂獤ጱ API 緡ݢ窂አ • 硬ԧՋ讕牫 https://github.com/vuejs/vue/issues/2873
None
Thanks