An Actually Good Intro Vue Presentation

An Introduction Presentation to Vue. Briefly touches on the history of modifying the DOM from JavaScript. And then jumps into the core concepts of Vue from the Single File Components, Properties, Emitters, Router, Vuex, etc. Come learn about Vue with
us!

Originally presented at SLC Frontend Dev Meetup:
https://www.meetup.com/SLC-FE-DEV/events/259135734/

Transcript

1. An Actually Good Intro Vue Presentation March 12, 2019 Jared Potter
2. Slides and Code Available (also available at end) Slides: https://goo.gl/sXzYZK Code: https://github.com/JaredPotter/ vue-intro-demo
3. Who Am I - Jared Potter
4. Fitness • Hiking • Yoga • Gym • Skiing (learning)
5. (modern) Board Games
6. Personal Software Projects • “But Does it Order Pizza” ◦ Amazon Dash Button • Automated Crypto Trading • Video Downloaders/Rippers • Security / Privacy (tinfoil hat)
7. Talk Expectations What this talk isn’t • Advanced Vue What this talk is • Brief history of interactive web apps • Modern Frontend JavaScript Framework Core Concepts • Specific Demos to illustrate • Questions are welcome anytime
8. History • Started with static HTML / CSS • JavaScript opened up interactivity with the native ‘document’ API • jQuery made JavaScript shorthanded, and added easy ajax • Frontend JavaScript Frameworks ◦ Angular ◦ React ◦ Vue
9. History - Demo • (demo time)
10. Frontend JavaScript Frameworks Concepts • Single Page Application (SPA) ◦ Navigation Routing • 2-Way Binding • State Management • Structured methodology for creating applications
11. The DOM
12. Model View ViewModel - (MVVM)
13. The Virtual DOM
14. Single Page Application • “No page refresh” when navigating through pages • Simply updates the DOM upon page changes
15. Two Way Binding • When the <input type=”text” v-model=”myValue”/> changes, this updates the myValue variable on the model. • Similarly, when the myValue variables changes in code, this updates the view.
16. State Management • Maintain Application state using a pattern of state, getters, mutations, and actions. • Examples: Vuex for Vue, and Redux for React
17. Vue - Getting Started
18. Getting Started - Vue CLI • npm install -global vue-cli • vue create vue-intro-demo • cd vue-intro-demo • vue add router • vue add vuex
19. Demo Time
20. Thank You!
21. References The DOM - https://www.researchgate.net/figure/Dom-Tree-of-An-Example-Web-Page_fig2_221417012 MVVM - https://012.vuejs.org/guide The Virtual DOM - https://www.vishwainfoways.com/blog/difference-between-dom-and-virtual-dom/
22. Questions? Slides: https://goo.gl/sXzYZK Code: https://github.com/JaredPotter/ vue-intro-demo Slides and Code Contact + Feedback • jaredpotter1@gmail.com • https://twitter.com/jaredpotter