- [Instructor] Using libraries has gotten really hard
in the past few years because
of the tools required to run them.
Now in contrast, Vue.js gives you two main ways
of installing the framework.
The easiest is to add a script pack
to your current html document.
This is similar to how we add things like, perhaps,
Bootstrap or Jquery into a page, and if you want to,
you can go to this installation page,
and you can scroll down to the CDN version,
that means a Content Delivering Network.
A CDN makes web pages load things from a common place
and so most of the time when you load this script,
it's going to load from a CDN that will do it pretty quick.
So let's go ahead and copy this into our clipboard,
and you'll notice that above you'll see
that there's actually two versions
of the library that you can use.
You can use the development version
as well as the production version.
This happens to be a script pack
for the development version,
which has additional warnings and a better debug experience.
You'll want to use the development version
while you are coding,
and then when you're ready to put this up on a website,
you can use the production version.
You can also download them with
these two buttons right here.
If you wanted to install the smaller production version,
you can just change the name
of Vue.js right here to Vue.min.js.
So let's go ahead and put this in an actual page,
and what I've done here is I've created
this page at jsbin, and you can see
that this is essentially a Bootstrap template,
and you'll see that I'm loading the bootstrap.css here
as well as Jquery and some other dependencies
for Bootstrap like Popper
as well as the Bootstrap JavaScript,
and if we wanted to install Vue.js,
all we need to do is paste that script right here,
and then we have the full power of Vue.js
as well as Bootstrap and Jquery.
Now, you don't really need to install all these libraries,
but, realistically, when you're putting things
in a web project, you often have things
That you've already installed.
So let's take a look at how you actually see
that this is working.
What we want to do is you can create a script tag right here
with some code for your project.
So in here what we'll do is create a variable
for our application, and this is going to use the Vue object
that you get from the library,
and in here we will create an object,
you can see that I added these curly braces here,
and in this object, I'm going to establish an element
that is going to target something in my HTML,
and that's going to be an element with an ID of app,
and then after that we are going to create some data
that is going to appear in my document.
So let's go ahead and make sure
that this is indented properly here.
And in this data, I'm going
to just create an element called name,
and I'm going to type in a product right here.
Bamboo Thermal Ski Coat.
Alright, so with Vue.js, what you can do is,
once you've placed things into this data object,
then you can use them using a templating system
that you get by default, which is pretty cool,
and that means that, first of all, we'll need
to create the div with an ID of app so that
the application targets that right here,
and then in here, we can just use an h2 or any other tag,
and then use the template syntax in Vue.js
that allows to go ahead and output that name.
So we'll go ahead and put in the value of the variable here,
and if we take a look at output,
you'll see that Vue.js allows you
to put the name of the variable from our data into our page.
So, by default, you're getting
this really cool templating system.
Vue.js is super powerful and gives
you a lot of different features,
which we're going to explore in the rest of this course.
Now as I mentioned before, there's another way
that you can install Vue.js if you're building
a more complex application,
and that's with a build process that is similar
to what you do when you work with like React and Angular.
You need to use that when
you work in really big, complex projects.
We'll talk about those type of installations
in later videos, but if your using this on an existing page,
this is really all you need to get started.