Now to get started with Vue,
I'm back in this front-end project,
which we used in the previous course section.
Though, you also find this project attached again.
So you can simply use the attached project,
and open that in a new VS Code window.
Now you don't need to have a custom API up and running,
because as a first step in index.html,
I'll remove this scripts/todos.js import.
And I'll just keep that todos.js file,
so that we can always reference it,
and see how much easier it will be with Vue.
So, I'll Just keep that file for reference.
At the moment, no file is imported here.
No script file.
And hence of course,
if we open index.html with the life server,
what happens here is that we see our interface,
but nothing happens here if we click these buttons.
We have no JavaScript code that would handle this.
Instead, the form gets submitted,
because that's the browser default.
A request gets sent to a backend, which doesn't handle it.
Hence the page reloads and this page isn't too useful,
therefore. But we will change this with help of Vue.js.
And for this, you should visit "vuejs.org".
Alternatively, you can of course also simply search
for Vue.js and then visit this official webpage.
Now, if you see a banner like this here at the top.
Which you might not.
Then you should click on "click Here"
to view the latest version documentation.
If you don't see the banner,
then you already are on the latest version page.
But if you see it, click there,
and you should be on the documentation page
for the latest version of Vue.js.
Now Vue.js is a big framework with a lot of features,
and that's why I do have a complete huge course on it,
because you can't build an entire course just for debt.
But we can get started in this course here and learn some of
the most important features step by step.
Which will already help us build
more powerful User Interfaces.
And the offer we can click on "Get Started" here,
or go to "Docs" "Guide",
and then to "Installation".
If you clicked on get started,
you should also go to "Installation".
Now, there are different ways
of creating a project that uses Vue.js,
and there are also more advanced ways which allow us
to build more advanced Vue.js apps.
But, I do talk about them in my separate Vue.js course.
A big advantage of Vue is
that you don't need any complex setups to use it,
but that instead, you can simply include it
into your existing webpage,
and start using view features there.
And that's exactly what we will do here.
For this, we want to use this "CDN" approach.
CDN stands for a Content Delivery Network.
And in the end,
it means that we can include this script element
into our page.
And this will load the view framework code
from some other server.
So not from our server, but from some other server.
Alternatively, we can download this code
and simply include it in our page,
and load it from there.
That would be an option as well.
And you can use either approach, but often a CDN is quicker.
Not as long as you are developing locally,
because nothing will beat the speed of your local computer.
A request sent from your local computer
to your local computer is of course extremely fast.
But as soon as you host your website on a server,
on a remote machine, often such a CDN than is quicker,
instead of requests being sent to your server.
That's why I will use this CDN link here.
And I will now include it here below this link element.
I will also add "defer" here to make sure
that it only executes once the rest of this page was parsed.
Now with that added,
I will add another file into scripts folder,
and I'll name it "app.js".
Though the name is totally up to you.
The name doesn't have to be app.js.
In here, I will write my Vue specific code.
And they offer of course,
I'll also include this file here in the index.html file,
after including the Vue package.
The Vue framework code needs to be included first,
so that our code is then able
to leverage this Vue framework code.
So, I'll add another script here
and now the source is scripts/app.js and we also defer this.
But we have to include our own code
after including the Vue framework code,
because we will rely on this Vue framework code.
And now we will do something interesting.
In app.js, we will add a constant,
which we could name "TodosApp"
with a capital starting character,
though that's technically not required.
It's just a convention.
And in this TodosApp constant,
I'll store a JavaScript object,
which is created dynamically on the fly with curly braces.
So it's not based on some class,
it's just a JavaScript object created
with this object literal notation.
In this object, we now add a data method.
Like this.
That's how we can add methods to objects.
We typically added methods to classes,
but we can also directly add them to objects like this
when using the object literal notation.
Now, this is a function connected
to this object named "data".
And it has to be named "data",
because that's a special name Vue will look for.
In data, we want to return something.
And the something which we do return again
is an object, and it has to be an object.
And then this object, I will now add a newTodo key,
which I'll set to a string with a content of Learn Vue.js!.
So that's a simple constant.
Next, we use a Vue object,
which we didn't create ourselves,
but which instead is exposed by this Vue framework code,
which we are loading before our code executes.
And that's why it's so important
that we load it before our code executes.
Because we now use the view object
from this view framework code base,
and on this view object, we can now call "createApp".
That's a method provided by Vue here on this Vue object.
And to createApp, we pass our TodosApp.
So our constant here, which has this shape.
And now on this created app so on the return value
of createApp which turns out to be an object
we call the "mount" method.
And this is now a key method,
which allows us to connect this Vue app,
whatever it might do,
We don't know that yet,
but it allows us to connect this TodosApp
this view managed app here
to a certain part in our User Interface, in our HTML code.
And in this case,
I want to connect it to my main element here,
because I plan on using Vue for working
with that form and that unordered list.
And you want to control a parent element
of the HTML content that you want to manage with the Vue
with help of this mount method here.
So to this mount method, you want to pass a CSS selector,
typically an ID selector,
starting with a hash symbol like todos-app.
The name is up to you though.
Which then has to be an ID that
is assigned somewhere in your HTML code like this.
And the ID should be assigned to an element
that contains all the other elements
with which you want to interact in the future.
And I in the future want to interact with that forum.
And with that unordered list
from inside my Vue app.
Therefore, I take a common parent element,
so an element that is uh ascendant of both the form
and the unordered list in the end.
And that is my main element here.
And I give it an ID,
which I then use for mounting my app onto that element.
So that might TodosApp,
which is managed by Vue,
is connected to this main element here.
Now at the moment, we got no logic for dealing
with the forum or doing anything with the unordered list,
but this is an important first step.
Now that we did this, we can go back to HTML, to index.html.
And now in there, let's say here, in this main element,
we could add an h2 element.
And here we now use a special syntax,
special text, you could say,
which we haven't used before.
We use double curly braces.
Opening and closing so to say.
And between those curly braces,
we place this key name.
So the name of the property,
which we set up in this object,
which we return inside of data.
In my case, newTodo.
We output this between the double curly braces.
If you do all of that and you save everything,
if you reload your page,
you should see "Learn Vue.js!" here
or whichever texts you entered here in this string.
And this hopefully, looks a bit special
because this text is showing up here on the screen,
even though it's not part of our HTML page.
There, we have this strange placeholder syntax here,
but that's Vue doing some work behind the scenes.
And it's actually doing a lot of work behind the scenes.
We connected it with this mount method to the main element.
And that means that this main element
and all the content in there, including all the content
of all the descendant elements, will be scanned by Vue.
And it will look for a special syntax like this one here,
which is a special syntax recognized by Vue.
And if you dive into the official Vue documentation,
you will also find this special syntax there of course.
That special syntax Vue will look for.
And what Vue does then, is it swaps this special syntax
for a concrete value.
Because this syntax, with the double curly braces
opening and closing, is called Data Binding.
We bind some data to displace in our HTML document.
Which means Vue will be responsible
for outputting some data in that place.
And that data that can be output here has to be registered
in this data method to be precise in the returned object,
which is returned by that data method.
And then Vue we'll take this key,
which it finds here in our placeholder
and take the value for that key,
and output the that here in this h2 element.
Now, if you inspect this in the browser dev tools,
you'll see the real content here as well.
If on the other hand, you view the page source,
you will see this placeholder here.
Because when the page was loaded,
the content was not yet injected.
Because Vue is not a service site framework,
we have no backend or server side for this app.
It's a browser site framework.
So the originally loaded page did have that place holder,
but then we loaded our scripts and they executed,
as they always do, if you include them.
And because of that, and because of our code there,
Vue then became active, and scanned the DOM
after the page was loaded to find placeholders like this,
and replace them with some concrete values.
And behind the scenes, Vue of course does a couple
of very important things for us.
It selects this h2 element then
and sets the text content off that element
to a certain value.
And that is what I mean with Declarative Approach.
We don't tell Vue to select the h2 element
and then set the text content.
Instead, we have the desired end state
which is that we have an h2 element
with some content inside of it.
And we set up which contents that should be.
And we then leave it up to Vue
to figure out how to get there
and how to update the DOM.
And this code here, combined with this, is arguably easier
than writing all these instructions Step-by-step
with just JavaScript.
But of course still, this is just some static content
which never changes.
And if that alone would be our goal,
we wouldn't need Vue.js.
We could have just written this text here
in this h2 tag just like that.
Instead, we of course do use Vue
because we want to build a dynamic User Interface
where Vue also manages changes on the User Interface for us.
And that will be the next step.