Three Practical Examples to Learn Vue.js

2.1 Basic Structure

The first example is going to be very, very simple. And it's also going to be completely useless. Because I don't want to throw you into the deep end of the pool just yet. I will do that in the next [LAUGH] lesson. So in this lesson, we're going to do something that, it's useful if you need to prototype something very quickly, and it's also very simple. Otherwise, this particular approach for using Vue isn't something that we would do for writing complete applications. Primarily just because there are better ways to go about it, which is what you will learn to in the next lesson. So we just need an HTML file. I'm gonna call this index.html. We need some markup so that we have a boilerplate there. And I'm going to go ahead and reference the Vue framework with a CDN so that we will be importing that framework so that we can use it. This has a class called Vue. And we will simply create a new Vue object, and we will tell it what to render. Now that is the term that we use. We have a template that we define using HTML. And then we have JavaScript that defines the logic. And Vue is going to take those two things together and render interactive HTML. So the first thing we need to do is have some place within our HTML document that Vue will put the rendered result. So basically, all we need is just a div element with an ID. I mean, it doesn't have to be an id, but an id is the easiest way of finding an element within the document. So I'm going to give this div element an id of app. And then we are going to add a script element. And we are going to new up the Vue constructor. And we're going to pass an object to the constructor. And this will have a property called el, E-L, short for element. And this is going to be the HTML element that we want to Vue to display our rendered component. So that is this div element with an id of app. Now we can do one of two things. We can retrieve that element object using normal DOM methods, or we can just supply the selector and Vue will do the rest. So let's take that approach, because that's very simple. So we will just say take the element with an id of app and then put our rendered stuff there. So the next thing that we need is a template. And we can define a template in a variety of different ways. We could do so through JavaScript, however, I don't particularly like that approach because that means that we have to concatenate and all of that stuff. And I don't like defining HTML inside of JavaScript. Another option is to just define our templates inside of our div element with an id of app, so that we basically have something like this. We would have an h2 element, and let's have a title here. So, Hello, Vue.js. And then let's have some content. And it really doesn't matter what the content is, but let's put this in a p element. And we'll just say that this is some content. And then we are just going to run this. Now, because we aren't making any AJAX requests or anything like that, we can actually run this by just double-clicking on the icon. So I'm going to open up the folder explorer, double-click, and we are going to see our little Vue application. Because, really, even though it is that simple, we have a Vue application. Now, you might think, well, yeah, duh, of course, this is what we're going to see, especially because we defined that HTML right inside of our template. And, yeah, but remember I said that this is going to be completely useless. Because we are essentially going to do the same thing in the next lesson, but we are going to do so using what's called a single file component. It's where our markup or our templates and our JavaScripts are in a single file, completely separate from our HTML file, and using tools like Babel and Webpack, it's going to compile our code. Vue is going to render it, and then it's going to inject it into our HTML. And we will look at that in the next lesson.