Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at...
Transcript of Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at...
![Page 1: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/1.jpg)
Vue.js 101Vue.js 101Ben Hong
Senior UI Engineer at Politico@bencodezen
Repo: Repo:
Slides: Slides:
https://github.com/bencodezen/vuejs-101-tutorialhttps://github.com/bencodezen/vuejs-101-tutorial
https://slides.com/bencodezen/vuejs-101-tutorial/livehttps://slides.com/bencodezen/vuejs-101-tutorial/live
Be sure to clone the repo if you want to followBe sure to clone the repo if you want to followalong and/or work on the exercises!along and/or work on the exercises!
![Page 2: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/2.jpg)
Before we get started...Before we get started...
Repo: Repo:
Slides: Slides:
https://github.com/bencodezen/vuejs-101-tutorialhttps://github.com/bencodezen/vuejs-101-tutorial
https://slides.com/bencodezen/vuejs-101-tutorialhttps://slides.com/bencodezen/vuejs-101-tutorial
You can find the resources below:You can find the resources below:
And for those posting on social media:And for those posting on social media:
#vuejs101#vuejs101
![Page 4: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/4.jpg)
Ben HongBen Hong
@bencodezen
Senior UI Developer @ POLITICO
https://www.vuedc.io
VueDCVueDC
![Page 5: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/5.jpg)
Ben HongBen Hong
@bencodezen
Senior UI Developer @ POLITICO
https://www.vuemeetups.org
https://www.vuedc.io
VueMeetupsVueMeetups
VueDCVueDC
![Page 6: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/6.jpg)
A Little About A Little About YouYou......
![Page 7: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/7.jpg)
![Page 8: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/8.jpg)
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
![Page 9: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/9.jpg)
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
ConceptsExamples
![Page 10: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/10.jpg)
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
ConceptsExamples
QuestionsClarification
![Page 11: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/11.jpg)
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
ConceptsExamples
QuestionsClarification
PracticeExperimentGet Help
![Page 12: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/12.jpg)
ParticipationParticipation Guidelines Guidelines
1. Raise your hand for questions at any time!
2. All examples are public (no need to copy down codeexamples)
3. Please no recording (for the privacy of participants)
![Page 13: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/13.jpg)
QQ&&AA
![Page 14: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/14.jpg)
A Short IntroductionA Short IntroductionVue.jsVue.js
![Page 15: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/15.jpg)
Vue is a Vue is a progressive frameworkprogressive framework forforbuilding user interfaces. Unlikebuilding user interfaces. Unlikeother monolithic frameworks, Vue isother monolithic frameworks, Vue isdesigned from the ground up to bedesigned from the ground up to beincrementally adoptableincrementally adoptable..
![Page 16: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/16.jpg)
Why useWhy useclient-sideclient-sideframeworks?frameworks?
![Page 17: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/17.jpg)
Allows you to controlAllows you to control every aspect every aspect of your site'sof your site's user experienceuser experience
![Page 18: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/18.jpg)
®
![Page 19: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/19.jpg)
![Page 20: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/20.jpg)
MostMost PopularPopularClient-Side FrameworksClient-Side Frameworks
![Page 21: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/21.jpg)
AngularAngularOverviewOverview
![Page 22: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/22.jpg)
Easy to get something up and runningpretty quickly
Developed and maintained by GoogleAngularAngular
OverviewOverview
![Page 23: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/23.jpg)
Easy to get something up and runningpretty quickly
Most of what was happening seemedmore like magic
Developed and maintained by Google
Opinionated on how you should buildyour app
AngularAngularOverviewOverview
![Page 24: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/24.jpg)
ReactReactOverviewOverview
![Page 25: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/25.jpg)
Great performance due to the use ofthe virtual DOM
ReactReactOverviewOverview
Large community base and has a modelfor cross-platform development
You got a lot better at vanilla JavaScriptand ES6 very quickly
![Page 26: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/26.jpg)
Great performance due to the use ofthe virtual DOM
There is a high learning curve to simplyget started
ReactReactOverviewOverview
Unfriendly to developers who are notwell versed in JavaScript ES6+
Large community base and has a modelfor cross-platform development
It's a bit like the Wild West as far as howthings should be done
You got a lot better at vanilla JavaScriptand ES6 very quickly
![Page 27: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/27.jpg)
VueVueOverviewOverview
![Page 28: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/28.jpg)
Takes the best of both worlds andbrings them together
Great performance that is on par if notbetter than React.js
Flexible and accommodating to howyou prefer to build apps
An open-source framework with nocorporate influence
It does not alienate non-JavaScriptdevelopers
VueVueOverviewOverview
![Page 29: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/29.jpg)
Takes the best of both worlds andbrings them together
Great performance that is on par if notbetter than React.js
Flexible and accommodating to howyou prefer to build apps
An open-source framework with nocorporate influence
Does not currently have a formal modelfor cross-platform development
It does not alienate non-JavaScriptdevelopers
VueVueOverviewOverview
![Page 30: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/30.jpg)
WhichWhichframeworkframeworkshould you choose?should you choose?
![Page 31: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/31.jpg)
It It dependsdepends......
![Page 32: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/32.jpg)
Choose Choose VueVue
![Page 33: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/33.jpg)
Vue is the most Vue is the most compassionatecompassionateframework in the market rightframework in the market rightnow because it allows you tonow because it allows you tochoosechoose what's best for youwhat's best for you..
Ben HongBen Hong
![Page 34: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/34.jpg)
The The BasicsBasics of Vue.js of Vue.js
![Page 35: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/35.jpg)
A Vue A Vue InstanceInstance
![Page 36: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/36.jpg)
Declarative Declarative RenderingRendering
![Page 37: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/37.jpg)
Exercise #1Exercise #1: Vue Basics: Vue Basics
InstructionsInstructions
Convert a flat HTML file into a basic Vue app
1. Open 01-captain-marvel.html2. Create a new Vue instance3. Attach to the correct HTML element4. Extract the following data into the app:
Hero NameReal NameHeight, Eye and Hair ColorCitizenshipPlace of BirthPowersAbilities
Extra CreditExtra Credit
1. Refactor data model to accommodate thetable format
2. Refactor abilities to use an Array ofsnippets to improve reuse
3. Add a new data property 'Gender' to theapp and use it to determine the pronounbeing used in the text
4. Add a new data property 'Location' thatgenerates a random longitude andlatitude each time the page is reloaded
![Page 38: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/38.jpg)
Let's Talk AboutLet's Talk AboutDirectivesDirectives
![Page 39: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/39.jpg)
Directives are the part ofDirectives are the part ofVue.js that are a bit Vue.js that are a bit magicalmagical......
![Page 40: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/40.jpg)
What are What are directivesdirectives exactly? exactly?They are Vue specific methods that allow you toaccomplish common goals without worrying how it isimplemented.
vif
velse
velseif
vshow
vfor
vbind
von
vmodel
![Page 41: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/41.jpg)
v-ifv-ifv-elsev-elsev-else-ifv-else-if
“ It ensures that eventlisteners and childcomponents inside theconditional block areproperly destroyed and re-created during toggles.
![Page 42: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/42.jpg)
v-showv-show
“ The element is always rendered regardless ofinitial condition, with CSS-based toggling.
![Page 43: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/43.jpg)
v-ifv-ifv-elsev-elsev-else-ifv-else-if v-showv-show
![Page 44: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/44.jpg)
v-ifv-ifv-elsev-elsev-else-ifv-else-if
Higher toggle costs
v-showv-showHigher initial cost
![Page 45: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/45.jpg)
v-ifv-ifv-elsev-elsev-else-ifv-else-if
Higher toggle costsIt's lazy, so it only renderswhen the condition is true
v-showv-showHigher initial costRenders on the pageregardless
![Page 46: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/46.jpg)
v-ifv-ifv-elsev-elsev-else-ifv-else-if
Higher toggle costsIt's lazy, so it only renderswhen the condition is trueEnsures event listenersand child components areproperly destroyed
v-showv-showHigher initial costRenders on the pageregardlessUses CSS to toggle thedisplay of the element
![Page 47: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/47.jpg)
![Page 48: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/48.jpg)
v-forv-forAllows us to "render a list ofitems based on an array [orobject]."
![Page 49: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/49.jpg)
v-bindv-bindAllow us to manipulateHTML attributes withdynamic data
![Page 50: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/50.jpg)
v-bindv-bindAllow us to manipulateHTML attributes withdynamic data
![Page 51: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/51.jpg)
v-onv-onAllow us to attach JavaScript functions tocommon events
![Page 52: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/52.jpg)
v-onv-onAllow us to attach JavaScript functions tocommon events
![Page 53: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/53.jpg)
v-onv-onCommon DOM events that you mostlikely be using a fair amount
@click
@keyup
@keydown
@input
@change
@submit
![Page 54: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/54.jpg)
v-onv-onModifiers are a syntactic sugar to helpwith common functionality
![Page 55: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/55.jpg)
v-modelv-modelAllows us to use two-waydata binding
![Page 56: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/56.jpg)
QQ&&AA
![Page 57: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/57.jpg)
Exercise #2Exercise #2: Counter: Counter
InstructionsInstructions
Build a counter app
1. Open 02-counter-app.html2. Create a new Vue instance3. Attach to the correct HTML element4. Functionality:
Render dynamic count dataAdd ability to increment countAdd ability to decrement count
Extra CreditExtra Credit
1. Add the ability to reset the count data2. Allow the user to dynamically set the
amount that the counter is incrementedor decremented by
3. Allow the user to save a snapshot of thecurrent count and restore it if desired
4. Allow the user to generate a list ofsnapshots that can be restored at anypoint
![Page 58: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/58.jpg)
Quick Quick Break!Break!Repo: Repo:
Slides: Slides:
https://github.com/bencodezen/vuejs-101-tutorialhttps://github.com/bencodezen/vuejs-101-tutorial
https://slides.com/bencodezen/vuejs-101-tutorialhttps://slides.com/bencodezen/vuejs-101-tutorial
![Page 59: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/59.jpg)
Quick Quick Break!Break!
Please fill out this quick survey!Please fill out this quick survey!
https://bencodezen.typeform.com/to/Q1pcsZ
Repo: Repo:
Slides: Slides:
https://github.com/bencodezen/vuejs-101-tutorialhttps://github.com/bencodezen/vuejs-101-tutorial
https://slides.com/bencodezen/vuejs-101-tutorialhttps://slides.com/bencodezen/vuejs-101-tutorial
![Page 60: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/60.jpg)
Quick Quick Break!Break!
Please fill out this quick survey!Please fill out this quick survey!
https://bencodezen.typeform.com/to/Q1pcsZ
Repo: Repo:
Slides: Slides:
https://github.com/bencodezen/vuejs-101-tutorialhttps://github.com/bencodezen/vuejs-101-tutorial
https://slides.com/bencodezen/vuejs-101-tutorialhttps://slides.com/bencodezen/vuejs-101-tutorial
![Page 61: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/61.jpg)
QuickQuickDebriefDebrief
![Page 62: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/62.jpg)
QuickQuickDebriefDebrief
A little more about you...
![Page 63: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/63.jpg)
QuickQuickDebriefDebrief
A little more about you...There are many ways toaccomplish the things weare doing in this tutorial
![Page 64: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/64.jpg)
Let's talk aboutLet's talk aboutVue.js CLIVue.js CLIapplicationsapplications
![Page 66: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/66.jpg)
![Page 67: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/67.jpg)
Vue.js AppVue.js AppTourTour
![Page 68: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/68.jpg)
Single FileSingle File
ComponentComponent**.vue.vue
![Page 69: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/69.jpg)
QQ&&AA
![Page 70: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/70.jpg)
Exercise #3Exercise #3: Intro to SFCs: Intro to SFCs
InstructionsInstructions
Migrate your Counter app into the CLI
1. Open App.vue2. Copy over your:
TemplateVue Instance
Extra CreditExtra Credit
1. Migrate the CSS over to the app
![Page 71: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/71.jpg)
If you think If you think SFCsSFCs are arecool nowcool now......
![Page 72: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/72.jpg)
![Page 73: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/73.jpg)
![Page 74: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/74.jpg)
![Page 75: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/75.jpg)
![Page 76: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/76.jpg)
Exercise #4Exercise #4: Create a SFC: Create a SFC
InstructionsInstructions
Refactor out your counter app to a SFC!
1. Create a SFC in the /component directorycalled Counter.vue
2. Migrate all Counter properties to this newSFC
1. Template2. Data3. Methods4. CSS (Optional)
3. Import your component into App.vue sothat your component renders on thepage!
![Page 77: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/77.jpg)
You can passYou can passdatadata to your SFCs! to your SFCs!
![Page 78: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/78.jpg)
![Page 79: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/79.jpg)
And just when youAnd just when youthought thought SFCsSFCs could could
not be cooler...not be cooler...
![Page 80: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/80.jpg)
You can useYou can usedirectivesdirectives on on
SFCs too!SFCs too!
(ノ◕ヮ◕)ノ*:・゚✧(ノ◕ヮ◕)ノ*:・゚✧
![Page 81: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/81.jpg)
InstructionsInstructions
Convert flat web page file to a SFC
1. Locate 05-sign-up.html and 05-sign-up.cssfor the template and styles
2. Create a new component calledAccountCreation.vue and import it intoApp.vue
3. Functionality to build:
Toggle visibility of error messagesbased on criteria per input fieldMake Submit button dynamicallydisable based on login
Extra CreditExtra Credit
1. Add additional password logic2. Create password verification functionality
with the appropriate error toggling ability3. Refactor the UI to reduce repetition of
HTML4. Dynamically style the input fields based on
whether error or success
Exercise #5Exercise #5: Sign Up Form: Sign Up Form
![Page 82: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/82.jpg)
Vue.js has Vue.js has its ownits ownDevToolsDevTools extension... extension...
![Page 83: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/83.jpg)
Exercise #6Exercise #6: To Do App: To Do App
InstructionsInstructions
Build a to do list app from scratch
1. Create a new Todo component calledTodo.vue
2. Import the component into the page andmake sure it renders:
3. Basic Functionality
App should render a list of tasksUser should be able to add new tasksUser should be able to complete tasksDynamically style tasks that arecompletedUser should be able to delete tasks
Extra CreditExtra Credit
1. Refactor HTML into single file componentsas you see fit to reduce clutter andincrease reuse
2. Create a "Trash Can" list that keeps theitems the user has "deleted" so that theycan undo the deletion
3. Add "Due Date" property to tasks4. Dynamically style the task if it is overdue5. Add "Tags" property to tasks that allow
you to sort and filter your tasks
![Page 84: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/84.jpg)
So let's do a quickSo let's do a quickrerevuevue......
![Page 85: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/85.jpg)
What We What We CoveredCovered Today Today
ConceptsBasics of Vue.js
Declarative RenderingData StoreDirectivesMethods
Vue CLISingle File ComponentsVue DevTools
Built three apps1. Counter2. Sign Up Form UI3. To Do List
![Page 86: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/86.jpg)
QQ&&AA
![Page 87: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/87.jpg)
Congratulations!Congratulations!
You are ready to build and work onYou are ready to build and work onVue.js applications!Vue.js applications!
![Page 88: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/88.jpg)
But wait,But wait,there's there's moremore!!
![Page 89: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/89.jpg)
ConceptsConcepts WorkflowWorkflowComputed PropertiesFiltersPropsMixinsLifecycle MethodsState ManagementCustom DirectivesRoutingAnimations
App Architecture w/ Vue.jsTesting with Vue.jsManaging Styles w/ Vue.jsAnimate All Things w/ Vue.jsPopular Vue.js Tools
vuexveturVue DevTools
![Page 90: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/90.jpg)
Gives me what I wantGives me what I wantwhen I need it, and then itwhen I need it, and then itgets out of my waygets out of my way..
Sarah Drasner (Sarah Drasner ( ))@sarah_edo@sarah_edo
![Page 91: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/91.jpg)
AdditionalAdditional Resources Resources
Official Vue.js Docs
FEM: Introduction to Vue.js
Udemy: Vue.js Courses
Vue.js Discord Channel
Vue.js Meetups
https://vuejs.org/
https://frontendmasters.com/courses/vue/
https://www.udemy.com/courses/search/?q=vuejs
https://vue-land.js.org/
https://www.vuemeetups.org
![Page 92: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/92.jpg)
Vue is the most Vue is the most compassionatecompassionateframework in the market rightframework in the market rightnow because it allows you tonow because it allows you tochoosechoose what's best for youwhat's best for you..
Ben HongBen Hong
![Page 93: Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Rep o: Sl i d es : h t t p s :// g i t h u b . com / b e n cod](https://reader033.fdocuments.net/reader033/viewer/2022042920/5f64ee76c388452cd2457d28/html5/thumbnails/93.jpg)
Thank you!Thank you!If you have any additional questions, please feelfree to reach out to me.
@bencodezen