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.
Using a model to begin interactivity - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Using a model to begin interactivity
- [Instructor] In this video we're going to bind a form element to some viewed data and watch it stay updated automatically. In View, form elements, in an instance are expected to get their values from View. That is, your JavaScript data is the source of truth, not whatever is in the DOM, once set up correctly, View keeps the DOM up to date for you automatically with however your data changes, this is like controlled forms in React, if you've ever used those. We're going to add the selected size to our viewed data and get it updating on the page. So, right now, of course, the initial selection is whatever the first size is in the Select box. So, we're going to change it to something else. Switching over to my editor, I'm going to add selected size to the data, I'm just going to do this so we don't see the word size this small over and over again, so selected size and I'll make it size nine and I'll save that. Now, back over here in my template, I need to tell the Select box that it…
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
-
-
-
-