Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 就愛上 [改]
Upcoming SlideShare
Loading in …5
×

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

32,040 views

Published on

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

Published in: Technology

第一次用 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

×