All language subtitles for 1. Vue Data

In the last lecture, we have handled the remaining components exchange and the pagination in this lecture,

will finally started working with a future related concepts like creative data and will display them.

All right.

Let's start in ah, enough power, let's go to components and not of the view, and let's say I would

like to change here.

You're up for actual application name, which should be extended.

Ariel President And I find that it's located.

You're up.

It's very simple to find it.

Just go to go to just search here and the file in an affidavit to search for your app.

And it's straight away here.

It's this element.

It's holding your up string.

So how can they change it?

I know we can just say, simply write your extranjero next to you.

Yeah, and that's going to be it.

And here's extranjero, you know?

But the first I would like to do instead is get this the value of extranjero string from the variable.

For this, let's go down here and under the template.

You will create your first script that the value of script calls it open.

It actually created this.

You can go over there and you will export default here, object.

That's how you have your writing JavaScript export default object.

And instead of this object to specify your functions or data, your computer that properties or getters

and all of this stuff, you will learn about the later.

OK, but what do I like to initialize?

Here are data some initial data we can work with.

In a few days, you initialize data with your right here specifying her data function.

OK.

Like this and the data function, be an object specified data, specify a return and specify an object.

Your return neglect is so curly brackets.

Here's your object.

You'll specify your object properties.

So, for example, if you would like to define the extent of your call it brand name, so just apply

your brand name and this will hold the value of the exchange.

Are you OK?

Exchange, are you?

I'll get a brand name, and now I would like to provide a variable value into my template.

Need to do in this case, you need to use something called string interpolation, you would like to

use the value from your variable in your template.

You would like to interpolate it what you are going in this case.

Remove the extension of your hardcoded value and to use the variable, you will use a double curly brackets

and anything you will get in the curly brackets will be will be transformed into the value of the variable

you are putting in it.

In this case, the brand name.

OK, so in my template, I can you can access my data, whatever I am returning from a data spread name

I can access here and in the double double curly brackets, I can interpolate the value.

Let's save it.

Go back with refreshing to see seeds working.

So now the only place I need to change this is down here the data.

So if I build this size change the brand name Extranjero Pro.

Savvy, you can see Angelia Pros here.

OK, so that's how this is, how this works.

OK, let's see you something more complicated, what about navigation of navigation at her home, about

a fake, hulking register?

This could be also the part of a data they could be they could be iterated and and displayed displayed

dynamically on our screens.

So what we can do in such a case, go to data and let's value our menu items.

Menu items and menu items will be all of the links we have in that navigation bar home about if a queue

log in and register, so specify, etc. All of this, all these links, all of these items.

And each item will have text which will be displayed, the text in this case will be the name of the

item itself.

So in the case of a first item, it can be, for example, a home.

And a link that will be pointing to there'll be a link, but the link will be not handling yet legacy

as it is.

Let's use it like this.

OK, we have a how many items we have.

We have five items, right?

One, two, three, four or five.

So.

Menu item home menu item about menu item.

A fake new menu item.

Log in a menu item register.

Let's start simple.

Let's start to just be the displaying menu item somewhere in our template.

Let's start, let's say, under the head that I would like to display this this menu item.

So I'll do the same thing as with our brand name.

Under the head, there are broccoli brackets.

Elevate their menu items, let's say it.

Let's go back to your coat, and here it is.

Here are your menu items.

OK, so you can see here text home, text about a secure text, log in and text the register.

They are all here.

Maybe you are wondering why they are above by there and there.

That's the way how actually has specifically specified styling.

So I guess if you want to provide A. Just get it provided under the enough bar.

Maybe now going out there somewhere invisibly hidden.

Yeah, you can see they are transparent, but they are definitely here.

But I will when I'm.

Got it wasn't the best idea to display them under this them as they are before, OK?

It doesn't matter that they are displayed wrongly above.

They don't want to use them.

I just want to show you that we can get this data on the screen.

You can see we have five items and each of this item holding a text properly with the particular text,

which is the name of the menu item.

OK, I guess that should be enough for this lecture.

Now, you know how to specify data and how to use them in your template.

But I would like to show you in the next lecture is how you can get.

How can you iterate through this data so how you can create sample for loop, etc. data and the enter

dynamic content of your link?

So I don't need to specify everything manually.

OK, so let's finish it up here, and I will say the next lecture.

Cheers.