Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at...

transcript

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://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

Ben HongBen Hong

@bencodezen

https://www.vuedc.io

VueDCVueDC

Ben HongBen Hong

@bencodezen

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

1. Learn

2. Reinforce

3. Apply

ConceptsExamples

1. Learn

2. Reinforce

3. Apply

ConceptsExamples

QuestionsClarification

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

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

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

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

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.

velseif

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

Higher toggle costs

v-showv-showHigher initial cost

Higher toggle costsIt's lazy, so it only renderswhen the condition is true

v-showv-showHigher initial costRenders on the pageregardless

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-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

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

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:

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:

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:

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

https://cli.vuejs.org/https://cli.vuejs.org/

Vue.js AppVue.js AppTourTour

Single FileSingle File

ComponentComponent**.vue.vue

QQ&&AA

Exercise #3Exercise #3: Intro to SFCs: Intro to SFCs

Migrate your Counter app into the CLI

1. Open App.vue2. Copy over your:

TemplateVue Instance

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

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!

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

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

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

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

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

Senior UI Engineer at Politico Vue.js 101 Ben Hong · Vue.js 101 Ben Hong Senior UI Engineer at...

Documents