Slide 1

Slide 1 text

Kuro Hsu [email protected] ᒫӞ稞አ 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