From the course: Vue.js 2 for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Identifying components and data - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Identifying components and data
- [Instructor] In this video we're going to step back a little and look at the mock-up of what we're trying to build, see what data we have, and what components we'll need. By the way I've included mock-ups for all these projects because it's common in my experience at least to start with HTML that I or someone else has created that gets you some of the way there in terms of interactivity using vanilla JavaScript, jQuery or whatever. Then I take out the bigger toolbox to finish it up. Adhering to the HTML and CSS from a mock-up can really help you get the work done faster. So anyway, this mock-up has a sneaker image right here, a size selector and a color selector. Changing the color changes the image and that's really all the interactivity we have right now. Thinking of this in terms of components, each of these objects could be a component. Shoe image, size selector, color selector. Okay, what about the data? Well we have the available sizes that appear in this pop up menu right…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Installing Vue on an existing site2m 33s
-
Creating an instance from the mock-up3m 30s
-
Identifying components and data2m 54s
-
Adding data to our component3m 52s
-
Using a model to begin interactivity3m 24s
-
Using v-bind to update classes3m 34s
-
Simple templates with computed properties2m 51s
-
Listen for an event with v-on4m 3s
-
Shorthand notation for faster writing1m 44s
-
Challenge: Activate the color selector1m 9s
-
Solution: Activate the color selector2m 4s
-
-
-
-