Vue.js for Web Designers

Add Vue.js to your web design toolbox. Learn how to use Vue in three real-world example projects: a product customizer, a directory, and a status board app.

Introduction

• Get started with the popular Vue JavaScript framework
• What you should know
• Working with the exercise files

1. Introducing Vue

• What is Vue and what is it good for?
• Vue concepts and jargon
• Vue tools
• Installing the Vue devtools

2. First Project: Customizer

• Installing Vue on an existing site
• Creating an instance from the mock-up
• Identifying components and data
• Adding data to our component
• Using a model to begin interactivity
• Using v-bind to update classes
• Simple templates with computed properties
• Listen for an event with v-on
• Shorthand notation for faster writing
• Challenge: Activate the color selector
• Solution: Activate the color selector

3. Second Project: Directory Browser

• Make a plan
• Scaffold initial components
• Pass component data with props
• Build the filters form
• Wire up the filters form
• Respond to filter form updates
• Handle custom filter event
• Animating with transition-group
• Challenge: Better usability and animation
• Solution: Better usability and animation

4. Third Project: Status Updater

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

Conclusion

• Next steps