Vue.js – From The Ground Up

welcome to view from scratch in this series we're gonna be taking a look at the JavaScript framework view jas now view jess has become an extremely

popular JavaScript framework because of its ease of use it is very approachable and as you'll see we'll be able to get started with a project very very quickly now if you are coming from the laravel

world then of course you know view Jas as the front end that ships with Lenovo but if not don't worry we're gonna be covering everything from scratch with view JSF

so your go-to source for view Jas of course is view Jas dot org if you visit this website then of course you're gonna get the documentation for view and to do so we're gonna click the get started

button now there are a million ways that you can bring view Jas into a project but for the sake of simplicity I am gonna show you the very easy way to get started with a project and create your

own playground where you can learn all about view in a more advanced topic we will start to cover NPM and having an NPM build but for now again let's keep it very very simple so if you scroll

down here a little bit there are these two boxes right here now view is provided to you through a CDN if you wanted to now if you're not familiar with the CDN all it is is just a hosted

file in somebody's server now the idea behind a CDN is quite good some of these libraries do get quite large so if everybody was to use the same CDN then there's a high probability that your

users already have the library in their cache but for us we're not too concerned with that just yet we really just want to pull in view so this is what you need to have if you have this inside of your

project then of course view will be brought in so let's get started from scratch I'm gonna jump over to my terminal and I'm gonna make a new directory make directory and let's call

it view from scratch all right let's see the interview from scratch and let me open that up in phpstorm now I use phpstorm but you don't have to worry if you don't

have that obviously there are many different editors that you can use vs code is actually a free one and if you're looking for an editor I would probably recommend that you get vs code

but with that being said everything from there on out would be exactly the same I obviously don't have any files in here so let's create a new HTML file and let's just call it index now inside this

index that HTML file let's just start with a title of view from scratch so let's switch back to Chrome and of course we need to bring in the development version of view now the

development version of view will actually have some additional warnings that you need and it will actually help you develop so I recommend that you stick with this version as you're

learning view j/s all right so back here in my body I'm just simply going to paste that script in so now that we have that script in place we need to actually create our view instance and so this

brings us to the very first concept of view so you are going to basically wrap anything that you want view to know about inside a div or some sort of element with a particular ID now all

this means is that anything that's inside of here view is gonna know about so let's go ahead and create a div and the typical way is to have an ID of app and that's

all we need all right so let's go ahead and create our very first view app so inside a script tag we'll just say new view and that is going to be a class that is provided because we are pulling

in view inside of here you're gonna have an object and the very first thing you need to do is tell it about this app so that is called el4 element and then inside of here we just say pound app and

now view knows that this is where it needs to be so like I said view is data-driven so let's give it some data let's say data and this is an object and inside of our data object let's have

a title of my title okay so we have this data we are binding it into this app so let's learn our very first way of outputting data so let's create an h1 and if I wanted to output this text

right here inside my h1 you could use curly bracket curly bracket notation and then just say title now the title here is referring to this key right here so again if I want to put my title inside

of this h1 you would use this curly bracket curly bracket and then the key that belongs to your data okay so let's try this out in the browser now because this is just simple HTML and JavaScript

any browser can basically render this without any compilers or anything like that so all we need to do is open up this index inside the browser so let's go back to Chrome and then let's just

hit file open file and in this window browse through the correct file and just open it up and there we go and so of course the first thing we see is that title is actually not being

rendered and this is actually quite a common thing and what it is is that we are used to putting our scripts down underneath but what happens is when we get to here well this script hasn't

quite loaded so this script actually needs to be at least above our actual view instance that way it actually knows what view is so this hits safe let's go back to Chrome hit refresh and sure

enough now we are working we have our h1 and it has my title inside of course if I change this to my title again hit save hit refresh there it is so we are passing data from our view data object

into one of the elements in our HTML let's go ahead and do another one and see what else we could do how about this what if we had AP tag and I wanted to have some text inside of it all right

let's create some text for our P tag and let's just simply call it maybe content and let's say here my text all right so how do we apply content inside of our P tag of course we

could use our curly brackets and say content and this would work there we go but I do want to show you a different way to actually output this out and it is V - text now this is the first time

that we've encountered one of the V directives but view has a lot of these V - directives and one of them is text so inside text we can say content and this would actually output the exact

same result now one advantage to doing it this way is the fact that you don't have to use these curly brackets and some may argue that this looks a little cleaner in this particular case it

really does not matter at all you can do it in either way alright so what if I need to output a data inside an attribute let's say an h1 had a title attribute and if you're not familiar

with the title attribute all it does is it gives you a little contextual menu let's just type in test here and let me show you what it actually does let me hit refresh and if you hover over that

for just a couple of seconds then you see down there you do get this contextual menu so that's pretty cool but what if I wanted to actually put some view data inside of here well you

can't use curly brackets right that wouldn't work if we did that hit refresh when we hover over it of course that doesn't work so how do we actually do that well it is quite simple we're just

gonna call this menu it's gonna be a new data that doesn't exist yet and what we need to do is say V - bind and then colon so this will bind title to the data menu okay let's explore that let's

add that now menu my menu data here this is refresh and now if we come back here hover over for a few seconds then of course we do get our contextual menu how cool is that

so that's the way that you would be able to bind data into now at first glance this may not seem like we are doing much but as a matter of fact when you actually bind something

like this it is bounded both ways which means that if we actually change the text inside of our data then it would actually change back here now this is not typically how JavaScript works if

you're familiar with jQuery of course you would have to hunt down your element change its value whenever the value of it actually changed but that's not the case with view so in the next episode

we're going to explore a way for us to actually be able to change that value inside this data and see it change outside of this data so stay tuned