Before we get started...

You can find the resources below:

And for those posting on social media:

Ben Hong

@bencodezen

Senior Frontend Engineer @ GitLab

A Little About You...

Learning Format

1. Learn
    
2. Reinforce
    
3. Apply

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.

Why use

client-side

frameworks?

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

Angular

Overview

React

Overview

Vue

Overview

Which

framework

should you choose?

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

The Basics of Vue.js

A Vue Instance

Declarative Rendering

Exercise #1: Vue Basics

Instructions

Convert a flat HTML file into a basic Vue app

1. Open 01-captain-marvel.html
2. 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

Extra Credit

1. Refactor data model to accommodate the 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...

What are directives exactly?

They are Vue specific methods that allow you to accomplish common goals without worrying how it is implemented.

• v-if

• v-else

• v-else-if

• v-show

v-if

v-else

v-else-if

It ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

v-show

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

v-if

v-else

v-else-if

• Higher toggle costs
• It's lazy, so it only renders when the condition is true
• Ensures event listeners and child components are properly destroyed

v-show

• Higher initial cost
• Renders on the page regardless
• Uses CSS to toggle the display of the element

v-for

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

Instructions

Build a counter app

1. Open 02-counter-app.html
2. Create a new Vue instance
3. Attach to the correct HTML element
4. Functionality:
   • Render dynamic count data
   • Add ability to increment count
   • Add ability to decrement count

Extra Credit

1. Add the ability to reset the count data
2. Allow the user to dynamically set the amount that the counter is incremented or decremented by
3. 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!

Quick Break!

Quick Break!

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: Intro to SFCs

Instructions

Migrate your Counter app into the CLI

1. Open App.vue
2. Copy over your:
   • Template
   • Vue Instance

Extra Credit

1. Migrate the CSS over to the app

If you think SFCs are cool now...

Instructions

Refactor out your counter app to a SFC!

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!

Exercise #4: Create a SFC

You can pass

data to your SFCs!

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

You can use directives on

SFCs too!

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

Instructions

Convert flat web page file to a SFC

1. Locate 05-sign-up.html and 05-sign-up.css 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

Extra Credit

1. Add additional password logic
2. 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

Exercise #5: Sign Up Form

Vue.js has its own DevTools extension...

Exercise #6: To Do App

Instructions

Build a to do list app from scratch

1. Create a new Todo component called 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

Extra Credit

1. Refactor HTML into single file components 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...

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!

Concepts

Workflow

• Computed Properties
• Filters
• Props
• Mixins
• Lifecycle Methods
• State Management
• Custom Directives
• Routing
• Animations

• App Architecture w/ Vue.js
• Testing with Vue.js
• Managing Styles w/ Vue.js
• Animate All Things w/ Vue.js
• Popular Vue.js Tools
  • vuex
  • vetur
  • Vue DevTools

Gives me what I want when I need it, and then it gets out of my way.

Sarah Drasner (@sarah_edo)

Additional Resources

• Official 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.

Ben Hong

Thank you!

If you have any additional questions, please feel free to reach out to me.
 

@bencodezen