Hello, and welcome to your first lecture on Vue js. Like we discussed in the last lecture uJs is very flexible, right. So we can use Vue JS to add a small functionality into your existing website, or we can build your whole complete website around Vue js. So before we go further and build a complete website, or web around uJs, we look into how to establish or integrate Vue JS into an existing website. For example, if you already have an HTML website, and you want to add Vue JS onto it, you can do that as so. So now let's open up a folder.

I'm going to create a new directory that says View project. I am going to go into that directory. And inside this directory, I'm going to open up Visual Studio code. So if you don't know Visual Studio code is a code editor. So you can use Sublime Text or atom so these are some other code editors that you can use to write and edit code. So we are in the directory.

What I can do is I can create a new index dot HTML file is before We go any further, you might want to install the polling plugins. Instead, with the Studio code, you have this kind of like a small option for extensions inside extensions, I want you to install the live server extension, this one is by Rick de, if you can install this, what it will do is it will kind of run like a small local server in your system. So whatever the changes, you're doing it in code, you can automatically see them on your website without having to refresh your website every every now and then. Alright, so that's one handy extension. You don't have to install it. It's not It's not something compulsory, but it's a handy tool to have.

All right. So in our index dot HTML, let's have the template up. So we can have the template by saying the exclamation mark and tab. So this will get the small template. So before we get into Vue js, let's look at a small example. Right?

Let's say I have an h1 tag, and I won't pass the name. So now we can run this website or we can run this. It's also in this view course. Lecture one Now, what I can do is I can run this by right clicking, and I'll get an option saying open with live server. And if I click it, it should open up in Chrome. Yes.

So now we can see name here, right? I'll just zoom it up. Alright. So now, for example, let's say I want to change the content of this h1 tag, right? I don't want to have name inside it. So what I'll do is I'll add a script file script that says, has a source of protests and has and since we don't have a project, we are going to create a.js.

What I can do is I can give the hedge fund ID and I can say name. And I can save it. And instead of app.js, what I can do is I can say document dot get element by ID. I can say name, dot inner HTML, and I can change the name to my actually. So if I save it and go back, I'll get my actual name. Right.

So this is something how you do in plain JavaScript or in vanilla JavaScript. Alright, so now that is the plain JavaScript or the vanilla JavaScript way of doing things right. Now let's see how we can implement this same thing with view. So first thing, what we are going to do is we are going to bring Vue JS CDN into our application or into our website. If you don't know what a CDN is, it usually means a content delivery network. A content delivery network sounds complex, but trust me, it's not.

It's very, very simple. We can go to the bjs.org official website, and we can copy this link. So we can take the script link, and we can come back and we can just paste it below or above our script tag. And with that, we have implemented view on to our website that said, Now we need to know how to use it. So instead of the hedge fund, let's create a div that says main and inside the div, let's have the h1 Let's leave it blank for now. And instead remain inside of the app dot j s, what we need to do is we need to create a new view instance that we can do by saying new view.

And inside that it accepts an object and that object consists of multiple properties. So the first main important property which we need to know about Eazy E l, e, l stands for element, right. So basically what we are doing is we are binding this view instance to a div. So, in our case, we want to bind it to this div with a class of main. So, usually for class, we're going to say dot main, but if we have an ID of main, we would say hash mean, but since we have class, we're going to go with.so dot L is the first property of this view instance. And the next property would be the data property.

So the data property is kind of like the property which holds in all the variables. So these variables are reactive in nature, right. So what is essentially means is that so these variables when using the template, observe the changes within the template. So, if there are any changes with respect to these variables, these variables update themselves, we don't have to specifically attach any event listeners to them, they update themselves. Hence, these are called as reactive variables. And all these variables are declared inside the data properties.

So, the first variable which we are going to declare inside the data property is name and that will contain so it will consist of my name, so, you need to understand in view that most of the things are in object format. So, you need to get used to it, but as you go through you will automatically get used to it. So, see how all the variables are declared like this. So, if I save it, now, I can use this variable name or the data property name inside our HTML. Now, keep in mind that this variables, I mean, all the all the properties that were declared inside this instance, will work only under this div whatever the element The view is attached to, so, If I go in and insert the main, I can see name. So this is called as interpolation syntax.

So when you do this, what happens is that a view essentially looks for a data property name. And inside a view instance, we have added a property called last name, and hence, it substitutes the value of this name on to this. So, if I save it and go back, we should see my name and we can change it just so we can understand it's coming from the view instance. All right. So, now let's look at what happens if I try to use the data property outside the div. Right, we'll have another h1 we'll say the same thing and lose the name.

If I save it. I'm going to get the curly braces as well. Because view is not bound with this element. It's only bound with the elements under this div. That is the reason why view needs to have a root div. In the upcoming lectures, you'll see that view needs to have a specific We could do that can bind itself to.

And under the road day, whatever elements are there, it will work on those. So just to recap what we did, let's create another view instance. So in this case, what we'll do is we'll create a div with an ID of new main. And inside the ID, let's say h1. Let's say my name is. And what we'll do is instead of ab.js, we'll create a new view instance again.

So notice that we can create multiple view instances for multiple divs. We can say element again. And this time we're going to use hash. Because we have an ID, Id inside this we're going to declare two data properties. We say first name, and last name. All right.

So if I save it and go back, I can use it to names I can see First Name, I can give a small space I can see last name. So if I save it and go back, my name is from Shri Krishna. So that is more electron view instance and how data properties work. So in the next lecture we will look into views the Li I'll see you in the next one.