From the course: Vue.js 2 for Web Designers
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Scaffold initial components - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Scaffold initial components
- [Instructor] In this video we're going to create our first honest to goodness view components using views component method and get them rendered on the page. So here's our mock-up again. And this is our index.html file which has nothing in it. So we're going to create some components for where the filter form and the list of people are going to go. So over here in my editor, the script file we're going to be working with is directory.js. I'm going to create my instance first. We'll call this a directory and this will be a new view just like we did before. Here's my configuration object. And we need to know where to place this. We'll set that in just a second. And we're going to add some data to it. Well out of our chapter three data file. This is going to be window.lmdirectory.people. So I'll just call this people. Like so. Now over here in index.html I'm going to jump down to line 115 cause that's where I've set up the element where our view is going to be rendered. So this is…
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
-
-
-
-
-
Make a plan2m 26s
-
(Locked)
Scaffold initial components5m 18s
-
(Locked)
Pass component data with props6m 4s
-
(Locked)
Build the filters form5m 13s
-
(Locked)
Wire up the filters form4m
-
(Locked)
Respond to filter form updates3m 7s
-
(Locked)
Handle custom filter event3m 29s
-
(Locked)
Animating with transition-group6m 28s
-
(Locked)
Challenge: Better usability and animation1m 30s
-
(Locked)
Solution: Better usability and animation1m 39s
-
-
-