During the first part of the course you will be doing code challenges after each lecture, and during the second part of the course, you will be building an application alongside us.
We have created a cheat sheet for quick syntax lookups
You should each have two stickies for use during the day. When needed just stick them to the top of your laptop.
✅ Green Sticky means I’m done with the exercises. We’ll use this to know when almost everyone is done, and we can begin the next lesson.
🛑 Pink means I’m having a little trouble or I have a question, and would like some assistance from an instructor. You can also just wave us over if we’re nearby. This becomes useful when we’re working with someone else or are momentarily distracted, so you don’t have to raise your hand and wait until we notice you.
Intro to Vue
In this part of the course, we build the simplest app to get our hands dirty with some of the most exciting syntax.
The Vue Instance
Challenge
Add a description key to our existing data object with the value“A pair of warm, fuzzy socks”. Then display description using an expression in a p element, underneath the h1.
Add a url property to your data object with the value of https://www.vuemastery.com, and use v-bind to sync it up with an anchor tag you create in your HTML. Hint: you’ll be binding to the href attribute.
Bind the out-of-stock class to the“In Stock” p tag so that this class gets added only when inStock is false. It should put a line through the“In Stock” words when inStock is false.
Intro to Vue