Vue is "the progressive framework" for building user interfaces. For the last few years, it's been one of the fastest-growing software projects in the world, thanks to its intuitive API, great docs, and first-class tooling. In this hands-on workshop, Hassan Djirdeh, author of Fullstack Vue, shares the Vue philosophy, demonstrates how it helps you solve common UI problems, and teaches how to integrate Vue into your existing apps.
The code examples and slides for this course can be found in this repository: https://github.com/djirdehh/intro-to-vue-workshop
- Instances: The heart of every Vue application
- Data: An option that is an object
- Mustache Syntax
- Directives: A special type of command that can be added to HTML content. The 5 most common directives include v-bind, v-if/v-show, v-for, v-on, and v-model.
Hassan concludes this lesson with a practice exercise on building an "Up Vote" application.
Before moving on, challenge yourself with the Up Vote Excercise explaned by Hassan around 43:40.
- Dynamically render content from the submissions object.
- Render a list of submission elements with the help of the v-for directive.
- Allow the increment of submission votes by clicking the upvote arrow icon.
- BONUS: Conditionally add a blue border (i.e. .blue-border class) around a submission post when a submission reaches 20 votes.
You can use this code as your starting point: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/01-vue-instance-I/exercise/starting-point
When you're done, check the box and move on to the next chapter!