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!
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
Ben HongBen Hong
@bencodezen
Senior UI Developer @ POLITICO
https://www.vuedc.io
VueDCVueDC
Ben HongBen Hong
@bencodezen
Senior UI Developer @ POLITICO
https://www.vuemeetups.org
https://www.vuedc.io
VueMeetupsVueMeetups
VueDCVueDC
A Little About A Little About YouYou......
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
ConceptsExamples
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
ConceptsExamples
QuestionsClarification
Learning Learning FormatFormat
1. Learn
2. Reinforce
3. Apply
ConceptsExamples
QuestionsClarification
PracticeExperimentGet Help
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)
QQ&&AA
A Short IntroductionA Short IntroductionVue.jsVue.js
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..
Why useWhy useclient-sideclient-sideframeworks?frameworks?
Allows you to controlAllows you to control every aspect every aspect of your site'sof your site's user experienceuser experience
®
MostMost PopularPopularClient-Side FrameworksClient-Side Frameworks
AngularAngularOverviewOverview
Easy to get something up and runningpretty quickly
Developed and maintained by GoogleAngularAngular
OverviewOverview
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
ReactReactOverviewOverview
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
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
VueVueOverviewOverview
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
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
WhichWhichframeworkframeworkshould you choose?should you choose?
It It dependsdepends......
Choose Choose VueVue
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
The The BasicsBasics of Vue.js of Vue.js
A Vue A Vue InstanceInstance
Declarative Declarative RenderingRendering
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
Let's Talk AboutLet's Talk AboutDirectivesDirectives
Directives are the part ofDirectives are the part ofVue.js that are a bit Vue.js that are a bit magicalmagical......
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
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.
v-showv-show
“ The element is always rendered regardless ofinitial condition, with CSS-based toggling.
v-ifv-ifv-elsev-elsev-else-ifv-else-if v-showv-show
v-ifv-ifv-elsev-elsev-else-ifv-else-if
Higher toggle costs
v-showv-showHigher initial cost
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
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
v-forv-forAllows us to "render a list ofitems based on an array [orobject]."
v-bindv-bindAllow us to manipulateHTML attributes withdynamic data
v-bindv-bindAllow us to manipulateHTML attributes withdynamic data
v-onv-onAllow us to attach JavaScript functions tocommon events
v-onv-onAllow us to attach JavaScript functions tocommon events
v-onv-onCommon DOM events that you mostlikely be using a fair amount
@click
@keyup
@keydown
@input
@change
@submit
v-onv-onModifiers are a syntactic sugar to helpwith common functionality
v-modelv-modelAllows us to use two-waydata binding
QQ&&AA
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
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
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
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
QuickQuickDebriefDebrief
QuickQuickDebriefDebrief
A little more about you...
QuickQuickDebriefDebrief
A little more about you...There are many ways toaccomplish the things weare doing in this tutorial
Let's talk aboutLet's talk aboutVue.js CLIVue.js CLIapplicationsapplications
Vue.js AppVue.js AppTourTour
Single FileSingle File
ComponentComponent**.vue.vue
QQ&&AA
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
If you think If you think SFCsSFCs are arecool nowcool now......
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!
You can passYou can passdatadata to your SFCs! to your SFCs!
And just when youAnd just when youthought thought SFCsSFCs could could
not be cooler...not be cooler...
You can useYou can usedirectivesdirectives on on
SFCs too!SFCs too!
(ノ◕ヮ◕)ノ*:・゚✧(ノ◕ヮ◕)ノ*:・゚✧
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
Vue.js has Vue.js has its ownits ownDevToolsDevTools extension... extension...
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
So let's do a quickSo let's do a quickrerevuevue......
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
QQ&&AA
Congratulations!Congratulations!
You are ready to build and work onYou are ready to build and work onVue.js applications!Vue.js applications!
But wait,But wait,there's there's moremore!!
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
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
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
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
Thank you!Thank you!If you have any additional questions, please feelfree to reach out to me.
@bencodezen