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

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. Vue

15. Vue.js IE8 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/deﬁneProperty

16. AngularJS 1.x

17. ReactJS

18. Lifecycle Vue

19. • init • created • beforeCompile • compiled • ready lifecycle hooks • attached • detached • beforeDestroy • destroyed

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. Data Binding

22. • Vue mustache template   {{ }} <span>Message: {{ msg }}</span> : {{* msg }} HTML : {{{ raw_html }}} HTML : <div id="item-{{ id }}"></div>

23. • {{ var a = 1 }} • {{ if (ok) { return message } }} • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} computed

24. directives angularJS Vue.js directive ( )     http://cn.vuejs.org/api/

25. v-model http://goo.gl/SWbcKb

26. v-bind http://goo.gl/dk0rZC

27. ﬁlter • Vue.js {{ }}   | filter • {{ 'abc' | capitalize }}  ==> Abc • {{ 'abc' | uppercase }}  ==> ABC • {{ 123456 | currency }}  ==> $123,456.00

28. Computed Properties

29. • {{ }} view • vue computed

30. http://goo.gl/sHkYqF

31. Class and Style class

32. http://goo.gl/xqJgp9

33. Conditional & List Rendering

34. v-if / v-else http://goo.gl/HJt73r

35. v-show

36. with template

37. v-if v-show • v-if v-show DOM v-if • v-show CSS (style) • v-show

38. v-for http://goo.gl/BwuHYB

39. http://goo.gl/z0CcH3

40. v-for with object http://goo.gl/Ela7PF

41. v-for with range http://goo.gl/9ggJ5F

42. v-for with ﬁlter http://goo.gl/nxw9I3

43. http://goo.gl/KRsMPM

44. http://goo.gl/IPwiib

45. : track-by v-for id Vue track-by

46. Event Handling

47. v-on

48. http://goo.gl/Gf9hCL

49. Modiﬁers

50. Transitions

51. http://goo.gl/Ws0e2v

52. transition with jQuery animate http://goo.gl/g4xRXt

53. Components

54. Components • Component vue HTML • HTML

55. ❌

56. props • scope • prop .sync .once

57. http://goo.gl/52SIzs

58. null

59. • prop   • this.$parent   this.$root • this.$children ( ) this.$children v-if v-ref

60. http://goo.gl/umMf39

61. • $on() • $emit() • $dispatch() • $broadcast() • DOM Event callback callback function return true

62. http://goo.gl/phpbDQ

63. :is http://goo.gl/K0Zrps

64. keep-alive • keep-alive

65.   http://goo.gl/lErGx4

66. slot • angular transclusion • W3C web-components slot • slot

67. http://goo.gl/vmxj9G

68. Tools & Resources

69. Vue.js dev-tools https://goo.gl/T6Fvtu

70. Vue-cli https://github.com/vuejs/vue-cli

71. vue-cli $ npm install -g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev

72. HTML Script Style Vue ﬁle

73. Awesome Vue.js https://github.com/vuejs/awesome-vue

74. Next,… Vue 2.0 ! • • Vue 1.0 API •   https://github.com/vuejs/vue/issues/2873

75. Thanks

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

Similar to 第一次用 Vue.js 就愛上 [改] (20)

Recently uploaded (20)

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