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.
Adding data to our component - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Adding data to our component
- [Instructor] In this video, we're going to start populating our Vue instance with real data and incorporating it into the template. The way we're going to make this work is by copying markup straight out of our mockup and making the dynamic parts in the Vue parlance reactive data. So, over here in my editor, I have the mockup file open as well as the index.html and app.js. We can use go to line, Control + G to go down to line 114 which is where most of the action happens here. If I mess over into the gutter, I can collapse everything that appears here in the customizer div and just copy the entire thing like this. When switching over to my index.html file, I can scroll down to the same place on line 114 and just paste over what I had before. I don't need the message anymore and I copied the entire customizer div so there it is. So I have all the little areas where my static image goes, my sizes, color, everything's there. But now I need to use some of my inventory data to populate…
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
-
-
-
-