Vue.js 2 for Web Designers

Course details

Vue.js is a popular JavaScript framework that can be used to build interactive components or entire single-page apps. It's a powerful and flexible framework for the modern web designer—whether you use a little of it or a lot. In this course, Joe Chellman offers practical ways to incorporate Vue.js in real-world web designs. He introduces three small projects that benefit from Vue: a real-time updating product customizer that shows how to manage data and respond to events with Vue; an employee directory using Vue forms and animation; and a status board that makes external API calls and uses a third-party Vue component. Each project demonstrates what makes Vue most interesting and useful to web designers and provides solutions for dealing with the few unique challenges.

Learning objectives
Installing Vue.js and Vue devtools
Creating interactive components
Adding data to components
Listening for events
Scaffolding components
Building and wiring forms
Animating transitions
Incorporating live data via REST APIs
Adding third-party Vue components

Concepts

0. Introduction

01 - Get started with the popular Vue JavaScript framework
02 - What you should know
03 - Working with the exercise files

1. Introducing Vue

04 - What is Vue and what is it good for
05 - Vue concepts and jargon
06 - Vue tools
07 - Installing the Vue devtools

2. First Project - Customizer

08 - Installing Vue on an existing site
09 - Creating an instance from the mock-up
10 - Identifying components and data
11 - Adding data to our component
12 - Using a model to begin interactivity
13 - Using v-bind to update classes
14 - Simple templates with computed properties
15 - Listen for an event with v-on
16 - Shorthand notation for faster writing
17 - Challenge - Activate the color selector
18 - Solution - Activate the color selector

3. Second Project - Directory Browser

19 - Make a plan
20 - Scaffold initial components
21 - Pass component data with props
22 - Build the filters form
23 - Wire up the filters form
24 - Respond to filter form updates
25 - Handle custom filter event
26 - Animating with transition-group
27 - Challenge - Better usability and animation
28 - Solution - Better usability and animation

4. Third Project - Status Updater

29 - Incorporating live data via REST APIs
30 - Inspecting our starting code
31 - First API call in a life cycle method
32 - Adding a loader animation with v-if
33 - Hooking up the form to post an update
34 - Updating message list after posting
35 - Adding a third-party Vue component

Conclusion

36 - Next steps