The Vue Instance

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 232,135 students

Learn more from the full course

Vue JS 2.0 - Mastering Web Apps

Create the VueJS 2.0 apps you always wanted. Build 5 apps, learn development secrets, VueRouter, Vuex, & more!

04:24:43 of on-demand video • Updated December 2017

  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.
English [Auto] Let's now jump into view and create our first example of some View Code. First off make sure you're in a folder for creating your view projects. You can call this directory view view to Tauriel or anything that you like. Now open that folder in your preferred code editor which for me is at them within that folder. We're going to create a simple index dot h T.M.. So a new file index dot h Tiano. First off let's quickly overview T.M. or HyperText Markup Language H.E. mill is the language that creates a structure for every web page that you see. It divides a page into sections so header's the title the body footers and divs to represent intersections of the Ashima. The sections are marked by parts of Ishmail tags with matching arrows signs. All right. Let's get some H.E. e-mail up and running. So first give a special HMO tag which it tells the browser what kind of document they're working with. Then we have our first true e-mail tag which we each e-mail slash HMO nother slash. Always comes in second in the pair of each female tags so that we you have a beginning tag and an ending tag. Next we'll have head element have matching slash head and then abody element slash body within the hash tag we'll have a title which will just be View app for now. Great. Now we're going to include a very special script tag which loads view onto our entire application. So first we have a script and now we're going to give this tag an attribute which we do actually within the tag. So I would say the source is HGT P.S. slash slash you N.P. K.G. or unpackaged dot com slash view by including this script right here with the source tag we're importing view onto our entire web page so that we any javascript code that we now write can take advantage of you could. Let's put that theory into action. Make a div within your body with an id attribute of that. So to say does it has an ID attribute of app. Now right after it let's create another pair of script tags and start writing some new code within the script first off declare a variable called at will sign it to what is called a view. In essence the new instance uses the new keyword and then view fall by a set of parentheses. The view since then accepts an object with any of the options for features that we'd like our view instance use. It's called a view instance because we're directly calling this new view construct. All right. Now specify the options object. Now the elmet we want to target is the one with the ID of app.. So first put a set of curly braces within here that will see the element we want is one with the ID of AB which we target with a pound sign. The data that we want to get this instance will also be an object with a pair of curly braces and the text we want our element to have will be hello world which is a longstanding tradition for any first language or coding framework to say hello world with the first application. Now this code turns our div with the idea of app into an element with view functionality which is awesome and now has access to that texturing we declared in the data object of view it says right here. Access it now with the muchacha interpellation syntax which just looks like a pair of double curly braces. So within our app we have a pair of double curly braces. We must say let's insert the text. So whatever that text string it's all right let's save this and now open it up. So go ahead and navigate to your finder or wherever you can find the file and then go ahead and click on index that each email and it will launch right in your browser. And there we go we got. Hello world. Allow me to zoom in just so you can see better. Awesome. So let me go ahead resize it so that we we have our code. Next we're at. Now if I make a change next to the index are now. I say text is text I save and reload in order to see that change. Now that isn't too bad but there is a more convenient option. Viewin saw Adam there's a package called Adam live server which is really convenient by using Adam live server. I can open this index that each document on Eliab port and any changes I make will be automatically updated. Here's what the package looks like. And allow me to demonstrate. So here going to go to my settings go to package's a look up at a live server and there we go. This is the one that you want sit down and exchange him out. I can go to my packages I can get a live server and they start on port three thousand in we go we have our text Hello World shown up. Let me zoom in again but if I make a change and I say boom it automatically updates without me having to do a refresh. Very cool. One last change was at a CSSA file from online that would just make this application component look a little prettier and easier on the eyes. As we develop it's really simple read up to the script for loading view will load another online file. But the styling we need. So this one's a little different. We'll have a link with our rel tag of stylesheet and an eighth ref of HTP so I Szasz David Ni-Cads dot com. Slash public underscores says slash view Dotsie SS Now I went ahead and loaded this library on my Web site online so that way we could quickly just dial up the app. So I'm going to go ahead save. And there we go. We see our new styling looking nice and pretty. Now it's your choice to create your own index file for now and abseiling as you wish. But if you don't want to do that just yet. Not to worry because we'll cover CSSA thoroughly in later example applications of the course. All right. With that covered we got the first step in view the view instance. Let's move on to learning more.