All language subtitles for 1. Vue JS concepts

There, guys in Dallas, like Joe, we have fixed our pages where the text was not visible in this lecture

and we'd like to go through some of the hugest concepts.

OK, so this will be not related to our current application about just the general view, just concepts.

OK, let's begin.

And let's create a simple counter.

OK, so accountability people seven zero from a click of a button, the counter increased to one two,

three four or five six seven and so on.

OK, let's handle it in our home page, let's go to our home and the view and simply in a date as we

are returning this data after action exchanges or before exchanges, let's simply what I account and

it'll be there.

Let's start at the 10.

Let's say it doesn't really matter.

You know how to display it, so let's go up here and their exchange list here.

Let's display this data because this play here, Dave.

Simple, Dave.

Dave like this.

And instead of this feel, this play the value, OK?

The curly brackets.

And to get a data here to slide here, I'll.

OK, you could say it was a go to a browser to see it in the home page, so counties here are 10.

OK, maybe it's not advisable, I will just right here.

So Margene, in the interview is actually not the judge of your jazz in a bull market would say in a

bulma expose some classes and these classes can manipulate the margins, and they're very easy to to

provide because they're called like this MLA, which mean margin left and you can have a margin of left

one two, three three four six and so on.

And the margin left six o'clock creates a nice margin on there on the left side.

OK.

So now what you can see is a little bit of margin to the left side is valued and I will assume it,

and so you can see the value trend here.

OK.

Or simply, if it's not visible enough for you, we can create our custom class.

This class is from Bulma.

You can you can have these glasses available to you, for example, margin botto, margin top and so

on their helper classes just to just to modify the margins.

We can create our custom class, let's say, counter container.

OK, so it's more visible for you to look at accounting counter container.

Let's go down to the stylings.

What about your style?

All right, and attracted zero counter content, and let's say here putting off 200 pixels and what

about your phone size of 30 pixels?

So it's visible?

So can I see it here, even though maybe bigger phone, let's say.

Sixty pixels.

So that was visible for a right, so here is a 10.

OK, they are they are writing.

They are getting our value 10, but let's try to increment it.

Let's try to increase its value.

So what they are going to do the aggregate, we will get a bottom because all on buttons they can click.

First, I will indented it to the right side because it should be like this.

And instead of this diff, I will create that simple button, let's say under here.

Get a button like this.

Battle in the battle over the tax increment increment.

All right, and we'll have some classes.

So stout nicely, I'll ride here, but then there is the primary, and that's enough.

If you are wondering how I know all of his classes just from top of my head, just simply, I don't

know them.

I just need to search bull, my dogs battle, for example.

OK, and you will find all you need here, all documentation or so here is as examples how to create

the buttons or the glasses you need to provide and so on.

And also from this documentation, I knew that margin left that six bill creates a margin on the left

side, some margin Dash six, you can find all the classes, all the components, elements you need

here.

Just yeah, just take a look at this.

OK, that's going to be that example, and it will look like an increment here, we would like to increment

this value.

The village is in, this is super super.

I would really like to do much.

Well, we can just do here.

I will show you how for us, how we can react to the button.

Oh, just write it on the new lines here, bill right here.

We honor.

This is a vote on binding, all right, there's a directive and we can directly can the RV that click

like this?

And let's right here like this and probably your faction for now does a vote either console.log?

Hi, there.

OK, on site, there should be single quotes, by the way, because they are dropping in the double

quotes here, so you can see here in distractive ian and the they can provide a function so they can

write here JavaScript expressions.

OK, so now we can save it.

You can go back here and every time I click on the.

They increment you should see here.

Oh, actually, I cannot act as a con. Look my mistake, I gave that to the console.log in this case

in this function here.

So I I'll do it differently.

I will serve it immediately.

I will show the other concept of of a future as you can.

After the data.

You can write a comma and you can probably hear methods like this in the methods, you can create a

methods you can call from inside of your code and also from inside of your templates, for example,

a display, display, lock or lock date that is a lock function.

I look at the lock function it can be.

It can have any name, of course.

And here I go by the console.log console.log.

Hello world, hello world.

And I will get this lock function and a sample provided here.

Go up here.

And let's get here the of instead of the console.log, what about your look?

OK.

Not, Villa, click here on the bottom of executed look functions from.

From efforts which will be Helloworld, let's say it.

Refresh increment and you can see Helloworld World.

OK, what I am, but I think also here.

Loki, I'm basically wrapping here function in the function, so to click I am passing the function,

which is executing the look, but we can pass here just a simple the reference of the look to the on

the click OK to just reference the look functions and a click will execute it.

OK, so say the same thing, Helloworld, the other simplification would be that would be donate to

right here completely on every time because it is a very common directive.

They can just emit amid this and you can buy here at site and then click that you have usually you'll

see it gets a click the log and I can execute this.

But what they want to do in our case, they would like to increase the count here.

So what we are going to do instead of calling here are, look, our prior function.

That bill that acts as they are this count, and it will increment it plus plus.

OK.

So let's save it.

Let's go back to browser refresh and let's increment and you can see with ease so we can really no income

and no, and this is handled for us.

OK, so this dining dynamic updating this reactive functionality is handled by the viajes.

So simply just by clicking on the button and incrementing the data itself, you are also updating their

view and that's that's really amazing.

You're the early science in this sphere, OK, so we can really increment here.

And by the way, in a template, you can access this, but it's a little bit redundant.

You don't need to write this, it's automatically done for you.

So as a bit of your jazz, you can make a lot of simplifications.

One of them is you don't really access here at this.

But it will be nicer to have it to provide it.

It will be to simplify that separate income faction, so have a look here and we would have increment

function better to access this account and the increment it in the context of adjusted the need to access

this only in the context of our template we don't need and simply here on the click Albatross Passenger

Increment to increment the number.

OK, increment.

OK, that's going to be it for this lecture, just to recapitulate guys I'm using here is on board my

classes, but my class says you can you can see on a board my documentation, so go ahead.

Open up my documentation and find the elements, components, classes you can use.

And yeah, try them out, such as buttons.

Then we have learnt that we can react with that bit.

They can react with the elements.

We have these directives that are that are reacting to the changes of the elements, such as click events

and other events as you'll ever learn later.

In this case, they are using at site and the click because the directive would be on, but the need

to apply the vision which has value added sign and the click and you can see you have a lot of them

here available already.

So whenever I click on the button, increment function is executed.

Remember always when you're when you're passing here, it passes the reference of the function or when

you want to provide the data to the function pass.

Drop it in the arrow function and then parsing of some data you need.

So in this case, need to do it to that, if any questions.

So this is very important to ask here.

So you understand everything.

Don't forget also about the methods of anyone to call up and you want to call some.

If I want to create some functionality, you want to call from template or from inside of your script,

you need to get it into their methods.

There's a simple JavaScript function, as you can see here, guys.

It's going to be from this lecture.

Ask if anything is not clear.

And let's continue next one.

Cheers.