Vue.js 101

A presentation at Fluent in June 2018 in San Jose, CA, USA by Ben Hong

Vue.js 101 Ben Hong Senior UI Engineer at Politico @bencodezen Be sure to clone the repo if you want to follow along and/or work on the exercises! Repo: https://github.com/bencodezen/vuejs-101-tutorial Slides: https://slides.com/bencodezen/vuejs-101-tutorial/live

Before we get started... You can find the resources below: Repo: https://github.com/bencodezen/vuejs-101-tutorial Slides: https://slides.com/bencodezen/vuejs-101-tutorial And for those posting on social media: #vuejs101

Ben Hong Senior UI Developer @ POLITICO @bencodezen

VueDC https://www.vuedc.io Ben Hong Senior UI Developer @ POLITICO @bencodezen

VueDC https://www.vuedc.io Ben Hong Senior UI Developer @ POLITICO @bencodezen VueMeetups https://www.vuemeetups.org

A Little About You You... ...

Learning Format
Learn 2. Reinforce 3. Apply

Learning Format Concepts 1. Learn 2. Reinforce 3. Apply Examples

Learning Format Concepts 1. Learn 2. Reinforce 3. Apply Examples Questions Clarification

Learning Format Concepts 1. Learn 2. Reinforce 3. Apply Examples Questions Clarification Practice Experiment Get Help

Participation Guidelines 1. Raise your hand for questions at any time! 2. All examples are public (no need to copy down code examples) 3. Please no recording (for the privacy of participants)

Q&A

A Short Introduction Vue.js

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. adoptable.

Why use client-side frameworks?

Allows you to control every aspect of your site's user experience

®

Most Popular Client-Side Frameworks

Angular Overview

Angular Overview Developed and maintained by Google Easy to get something up and running pretty quickly

Angular Overview Developed and maintained by Google Easy to get something up and running pretty quickly Most of what was happening seemed more like magic Opinionated on how you should build your app

React Overview

React Overview Large community base and has a model for cross-platform development Great performance due to the use of the virtual DOM You got a lot better at vanilla JavaScript and ES6 very quickly

React Overview Large community base and has a model for cross-platform development Great performance due to the use of the virtual DOM You got a lot better at vanilla JavaScript and ES6 very quickly There is a high learning curve to simply get started Unfriendly to developers who are not well versed in JavaScript ES6+ It's a bit like the Wild West as far as how things should be done

Vue Overview

Vue Overview An open-source framework with no corporate influence Takes the best of both worlds and brings them together It does not alienate non-JavaScript developers Great performance that is on par if not better than React.js Flexible and accommodating to how you prefer to build apps

Vue Overview An open-source framework with no corporate influence Takes the best of both worlds and brings them together It does not alienate non-JavaScript developers Great performance that is on par if not better than React.js Flexible and accommodating to how you prefer to build apps Does not currently have a formal model for cross-platform development

Which framework should you choose?

It depends depends... ...

Choose Vue

Vue is the most compassionate framework in the market right now because it allows you to choose what's best for you. you. Ben Hong

The Basics of Vue.js

A Vue Instance

Declarative Rendering

Exercise #1: #1: Vue Basics Convert a flat HTML file into a basic Vue app Instructions Extra Credit
Open 01-captain-marvel.html
Refactor data model to accommodate the
Create a new Vue instance 3. Attach to the correct HTML element 4. Extract the following data into the app: Hero Name Real Name Height, Eye and Hair Color Citizenship Place of Birth Powers Abilities table format 2. Refactor abilities to use an Array of snippets to improve reuse 3. Add a new data property 'Gender' to the app and use it to determine the pronoun being used in the text 4. Add a new data property 'Location' that generates a random longitude and latitude each time the page is reloaded

Let's Talk About Directives

Directives are the part of Vue.js that are a bit magical magical... ...

What are directives exactly? They are Vue specific methods that allow you to accomplish common goals without worrying how it is implemented. vif vfor velse vbind velseif von vshow vmodel

v-if v-else v-else-if “ listeners and child It ensures that event components inside the conditional block are properly destroyed and recreated during toggles.

v-show “ initial condition, with CSS-based toggling. The element is always rendered regardless of

v-if v-else v-else-if v-show

v-if v-else v-else-if Higher toggle costs v-show Higher initial cost

v-if v-else v-else-if v-show Higher toggle costs Higher initial cost It's lazy, so it only renders Renders on the page when the condition is true regardless

v-if v-else v-else-if v-show Higher toggle costs Higher initial cost It's lazy, so it only renders Renders on the page when the condition is true regardless Ensures event listeners Uses CSS to toggle the and child components are display of the element properly destroyed

v-for Allows us to "render a list of items based on an array [or object]."

v-bind Allow us to manipulate HTML attributes with dynamic data

v-bind Allow us to manipulate HTML attributes with dynamic data

v-on Allow us to attach JavaScript functions to common events

v-on Allow us to attach JavaScript functions to common events

v-on Common DOM events that you most likely be using a fair amount @click @keyup @keydown @input @change @submit

v-on Modifiers are a syntactic sugar to help with common functionality

v-model Allows us to use two-way data binding

Q&A

Exercise #2: #2: Counter Build a counter app Instructions Extra Credit
Open 02-counter-app.html
Add the ability to reset the count data
Create a new Vue instance
Allow the user to dynamically set the
Attach to the correct HTML element amount that the counter is incremented
Functionality: or decremented by Render dynamic count data Add ability to increment count Add ability to decrement count
Allow the user to save a snapshot of the current count and restore it if desired 4. Allow the user to generate a list of snapshots that can be restored at any point

Quick Break! Repo: https://github.com/bencodezen/vuejs-101-tutorial Slides: https://slides.com/bencodezen/vuejs-101-tutorial

Quick Break! Repo: https://github.com/bencodezen/vuejs-101-tutorial Slides: https://slides.com/bencodezen/vuejs-101-tutorial Please fill out this quick survey! https://bencodezen.typeform.com/to/Q1pcsZ

Quick Break! Repo: https://github.com/bencodezen/vuejs-101-tutorial Slides: https://slides.com/bencodezen/vuejs-101-tutorial Please fill out this quick survey! https://bencodezen.typeform.com/to/Q1pcsZ

Quick Debrief

Quick Debrief A little more about you...

Quick Debrief A little more about you... There are many ways to accomplish the things we are doing in this tutorial

Let's talk about Vue.js CLI applications

https://cli.vuejs.org/

Vue.js App Tour

Single File Component *.vue

Q&A

Exercise #3: #3: Intro to SFCs Migrate your Counter app into the CLI Instructions Extra Credit
Open App.vue
Migrate the CSS over to the app
Copy over your: Template Vue Instance

If you think SFCs are cool now... now...

Exercise #4: #4: Create a SFC Refactor out your counter app to a SFC! Instructions 1. Create a SFC in the /component directory called Counter.vue 2. Migrate all Counter properties to this new SFC 1. Template 2. Data 3. Methods 4. CSS (Optional) 3. Import your component into App.vue so that your component renders on the page!

You can pass data to your SFCs!

And just when you thought SFCs could not be cooler...

You can use directives on SFCs too! ﾉヮﾉ･ﾟ✧ ( ◕ ◕) *:

Exercise #5: #5: Sign Up Form Convert flat web page file to a SFC Instructions Extra Credit
Locate 05-sign-up.html and 05-sign-up.css
Add additional password logic for the template and styles 2. Create a new component called AccountCreation.vue and import it into App.vue 3. Functionality to build: Toggle visibility of error messages based on criteria per input field Make Submit button dynamically disable based on login
Create password verification functionality with the appropriate error toggling ability 3. Refactor the UI to reduce repetition of HTML 4. Dynamically style the input fields based on whether error or success

Vue.js has its own DevTools extension...

Exercise #6: #6: To Do App Build a to do list app from scratch Instructions Extra Credit
Create a new Todo component called
Refactor HTML into single file components Todo.vue 2. Import the component into the page and make sure it renders: 3. Basic Functionality App should render a list of tasks User should be able to add new tasks User should be able to complete tasks Dynamically style tasks that are completed User should be able to delete tasks as you see fit to reduce clutter and increase reuse 2. Create a "Trash Can" list that keeps the items the user has "deleted" so that they can undo the deletion 3. Add "Due Date" property to tasks 4. Dynamically style the task if it is overdue 5. Add "Tags" property to tasks that allow you to sort and filter your tasks

So let's do a quick revue re vue... ...

What We Covered Today Concepts Basics of Vue.js Declarative Rendering Data Store Directives Methods Vue CLI Single File Components Vue DevTools Built three apps 1. Counter 2. Sign Up Form UI 3. To Do List

Q&A

Congratulations! You are ready to build and work on Vue.js applications!

But wait, there's more more!!

Concepts Workflow Computed Properties App Architecture w/ Vue.js Filters Testing with Vue.js Props Managing Styles w/ Vue.js Mixins Animate All Things w/ Vue.js Lifecycle Methods Popular Vue.js Tools State Management Custom Directives Routing Animations vuex vetur Vue DevTools

Gives me what I want when I need it, and then it gets out of my way. way. Sarah Drasner (@sarah_edo)

Additional Resources Oﬃcial Vue.js Docs https://vuejs.org/ FEM: Introduction to Vue.js https://frontendmasters.com/courses/vue/ Udemy: Vue.js Courses https://www.udemy.com/courses/search/?q=vuejs Vue.js Discord Channel https://vue-land.js.org/ Vue.js Meetups https://www.vuemeetups.org

Vue is the most compassionate framework in the market right now because it allows you to choose what's best for you. you. Ben Hong

Thank you! If you have any additional questions, please feel free to reach out to me. @bencodezen

Ben Hong
@bencodezen

1 / 93

With so many client-side frameworks these days, it can be tough to figure out which one to start with. Vue.js is the perfect gateway framework for taking the first step into the constantly changing client-side framework ecosystem.

Join Ben Hong for a hands-on deep dive into Vue.js. You’ll start from a bare-bones HTML5 template and build three applications from the ground up. Along the way, you’ll explore Vue.js key concepts and learn how it compares to other frameworks like Angular and React.

Topics include:

Vue.js overview
How Vue.js compares to frameworks like React and Angular
Why you should use it
Vue.js essential concepts
Getting started

Resources

The following resources were mentioned during the presentation or are useful additional information.

Official Vue.js Docs

Unlike a lot of open source, you will definitely want to check out the docs for Vue.js. They are incredible and a phenomenal reference for you to use as you learn and grow as a Vue.js developer!
Frontend Masters: Introduction to Vue.js

Great introductory course by Sarah Drasner!
VueMeetups

Looking for a local meetup or want to start your own? We have you covered at VueMeetups.org!