Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

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

5. WEB FRAMEWORKS
BENCHMARK

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

16. USING JAVASCRIPT EXPRESSIONS

17. DIRECTIVES

18. Class Bindings

19. CONDITIONAL RENDERING

20. LOOPS

21. METHOD EVENT HANDLERS

22. FORM INPUT BINDINGS
Two Way Data Bindings

23. EVENT & KEY MODIFIERS

24. Computed Properties

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

32. Vuex
State Management

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

36. Modularizing the store

37. COMPONENT STRUCTURE

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

40. Teleport component

41. Composition api
• Totally optional
• Useful for more large scale application
• Same code can be reused with multiple component
• Replacement of Mixin

42. TypeScript support

43. Multiple v-model supported

44. Any Question?

45. Thanks All