Downloaded 735 times
![• 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-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)
Uploaded byKuro Hsu
第一次用 Vue.js 就愛上 [改]
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
![[수정본] 우아한 객체지향](https://cdn.slidesharecdn.com/ss_thumbnails/woowahan-oo-190624161343-thumbnail.jpg?width=640&height=640&fit=bounds)
第一次用 Vue.js 就愛上 [改]
- 1.
- 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.
- 6.
- 7.
- 8.
- 9.
- 10. vue-cli $ npm install-g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
- 11.
- 12. : VUE.JS () https://goo.gl/s3livG
- 13.
- 15.
- 16.
- 17.
- 18.
- 20.
- 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.
- 28. • Vue mustachetemplate {{ }} <span>Message: {{ msg }}</span> : {{* msg }} HTML : {{{ raw_html }}} HTML : <div id="item-{{ id }}"></div>
- 29. • {{ vara = 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/
- 31.
- 32.
- 33. filter • Vue.js {{}} | filter • {{ 'abc' | capitalize }} ==> Abc • {{ 'abc' | uppercase }} ==> ABC • {{ 123456 | currency }} ==> $123,456.00
- 34.
- 35. • {{ }} view •vue computed
- 36.
- 37.
- 38.
- 39. Conditional & ListRendering
- 40.
- 41.
- 42.
- 43. v-if v-show • v-ifv-show DOM v-if • v-show CSS (style) • v-show
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. : track-by v-for id Vuetrack-by
- 52.
- 53.
- 54.
- 56.
- 59.
- 60.
- 62. transition with jQueryanimate http://goo.gl/g4xRXt
- 63.
- 64.
- 66.
- 67. props • scope • prop.sync .once
- 68.
- 69.
- 70. • prop •this.$parent this.$root • this.$children ( ) this.$children v-if v-ref
- 71.
- 74. • $on() • $emit() •$dispatch() • $broadcast() • DOM Event callback callback function return true
- 75.
- 77.
- 79.
- 81.
- 82. slot • angular transclusion •W3C web-components slot • slot
- 83.
- 84.
- 85.
- 86.
- 87. vue-cli $ npm install-g vue-cli $ vue init webpack-simple [project name] $ cd [project name] $ npm install $ npm run dev
- 88.
- 89.
- 90. Next,… Vue 2.0! • • Vue 1.0 API • https://github.com/vuejs/vue/issues/2873
- 92.