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.
Creating an instance from the mock-up - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Creating an instance from the mock-up
- [Narrator] In this video we are going to create our first vue instance to confirm that everything is working properly. We need a little bit of html bar from the mock-up and a little bit of java script to do this. So once again, here's my index.html where all the stuff is going to go. Of course we have nothing. So what I'm going to do is borrow a little mark-up from the mock-up. So we can use our original styles as much as possible without having to alter anything to make it look right. So over here in my editor, visual studio code, going to open up my mock-up file and I'm going to use the "go to line" command, which is ctrl + g by default. And I'm going to jump down to line 114. I just happen to know that that's where I need to go. And I've inserted a little spot here where the vue components will go. Note that this is a div with the id "vue-root". But the mock-up itself, all the static html is in a div with the class customizer. So we'll just remember that and go over to our…
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
-
-
-
-