This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Vue.js Code Demo" Lesson
>> Kevin Whinnery: So rather than tell you about it, I thought I would write a little code to kind of demonstrate some of the key features of the framework that we're already taking advantage of in the TODO application in kind of a smaller chunk. I'll drop the JS fiddle here into the chat after we get through things here.
[00:00:26] But I'm going to write a little bit of code here in this fiddle. I'm loading in View from NPMCDN.com which is actually a nifty tool for loading in NPM modules into your In your front end code, especially in situations like this where you're whipping up a fiddle. In any case this is all I've started off with here is having View loaded in the global window scope.
[00:00:56] And then I've got a HTML element that I'm gonna essentially buy my view component too. I'm gonna create a new view and what I'm gonna endeavor to do is to create a Todo list interface which will show up in the lower right hand corner of the screen over here.
[00:01:18] When I create a component, a view component, I'm going to bind it to an individual element. And here I pass in a selector for that component element. And the first thing I'm probably gonna want for my View is some kind of input like a text field input that's going to, it's gonna be the place where I actually type in my TODO list item.
[00:01:45] And then I'll have a button. I'll make this a little bigger. I'll have a button that you'll click to actually add the TODO item.
>> Kevin Whinnery: And then I'll probably have a list here of all the items on my TODO list. If I reload the page I've got my user interface but it doesn't actually do anything just yet.
[00:02:15] The first bit that I'm gonna do is declare a data attribute of my View component. This data attribute when you declare it upfront like this basically allows a view to monitor these properties of this data object. If you make any changes to the properties of this object, those will update any user interface elements.
[00:02:41] They're bound to those attributes. In this case, I'm gonna create a data element for need TODO's. And maybe I'll seed it with one to do list item like get the milk or something like that. So I've got whoops, that's not what I wanted. I wanted that. I've got a View component with some basic data in it.
[00:03:11] And now I need to render that out to my user interface here. The way in which you do that in View is with an HTML directive, which most of which for ViewJS are prefixed with a [INAUDIBLE]. And there's a directive called Vfor which will loop over an array within your data model and output some template based on that.
[00:03:40] For TODO in the TODO's which is this element of my data object down here I'm gonna render a list item. And then gonna use the double mustaches to output some data from my model And then going just output to do.text. And when I read that I now get my list updating.
[00:04:07] Now I need to wire up my user interface here such that I can enter a new to do list item click the button. And something's going to happen. So for that I'm gonna do a couple of things. I'm going to bind the value of the input field to a property of my of my underlying data model.
[00:04:27] And the way that I do that in view is with this V model directive. And I'm gonna say that I want to bind the value of this input field with a model field called newTodo, which doesn't yet exist. I'm going to come down here and add that to my data model.
[00:04:50] And I'll initialize that to just be an empty string. And then, to actually make it such that I can add newTodo items, I gotta have, I have to make this button do something as well. There's also a directive for that for binding event handlers on your HTML and that directive is called V-on.
[00:05:14] And then you after a colon you can pass in the name of a that you're interested in bindings. So V-on click, is going to be a model object or a model method that we haven't defined yet. I will just call. Now we need to go down here back to our component in addition to tracking the element and the data associated with it.
[00:05:40] We're gonna create some methods on our object. And we're gonna create one called ADD. And what that ADD function is gonna do. It's going to push a new item into our list of TODO's. So in this case, the text is going to be the current value of this.newTodo.
[00:06:09] We're gonna add that to our list of TODO's. And then we'll also blank out our new TODO item, setting that back to a blank string.
>> Kevin Whinnery: So if I run that I should be able to come over here and say new to do item and click Enter. And it looks like by and large, my little TODO list is working.
[00:06:37] So, again what I think is really neat about this is with what is a very small amount of code, and not having to change how I render my page very much, I get this really powerful data binding mechanism and event handling in this component, which is pretty much completely decoupled from my HTML markup.
[00:07:03] There's a lot more that View can do. For the exercise that I'm about to turn you loose on, you're gonna want to definitely check out View's excellent guide which kind of takes you through a lot of the core concepts you're going to need to learn get up to speed I'm developing with you.
[00:08:00] So I think View is a nice combination of features and weight. But these other frameworks up here are also awesome. React is taking over the world. React Native is a really cool project especially. Ember does a lot of things really well. Backbone, it was my previous go to for a lighter weight MVC type thing.
[00:08:24] So all of these, totally awesome. You should use them if you like them, if it makes you happy.