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