O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Kuro Hsu
kurotanshi@gmail.com
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
Lifecycle
Vue
• 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
• des...
Data Binding
• Vue mustache template 

{{ }}
<span>Message: {{ msg }}</span>
: {{* msg }}
HTML : {{{ raw_html }}}
HTML : <div id="item-...
• {{ var a = 1 }}
• {{ if (ok) { return message } }}
• {{ number + 1 }}
• {{ ok ? 'YES' : 'NO' }}
• {{ msg.split('').rever...
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 | curre...
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
Modifiers
Transitions
http://goo.gl/Ws0e2v
transition with jQuery animate
http://goo.gl/g4xRXt
Components
Components
• Component vue
HTML
• HTML
❌
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
• $on()
• $emit()
• $dispatch()
• $broadcast()
• DOM Event
callback
callback function return true
http://goo.gl/phpbDQ
:is
http://goo.gl/K0Zrps
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
Thanks
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Próximos SlideShares
Carregando em…5
×

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

35.725 visualizações

Publicada em

重新介紹 Vue.js 的特性,以及 2.0 即將帶來的變革。

Publicada em: Tecnologia

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

  1. 1. Kuro Hsu kurotanshi@gmail.com Vue.js 改
  2. 2. • Kuro Hsu • @ • http://kuro.tw • kurotanshi [at] gmail.com
  3. 3. Agenda • Vue.js • Vue • Vue • Vue • Class • • Vue •
  4. 4. Vue.js • JS / • view • view • • (SPA, Single Page Application)
  5. 5. 10 vue.js http://goo.gl/RVQwop
  6. 6. MVVM (Model-View-ViewModel)
  7. 7. http://goo.gl/8n2bGr
  8. 8. Vue.js
  9. 9. vue.js
  10. 10. vue-cli $ npm install -g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
  11. 11. Properties & Methods
  12. 12. : VUE.JS ( ) https://goo.gl/s3livG
  13. 13. ( root instance )
  14. 14. Vue
  15. 15. Vue.js IE8 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
  16. 16. AngularJS 1.x
  17. 17. ReactJS
  18. 18. Lifecycle Vue
  19. 19. • init • created • beforeCompile • compiled • ready lifecycle hooks • attached • detached • beforeDestroy • destroyed
  20. 20. • 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
  21. 21. Data Binding
  22. 22. • Vue mustache template 
 {{ }} <span>Message: {{ msg }}</span> : {{* msg }} HTML : {{{ raw_html }}} HTML : <div id="item-{{ id }}"></div>
  23. 23. • {{ var a = 1 }} • {{ if (ok) { return message } }} • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} computed
  24. 24. directives angularJS Vue.js directive ( ) 
 
 http://cn.vuejs.org/api/
  25. 25. v-model http://goo.gl/SWbcKb
  26. 26. v-bind http://goo.gl/dk0rZC
  27. 27. filter • Vue.js {{ }} 
 | filter • {{ 'abc' | capitalize }}
 ==> Abc • {{ 'abc' | uppercase }}
 ==> ABC • {{ 123456 | currency }}
 ==> $123,456.00
  28. 28. Computed Properties
  29. 29. • {{ }} view • vue computed
  30. 30. http://goo.gl/sHkYqF
  31. 31. Class and Style class
  32. 32. http://goo.gl/xqJgp9
  33. 33. Conditional & List Rendering
  34. 34. v-if / v-else http://goo.gl/HJt73r
  35. 35. v-show
  36. 36. with template
  37. 37. v-if v-show • v-if v-show DOM v-if • v-show CSS (style) • v-show
  38. 38. v-for http://goo.gl/BwuHYB
  39. 39. http://goo.gl/z0CcH3
  40. 40. v-for with object http://goo.gl/Ela7PF
  41. 41. v-for with range http://goo.gl/9ggJ5F
  42. 42. v-for with filter http://goo.gl/nxw9I3
  43. 43. http://goo.gl/KRsMPM
  44. 44. http://goo.gl/IPwiib
  45. 45. : track-by v-for id Vue track-by
  46. 46. Event Handling
  47. 47. v-on
  48. 48. http://goo.gl/Gf9hCL
  49. 49. Modifiers
  50. 50. Transitions
  51. 51. http://goo.gl/Ws0e2v
  52. 52. transition with jQuery animate http://goo.gl/g4xRXt
  53. 53. Components
  54. 54. Components • Component vue HTML • HTML
  55. 55.
  56. 56. props • scope • prop .sync .once
  57. 57. http://goo.gl/52SIzs
  58. 58. null
  59. 59. • prop 
 • this.$parent 
 this.$root • this.$children ( ) this.$children v-if v-ref
  60. 60. http://goo.gl/umMf39
  61. 61. • $on() • $emit() • $dispatch() • $broadcast() • DOM Event callback callback function return true
  62. 62. http://goo.gl/phpbDQ
  63. 63. :is http://goo.gl/K0Zrps
  64. 64. keep-alive • keep-alive
  65. 65. 
 http://goo.gl/lErGx4
  66. 66. slot • angular transclusion • W3C web-components slot • slot
  67. 67. http://goo.gl/vmxj9G
  68. 68. Tools & Resources
  69. 69. Vue.js dev-tools https://goo.gl/T6Fvtu
  70. 70. Vue-cli https://github.com/vuejs/vue-cli
  71. 71. vue-cli $ npm install -g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
  72. 72. HTML Script Style Vue file
  73. 73. Awesome Vue.js https://github.com/vuejs/awesome-vue
  74. 74. Next,… Vue 2.0 ! • • Vue 1.0 API • 
 https://github.com/vuejs/vue/issues/2873
  75. 75. Thanks

×