>> Hi, I'm Christopher Harrison,
Senior Program Manager inside of Microsoft.
I want to introduce Vue,
which as you'll notice from the little tagline here,
is highlighted as a progressive JavaScript framework.
Now in this case, what progressive means is
that I can add this as needed,
almost like you might add seasoning to a dish to
help enhance my web application.
What's great about this is I can add in Vue by just adding in
a script tag and referencing the Vue library
from what's known as a CDN or a content delivery network.
Let's take a look at how we might do this,
and I'm going to start with an empty web page here.
This is VS Code.
You're going to notice there's a couple of
other files that are there.
Most of those are just different states of the demos.
The only file that really matters
here is just this little index.html,
and you'll notice that this is empty.
Let's go ahead and create HTML.
I'm going to use the cool little emit capabilities
inside of VS Code to have it
generate the HTML automatically for me.
I just set a bang here,
and then with that first item highlighted,
I just hit "Enter", and then voila,
it gives me the HTML.
I'm going to set the little title here to be "Dog pictures",
which we'll go ahead and build into.
Then I'm going to go ahead inside of the "Head" section here
and paste in the reference to the Vue library.
This is it right here.
"add in Vue"; this is us adding in that Vue library.
That's all that it takes.
Now let me go ahead and start adding in my script here,
let's start adding in a bit of code.
What I want do is I want to
display a message out onto the page here.
I'm going to create a script tag here,
and I'm just going to create a JSON object here.
I'm going to do this and I'm going to say "message:",
and I'll call this "Dog pictures."
There we go, so that is the message that I want to display.
Now, typically at this point,
this would then require a bit of HTML and JavaScript to
go in and read this value and display it out.
I'm going to use Vue for this.
The way in that Vue is going to work here is we're actually
going to create an app object here,
and this app object is going to be the core
of everything that we'll be doing inside of Vue.
Now from this app object,
we can return back data,
and this is done through a function,
so you'll notice this little data function here.
You'll also notice as we continue
to dig into Vue rather that there
are other things that we're going to be able to add into here,
that we'll be able to add in different methods,
we'll be able to add in props and so forth.
But the big thing for right now is our data.
This is going to be the core of information that
our app is going to be able to interact with.
What I want to do is I want to return this data back.
Let me just cut this and just paste this right up here.
Just fix my formatting here.
There we go. It's the exact same JSON object that we had before.
Now all we're doing is just
returning it from this little function called data.
Now how do we then make this app available?
How do we then tie this into Vue?
Well, by us pulling in that Vue library,
we now have access to Vue.
I can say "Vue.createApp",
and then pass in that App object that I've created.
The next thing that Vue is going to
need here is it's going to need to
know where on my page it should look.
We do this by setting "Mount",
and then pointing it at the id of some HTML element on our page,
which is quite frequently called "app".
Let me come up here.
I'm going to say div, and then let's give this an id of "app".
By my doing this,
what's now happened is we've now mounted Vue and told it,
"Hey, go look for that HTML element."
Inside of this HTML element,
I'm then going to have available to me
anything that Vue has made available.
I can actually now then display this message.
The way that we can display information inside
of Vue is to use those double curlies,
sometimes known as handlebars.
This will tell it to automatically
print whatever it is that we have.
You're going to notice that I'll say "message" here.
Of course message is going to be
wired up to this little item right down here.
So message, message.
This is now basically saying, "Hey,
display the phrase 'Dog pictures' right there."
Let me go ahead and save this file,
now that it's all built,
this is now going to display this out,
and let's run this inside of the page.
Now, I'm going to use this really neat little extension
called "Live Server",
which is available inside of VS Code.
You can check the description down below to find out
more information about it and add this into your copy of VS Code.
I hit "Control" + "Shift" + "P" to open up
the command palette and then I'm
just going to click on Live Server.
This will now open up my page inside of my browser,
and now you can see voila,
it's showing us "Dog pictures".
Let me go ahead and just rearrange my windows here real quick.
I'm just having a little bit of challenges finding the edges.
There we go. Okay, better.
One of the other cool little things that that extension
will do for us is it will automatically refresh the page.
If I go in and modify this
to a more traditional like "Hello world," for example,
and let's go ahead and save this,
it'll automatically refresh the page
and now that's going to be displayed out.
This is how we can get started with a Vue application,
that we were able to reference view despite
adding in that little script here and call out to the CDN.
We created our core app,
and then we created a bit of data here that's now
going to be accessible wherever it is that we mounted our app,
and then we displayed it out by using those couple of curlies.
That is how we can go in and set up
our Vue application by
utilizing that ability to just reference this by the CDN.
[MUSIC]