Overview
-
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.
Syllabus
-
Introduction
- Get started with the popular Vue JavaScript framework
- What you should know
- Working with the exercise files
- What is Vue and what is it good for?
- Vue concepts and jargon
- Vue tools
- Installing the Vue devtools
- 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
- 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
- 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
- Next steps
