Introduction to VueJS for begginers with examples | Namspace IT
- 1. Welcome Abdul Mohaimen Khalid Junior Software Engineer NamespaceIT
- 2. VUE.JS
- 3. Evan You Creator @Vue.js Previously worked as a Creative Technologist at Google From 2016 working full-time on Vue.JS framework.
- 4. HISTORY Started in late 2013 First release Feb. 2014 (v0.6) v1.0.0 Evangelion Oct. 2015 V2.6 Feb 13, 2017 Latest version 3.0 Sep 18, 2020
- 8. ADVANTAGES Very Small Size Easy to Understand and Develop Applications Simple Integration Detailed Documentation Progressive framework Component oriented
- 9. VERY SMALL SIZE Name Size React + react-dom : 34.4 kB Angular : 62.2 kB Vue.js : 23.8 kB jQuery : 31.1 kB
- 10. ECOSYSTEM Project Description vue-router Single-page application routing vuex Large-scale state management vue-cli Project scaffolding vue-loader Single File Component (*.vue file) loader for webpack vue-class-component TypeScript decorator for a class-based API vue-rx RxJS integration vue-devtools Browser DevTools extension
- 11. WHO IS USING IT? GitLab Upwork NativeScript Weex Baidu
- 12. Native Apps • NativeScript with Vue.js • Weex - Mobile cross-platform UIs
- 13. How it works? MVVMView Model ViewModel
- 14. Vue LifeCycle
- 15. TEXT RAW HTML
- 17. DIRECTIVES
- 18. Class Bindings
- 20. LOOPS
- 22. FORM INPUT BINDINGS Two Way Data Bindings
- 23. EVENT & KEY MODIFIERS
- 25. Uppercase convert using computed property
- 26. Filter
- 27. Component
- 28. Component Communication Parent component to Child component
- 29. Component Communication Parent component to Child component
- 30. Component Communication Child component to Parent component
- 31. Vue Router
- 33. 1. Structuring the store 2. Modularizing the store 3. Resetting module state Architecting Vuex store for large scale Vue.js applications
- 34. 1.The state object 2.Getter functions 3.Actions 4.Mutations. A Vuex store contains 4 main components:
- 35. Vuex Workflow
- 38. What's new in Vue 3 - What changed? • Fragment / Multiple root component • Teleport component • Composition api • Better TypeScript support • Multiple v-model supported • Vit support • Easy migration v2 to v3
- 39. Fragment / Multiple root component
- 41. Composition api • Totally optional • Useful for more large scale application • Same code can be reused with multiple component • Replacement of Mixin
- 44. Any Question?
- 45. Thanks All