First VueJS Code

Laurence Svekis
A free video tutorial from Laurence Svekis
Instructor, GDE, Application Developer
4.3 instructor rating • 368 courses • 683,798 students

Learn more from the full course

Learn Vue 1 JS introduction to simple reactive JavaScript

Starting point introduction to Vuejs and how to use Vuejs to create interactive dynamic content via JavaScript and Vuejs

01:25:45 of on-demand video • Updated November 2019

  • create amazing applications with Vuejs
  • learn about reactive JavaScript and how to use it
  • Starting point for more complex frameworks like AngularJS
English [Auto] This lesson I want to show you really how easy it is to work with a view. So we've got our team over here and this is what's called The View area. So this is our view our age HTL template and this is where all of that interaction is going to go. Not binding from the H Tim L elements into our script tags. So let's create our first variable here so I'm going to just call this as output. And I'm going to go down here. And now we've got our first view content here. But now we need to define some information some data. So the next thing I want to do is set up a data object and I'm going to call. I'm going to open this up and create this as my data. So this is just a regular typical javascript object and it's going to contain some information. And one of the variables that is going to contain are the values paired values that's going to contain is going to be output and output is going to hold a value of hello world and so Next we need to find a way to send this data into our h Mel. And this is where the view model comes in. So it's got a built in functionality where we just set up a brand new view and surrounded bracket curly bracket and within here. So this is the view model and it actually is going to bind that data into the h tim L.. And we need to specify an element. So this is what's going to link from our code into our age him. And we're going to be linking up with that ID that element with the ID of my app. So we just need to specify that this is going to be linking to my app and here is what data we're going to be passing through. And we already have our data set up so I've got my data contained within this object. So that's all we have to do to set that data up and send it through. So let's go take a look and refreshed and we see that when we refresh it we see that output gets rewritten to Hello World. And this is all done through view and with in our dev tools we can see that output has a value of hello world. So we've got some other information here as well. We will open up our source code here. We see that the new value has been overwritten and we've got hello world being contained there. As each team output.