第一次用 Vue.js 就愛上 [改]
345 likes40,150 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](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-2-320.jpg)
![vue-cli
$ npm install -g vue-cli
$ vue init webpack-simple [project name]
$ cd [project name]
$ npm install
$ npm run dev](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-10-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-14-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-19-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-21-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-22-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-23-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-24-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-55-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-57-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-58-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-61-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-65-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-72-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-73-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-76-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-78-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-80-320.jpg)
![vue-cli
$ npm install -g vue-cli
$ vue init webpack-simple [project name]
$ cd [project name]
$ npm install
$ npm run dev](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-87-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://image.slidesharecdn.com/vuejs-160518081021/85/Vue-js-91-320.jpg)
第一次用 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
- 89. Awesome Vue.js https://github.com/vuejs/awesome-vue
- 90. Next,… Vue 2.0 ! • • Vue 1.0 API • https://github.com/vuejs/vue/issues/2873
- 92. Thanks