- Besides adding a script tag
or building a project,
let's examine what makes Vue JS special
and talk about how it's different
from building regular JavaScript applications.
To use Vue Js in your code.
You'll need to create an HTML element that you can target
so that Vue JS can control it.
That's usually done by adding an ID
to an element like a div, and that's often the keyword app
but it can really be anything else.
And that also means that you can add view
to more than one place on your page.
Once you have that ID
then you can use Vue JS features inside your container.
So for example, here, we can use a template expression.
The template expression looks
just like HTML with some extra directives
which is what we call commands in Vue JS.
But the directives get converted by Vue
and replaced with the code needed to build your app.
Now one of the directives you can use
is the expression syntax
which are these double curly braces right here
and are sometimes called mustaches.
What this is doing is printing the value of a variable.
We have called name.
Vue has two slightly different APIs
or application programming interfaces.
Think of them as
slightly different flavors of your favorite sodas
which one you use depends on how you've installed Vue.
The global API is what you use
when you add the script tag to an HTML page
we'll be using that for about the first half of this course.
The application API is what you use when you install Vue
with the CLI or a package manager like NPM.
If you're using the global API
you'll get access to the Vue object
which it can use to create content in your HTML
using the create app method.
Create app takes a configuration object
with a series of methods.
And one of the most important methods
sets up the data for our project.
The method needs to return an object
with the data that you want an application to have.
In this case, we're returning a simple variable called name
with some texts.
To load this onto your page.
We use the mountain method to replace our template
with our Vue application.
You'll see that it's targeting here
the item with an ID of app.
You'll sometimes see the object written out
like this in a separate variable to keep things simpler.
So we're creating a variable here called app
and it has the entire object.
And over here, when we use the Vue object
and the create app method
we're going to just call that app variable right here
and then Mount the app like we did before.
Now, there's a few
things happening behind the scenes.
We should mention that make Vue JS very special.
Vue uses something called declarative rendering.
Now that means that you feel like you're writing HTML, but
in reality,
you're using a language that looks like HTML
but allows you to use features
that extend the capabilities of HTML.
Those commands are then converted
or rendered into code that the browser displays.
One of the features that we get when using Vue
is called text interpolation.
Using the curly braces that we saw earlier
to print out variables as well as other code.
Now, the curly braces are sometimes called mustaches
because of their shape and inside, you can put more
than just variables,
but more complex formulas
which in JavaScript are called expressions.
Now, one thing that's not obvious from our example
is that the data assigned to the template and our script
is reactive.
That means that if something modifies our data
Vue would automatically take care
of modifying the template for us.
Now, this is one of the best features of Vue JS
because you don't have to worry about updating your HTML
just writing commands that modify that data.
I've created a code pen
for you with this started code right here.
Now you can see that I've got a div
with an idea of app here
and an expression inside a headline.
And down here in the JavaScript
I've got an app
and I've got the Vue create app method
calling that object.
That I then mount into the item
here with the ID of app.
Here's some things that you can try first.
You can try creating more than one app.
You can also change the name variable in the new obligation.
And finally you can feed, create app an object instead
of a variable like we've seen here.
This will give you the ability to try out
creating more than one app in the same page
and have a little bit of experience
with the different format.
If you want to look at the solution
you can take a look at this URL.
And if you want to take a look at
the difference between the two, take a look right here.
Now let's go ahead and take care of this.
What I'm going to do is
make a copy of this application and just do a paste.
Don't worry if things aren't quite working
and I'm going to give this one, an ID of another app
and then I'll still call in a name variable
but I want to create another app with a different name.
Now I'm going to make a copy of my current app
or I'm actually just going to grab the app object.
And then down here, I will issue a view
create app.
And instead of using the variable that I created earlier
I'm just going to paste the object.
And in here, I'll change the name of this object.
I'll call it polo shirt.
And then right here,
we're going to mount this into the item with an ID of
another app.
And just for kicks, let's go ahead
and add an HR in between these two.
You can see that it's already created
two different applications
and the applications are passing along two variables
even though they have the same name,
it doesn't matter
because they are two different applications.
And we use the slightly different formats on this one.
I'm passing along a variable, which is probably
what we'll be doing in the rest of this course.
And this one's a little bit messier
but some people really prefer the convenience
of having everything tied to the object.