第一次用 Vue.js 就愛上 [改]
•
345 likes•40,062 views
This document provides an overview of Vue.js including: - Key features like MVVM pattern, data binding, directives, lifecycle hooks - How to set up a basic project using vue-cli - Components, props, events, slots - Conditional rendering, lists, transitions - Tools and resources for learning more about Vue.js
![• Kuro Hsu
• @
• http://kuro.tw
• kurotanshi [at] gmail.com](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 第一次用 Vue.js 就愛上 [改]
Similar to 第一次用 Vue.js 就愛上 [改] (20)
Recently uploaded
Recently uploaded (20)
第一次用 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)
- 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
- 12. : VUE.JS ( ) https://goo.gl/s3livG
- 13. ( root instance )
- 15. Vue
- 17. AngularJS 1.x
- 18. ReactJS
- 20. Lifecycle Vue
- 25. • init • created • beforeCompile • compiled • ready lifecycle hooks • attached • detached • beforeDestroy • destroyed
- 26. • 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
- 27. Data Binding
- 28. • Vue mustache template {{ }} <span>Message: {{ msg }}</span> : {{* msg }} HTML : {{{ raw_html }}} HTML : <div id="item-{{ id }}"></div>
- 29. • {{ var a = 1 }} • {{ if (ok) { return message } }} • {{ number + 1 }} • {{ ok ? 'YES' : 'NO' }} • {{ msg.split('').reverse().join('') }} computed
- 30. directives angularJS Vue.js directive ( ) http://cn.vuejs.org/api/
- 33. filter • Vue.js {{ }} | filter • {{ 'abc' | capitalize }} ==> Abc • {{ 'abc' | uppercase }} ==> ABC • {{ 123456 | currency }} ==> $123,456.00
- 35. • {{ }} view • vue computed
- 39. Conditional & List Rendering
- 41. v-show
- 42. with template
- 43. v-if v-show • v-if v-show DOM v-if • v-show CSS (style) • v-show
- 51. : track-by v-for id Vue track-by
- 52. Event Handling
- 53. v-on
- 56. Modifiers
- 59. Transitions
- 62. transition with jQuery animate http://goo.gl/g4xRXt
- 63. Components
- 64. Components • Component vue HTML • HTML
- 66. ❌
- 67. props • scope • prop .sync .once
- 69. null
- 70. • prop • this.$parent this.$root • this.$children ( ) this.$children v-if v-ref
- 74. • $on() • $emit() • $dispatch() • $broadcast() • DOM Event callback callback function return true
- 82. slot • angular transclusion • W3C web-components slot • slot
- 87. vue-cli $ npm install -g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
- 90. Next,… Vue 2.0 ! • • Vue 1.0 API • https://github.com/vuejs/vue/issues/2873
- 92. Thanks