第一次用 Vue.js 就愛上 [改]

重新介紹 Vue.js 的特性，以及在 2.0 即將帶來的變革。
video link: https://youtu.be/jXdZlbH_ut8

2016/06/23 @ 五倍紅寶石

Transcript

1. Kuro Hsu kurotanshi@gmail.com ᒫӞ稞አ Vue.js 疰眢Ӥ ҷ
2. • Kuro Hsu • 獮ᒒૡ纷䒍 @ ࿞睃瞆լ褸㿁 • http://kuro.tw • kurotanshi [at] gmail.com
3. Agenda • Vue.js च๜Օ奧 • ই֜疥 Vue ے獈䌕礯 • Vue زկ膏ኞ޸蝰๗ • Vue 膏虻碘翉ਧ • Class 膏䰬ୗ • Ԫկ蒂ቘ • 窼獈 Vue زկ • 樄咳ૡٍ膏虻რ
4. Vue.js • 墋㻌斕ᰁጱ JS ໛礍牧犖胼膏ٌ犢獮ᒒ໛礍/獢ୗ䓚وአ牐 • ݝ襑䌕ဳࣁ view 䍅羷现ٌ䌘䛑ጱ虋玕牐 • ྯ㮆奲կդ蔭加缏ጱ㻌ز牧磪ݱᛔጱ view 现虻碘螵蜉牐 • 虻碘翉ਧጱ粬௔牧奲կ膏奲կԏ樌毆戔㻌ݻ翉ਧ牧虻碘窕ๅ ਻ฃᤩഩൎ牧䁆ᤈ硳ሲ犖ๅঅ牐 • 磧螕ݳ樄咳㻌殷䛑አ纷ୗ (SPA, Single Page Application)
5. 10 ᑁ楮፡睞 vue.js http://goo.gl/RVQwop
6. MVVM (Model-View-ViewModel)
7. 奲կ羬翄 礬زկ ৼزկ http://goo.gl/8n2bGr
8. 疥 Vue.js ے獈䌕礯
9. ፗ矑୚獈 vue.js
10. 蝚螂 vue-cli ୌᗝ碝䌕礯 $ npm install -g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
11. Properties & Methods زկच๜痀௔现ොဩ
12. ൹袅ᛔ:ڡ矐 VUE.JS (य़俘๙ੜ裡) https://goo.gl/s3livG
13. 礬زկ ( root instance )
14. ৼزկ
15. Vue ই֜蝍擽虋玕
16. ಅ犥 Vue.js 犋ඪൔ IE8 犥ӥ倵薩瑊牐 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
17. AngularJS 1.x
18. ReactJS
20. Lifecycle Vue زկ䋿誢ኞ޸蝰๗
25. • init • created • beforeCompile • compiled • ready lifecycle hooks • attached • detached • beforeDestroy • destroyed
26. • 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
27. Data Binding 虻碘翉ਧ
28. • Vue 䟖አ mustache 承ဩ֢傶 template 牧
 疥独ᗝ獈 {{ }} ܨݢ牐 <span>Message: {{ msg }}</span> 㻌稞翉ਧ: {{* msg }} HTML ჉礕: {{{ raw_html }}} HTML 痀௔: <div id="item-{{ id }}"></div>
29. • {{ var a = 1 }} • {{ if (ok) { return message } }} 犥ӥฎ犋ݳဩጱ螀ᓒୗ物 犥螀ᓒୗ֢傶虻碘㬵რ • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} ইຎᥝ氥纈ጱ虻碘襑ᥝ斃蕦褾螀ᓒ牧ݢ犥Իኧ computed 蒂ቘ牐
30. directives 膏 angularJS Ӟ䰬牧 Vue.js 犖൉׀ԧݱ圵獉ୌ directive (瞲犤)牐
 
 http://cn.vuejs.org/api/
31. v-model 蔭㻌翉ਧ http://goo.gl/SWbcKb
32. v-bind 痀௔翉ਧ http://goo.gl/dk0rZC
33. 螂筪瑊 filter • Vue.js 犖൉׀ԧ螂筪 {{ }} 蔭螈ୗ蜍ڊ虻碘ጱۑ胼牧
 蝚螂̿ | ̀Ԁ蝫蔭纈牧犖ݢӞ稞Ԁ蝫ग़圵 filter牧ᥝੜஞ殼ଧ 㺔氂牐 • {{ 'abc' | capitalize }}
 ==> Abc • {{ 'abc' | uppercase }}
 ==> ABC • {{ 123456 | currency }}
 ==> $123,456.00
34. Computed Properties 痀௔懯ᓒ
35. 痀௔懯ᓒ • 櫒簁ࣁ䰬粚୚砻ፗ矑蝚螂 {{ }} 㬵翉ਧ蔭螈ୗฎ覍ଉ ׎ڥጱ狶ဩ牧֕ฎ舙ฎࣁ view 䌃ӥ螂ग़ጱ螵蜉螀ᓒ牧 䨝蝨౮纷ୗ嘨犋ڥ褂捝Ӭ櫞犥姘虁牐 • 蝡碻狡疰襑ᥝ蝚螂 vue زկ൉׀ጱ computed 痀௔㬵 毆ض蒂ቘ蝡犚蕦褾ጱ螵蜉砺֢牐
36. http://goo.gl/sHkYqF
37. Class and Style class 膏䰬ୗ
38. http://goo.gl/xqJgp9
39. Conditional & List Rendering 礿կ现ڜ蔭჉礕
40. v-if / v-else http://goo.gl/HJt73r
41. v-show
42. with template
43. v-if 膏 v-show • v-if 膏 v-show 磧य़ጱ癩獨ࣁෝ䌘 DOM ጱ砺֢牧v-if 䨝狅 ᆙ礿կ究ਧฎ玽疥زկ჉礕ᛗ翕殷Ӥ牧㪔究ਧԪկ膏虻碘 ጱ緳肯ฎ玽ᥝ翉ਧᛗزկ౲ፗ矑衴䵼扗زկ牐 • v-show 㳷ฎ஠ਧ䨝叨ڊزկ牧֕犥礿կ㬵獥矦 CSS (style) ጱ氥纈膏玽牐 • 舙礿կ硬虋毱耆牧አ v-show 㬵獥矦斃螕ݳ牐
44. v-for http://goo.gl/BwuHYB
45. http://goo.gl/z0CcH3
46. v-for with object http://goo.gl/Ela7PF
47. v-for with range http://goo.gl/9ggJ5F
48. v-for with filter http://goo.gl/nxw9I3
49. http://goo.gl/KRsMPM
50. http://goo.gl/IPwiib
51. 拻㮆ᑃ藔: track-by አ v-for ჉礕ڜ蔭ጱ碻狡牧ইຎ磪㮆ࠔӞ蘷獨独牧ই id 牧 Vue ׎ݢ犥蝚螂 track-by ᯿蕦ֵአزկ㬵猻玕硳ሲ牐
52. Event Handling Ԫկ蒂ቘ
53. v-on
54. http://goo.gl/Gf9hCL
56. 狕觽ৼ Modifiers
59. Transitions 侅虋膏㵕向
60. http://goo.gl/Ws0e2v
62. transition with jQuery animate http://goo.gl/g4xRXt
63. Components 窼獈ቘ薹奲կ
64. Components • Component牧̿奲կ̀౲圸̿زկ̀牧ฎ vue 磧Ԇᥝ犖 ฎ磧䔶य़ጱ粬௔ԏӞ牧ਙ൉׀ HTML زᔰጱ硌獅௔牧犖疥 纷ୗ嘨੗蕕蚏㬵犥׎樄咳ᘏ᯿蕦ֵአ牐 • 奲կݢ犥ฎᛔਧ嬝ጱزᔰ牧犖ݢ犥ฎܻኞጱ HTML زᔰጱ ୵ୗ珊匍牐
66. ❌
67. props • ྯ㮆زկ䋿誢ጱ scope ᮷ฎ加缏ጱ牧ಅ犥犋䛑扗ࣁৼز կጱ秇奲ፗ矑୚አᆿزկጱ虻碘牧蝡䰬䨝蝨౮زկ樌螂ଶ 肄ݳ牧犋ฃ姘虁牐 • prop 毆戔ฎ㻌ݻ翉ਧ牧ݢ蝚螂狕觽ৼ .sync 䔶ګ瞲ਧ傶 櫕ݻ翉ਧ牧౲ .once 瞲ਧ㻌稞翉ਧ牐
68. http://goo.gl/52SIzs
69. 傶ԧ嘦狒虻碘ྋ嘦௔牧䔶篇ୌ捍ࣁ種ے獈ࣳ獨ڣ䥁牐 ই犋瞲ਧ㯽獈虻碘ࣳ獨牧㳷戔傶 null牐
70. ᆿ膏ৼ • 䛑蝚螂 prop 痀௔牧疥ᆿ䍅虻碘㯽螏妔ৼ奲կ牧
 ᘒ犋ฎፗ矑ኧৼ奲կፗ矑୚አᆿ䍅虻碘牐 • ৼ奲կݢ犥蝚螂 this.$parent 㬵ਂ玲犢ጱᆿ䍅奲կ牐
 ইຎᥝፗ矑玲஑礬䋿誢ጱ扖牧㳷ݢ蝚螂 this.$root 㬵ਂ玲牐 • ᆿᕟկ㳷ฎ蝚螂 this.$children 蝡㮆౮㹓 (檋ڜ)牧㬵ਂ玲犢 ጱৼ奲կ牐֕ฎᥝဳ఺ this.$children ጱ殼ଧ䨝ݑک v-if ጱ୽段牧ୌ捍ض犥 v-ref 妔ৼ奲կ戔ਧ獨ݷ犥嘦狒犋ݑ奲կ ጱ殼ଧ୽段牐
71. http://goo.gl/umMf39
74. ᆿৼԪկ㯽螏 • 蝚螂 $on() 㬵緳肯Ԫկ牐 • ֵአ $emit() ࣁਙӤᶎ藉咳Ԫկ牐 • ֵአ $dispatch() ݻӤ㯽螏Ԫկ牧Ԫկ䨝窂茐ᆿ䍅ݻӤٛု • ֵአ $broadcast() 皞砮Ԫկ牧Ԫկ䨝ݻӥ㯽螏ᕳಅ磪ጱ盅 դ奲կ牐 • ᥝဳ఺ጱฎ牧膏 DOM Event 犋ݶ牧ԪկࣁݻӤٛုጱ螂纷 Ӿ牧ᒫӞ稞䁆ᤈ callback ጱ碻狡䨝ᛔ㵕؊ྊݻӤٛု牧ᴻ覍 ࣁ callback function 愊ᶎ return true牐
75. http://goo.gl/phpbDQ
77. 㵕眲瞲ਧ奲կ :is http://goo.gl/K0Zrps
79. keep-alive • ইຎమᥝ಩獥矦ڊ݄ጱزկኸࣁ懿䛂誢Ӿ牧ݢ犥狒ኸزկ ጱ制眲Ӭ螨ع᯿碝჉礕牧ݢ犥ے獈 keep-alive 痀௔牐
80. 翥捌֢አऒ
81. ৼزկጱ獉਻ࣁৼ奲կ獉蝱ᤈ翥捌牧
 ᆿزկ毆癲ጱ獉਻䨝ᤩ篷憙 http://goo.gl/lErGx4
82. slot • 觊犲 angular ጱ transclusion牐 • 㷢ᘍ W3C web-components ጱ slot 憒塅秂伛㬵䋿 ֢牐 • slot ጱ獉਻ฎࣁ̿ᆿ奲կ̀ጱ֢አऒ獉蝱ᤈ翥捌牐
83. http://goo.gl/vmxj9G
84. Tools & Resources 樄咳ૡٍ膏䋊聜虻რ
85. Vue.js dev-tools https://goo.gl/T6Fvtu
86. Vue-cli https://github.com/vuejs/vue-cli
87. 蝚螂 vue-cli ୌᗝ碝䌕礯 $ npm install -g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
88. HTML Script Style Vue file
89. Awesome Vue.js https://github.com/vuejs/awesome-vue
90. Next,… Vue 2.0 ! • ֢ᘏ蔭纈毆懯 犊์Ӿෲ 咳૲牦 • Vue 1.0 य़蟂獤ጱ API 緡ݢ窂አ • 硬ԧՋ讕牫
 https://github.com/vuejs/vue/issues/2873
92. Thanks