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.
Installing Vue on an existing site - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Installing Vue on an existing site
- [Instructor] In this video we're going to install Vue on an existing site and create our first instance. Here's a product page from H+ Sports, one of the fictitious brands we use in courses. This page features some sneakers and we're going to use Vue to build a simple interactive customizer where you can choose size and color and see the product image change. This is the mockup, let's look at the actual starting point, which is index.html. Here it is with all the stuff stripped out. So what we need to do first is get Vue running on this page and just make sure that it works. Over here in my code editor, I'm going to put the Vue script tag at the bottom of the page. So we're going to use command, down arrow, to jump all the way down to the bottom where all the script tags should go. Then we're going to use the scripts-snoppet.html file that I've included with the exercise files to save us a little effort. Going to select everything that's in here, with command-A, and I'll copy, and…
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
-
-
-
-