簡單快速上手Vue.js

1. Vue
Plane 2018.4.29

2. Vue
• Framework or Library?
• MVVM
• Virtual DOM(Facebook)
• Component
• Single Page Application (SPA)

3. MVVM

4. Component

5. Angular1 Component

6. Vue Component

7. React Component

8. Let’s Vue

9. 起手式

10. Single File Component
• Extension: vue
• Loader: vue-loader
• Easy to maintain
• Required: Webpack
• Loader: babel, style, css,
sass, postcss, file, url, eslint

11. Single File Component
• script
• template
• style

12. Script

13. Conditional & Loop
• v-if
• v-else
• v-else-if
• v-show
• v-for

14. Props & Event
• v-bind
• v-model
• v-on
v-bind:msg => :msg
v-on:click => @click

15. Style
全域 本地

16. One Way Binding
UI
Data

17. Two Way Binding
UI
Data

18. Vue Angular
v-if ng-if
v-else ng-else
v-else-if ng-else-if
v-for ng-repeat
v-show ng-show
v-model ng-model

20. Life Cycle

22. Slots
NavLinkSlot

23. Named Slots
ModalSlot

24. Named Slots

25. Plugins

26. Directives
• Low-level DOM access
• Be not exactly like the
directive of angular

27. Directives Hook Function
• bind
• inserted
• update
• componentUpdated
• unbind

28. Directives Hook Arguments
• el
• binding
• vnode
• oldVnode

29. Directive binding
• name
• value
• expression
• arg
• modifiers