Creating Vue Instances

ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/

TRANSCRIPT

Well what's up everyone? Welcome to Part Two in our Vue.js tutorial series. Here we're going to be covering Vue instances. We're gonna learn about what they are and how to use them effectively to interact with HTML elements. So what is a Vue instance? This is a way to attach Vue functionality to an HTML element. So this kind of allows for fine control over specific parts of a page. One of the main benefits to using Vue.js is that you can kind of, piece by piece, build up the page and attach specific functionality to each of those components. That means you're not trying to control the whole page, you're actually just controlling one part of the page at the time. Well by attaching Vue functionality to each individual HTML element or each component of the page, you can get a fine control over what goes on there. So the idea here stems from the MVVM design pattern, if you have an familiarity with that, essentially the model Vue, Vue model design pattern kind of brings an almost object-oriented approach to JavaScript programming. So essentially what we do is we attach the HTML element after we, of course, create the Vue instance. We parse in data, functions, lifecycle events, et cetera to the Vue element, or Vue instance, rather and then that communicates directly with the HTML element. What we need to do is attach an id. So here we're gonna start by creating an HTML element. It will just be a simple div, we're not building anything fancy here. We're then gonna create our Vue instance and we're going to essentially attach the two. So we won't worry about populating the Vue instance with data or using that data at all. Here we're just basically performing the basic setup. So let's head on over to our code, if you remember, this is where we left off last time. I am also going to start a new window here, okay. And this is just to ensure that when I go to run my file I can just kind of run it and it will display here. So what I'm going to do in the body is just start off with a basic div, pretty simple stuff. For now it can just say, Hello, world! We'll put the classic there. And if we go to actually run this, we make sure we save it, so it's just a command S to save, we can go to save here. Windows I think is control S, instead of command S. We're gonna go back to Chrome, or actually we're going to go to Finder. We're just going to run this index.html and this is essentially all it is, just says hello world. Cool stuff, so let's go back to our text editer. Okay, so it's a good idea when we're using Vue.js to be specific about each file text. For example, if I am managing some text here, I might want to put this in a span element or in a paragr ... https://www.youtube.com/watch?v=5LPvf2BF7-k