Original subtitles

So, now before we dive

into our first practice

of those key features you learned about.

It's all the time for our first brief summary

of what we learned.

And we mostly learned about how to create Vue apps

and how to connect them to HTML code with mount.

That you should use some unique CSS selector here,

like here the ID selector because every Vue app

can only be connected to one HTML element.

And you also see already that

if you control an element with Vue,

like here, where we are controlling this section with Vue.

You automatically also control all child elements,

but not any elements outside

of this Vue controlled section in this case.

So one Vue app can control one part in the HTML code,

but it then automatically controls

all child elements as well.

Well, and in this Vue controlled HTML code,

you can use special features.

Like this interpolation syntax with the double curly braces

or this binding syntax, this binding directive

with v-bind or v-html, as you also saw before.

These are features which are available

in that Vue controlled HTML code.

Now you can output data in there,

Therefore this interpolation, and this binding syntax

is also summarized under the term data binding.

Because we're binding data,

which be managed in our Vue app to the HTML code,

either with the interpolation

or with the v-bind directive syntax.

And that's the important thing.

You pass an object to your Vue app,

which you create with createApp.

And this object configures this app.

You can set various options for example,

the data option or the methods option.

Obviously we're going to learn about

other options for the course.

But these are two super important options

which you will probably meet in any app you're building.

The data option takes a function,

therefore you can write it like this.

Which should return an object full of data.

Which will then be available

in your Vue controlled HTML code, like vueLink here,

and which can also be accessed

from inside your other parts of the Vue app.

Like the methods with the this keyword.

Methods are also important.

These are functions which you can call

from inside your Vue controlled HTML code, for example.

And that's what you'll learn about this far.

Now, therefore, when we work with a framework like Vue,

we typically say that we use a declarative approach

or that Vue uses a declarative approach.

And that's just a fancy way of saying we,

as a developer define the goal.

We define a template, you could say,

of the content we wanna have.

We mark the parts which are dynamic like this one,

or like this href attribute here,

which is bound with v-bind,

and Vue will then do the rest for us.

It does all the magic behind the scenes.

It outputs concrete values here and here.

And it updates the real DOM.

Which is rendered to the screen and what the user sees

behind the scenes on our behalf.

So we, as a developer just define the final picture

with the dynamic placeholders you could say,

and we don't define all the steps

of getting that picture onto the screen.

That's what we do with a framework like Vue.

And that's why we also typically say

that Vue uses a declarative approach.

We just declare our goal.

We don't care about the steps of getting there.

Now it's time to practice this.