- [Instructor] Let's go ahead and work
with templates a little bit more in this chapter.
So I'm going to start with simple text interpolations.
Using the mustache syntax with the double curly braces,
we can output any variable from our data.
So we've got this simple data right here,
and right now we only have name,
and then we have this text area that is actually v-model
to display that name.
So this and any changes on this will actually modify
the variable called name, and if we want to,
we can just output that using curly braces like this,
and we can just say name,
and it's going to now save whatever is in here,
and notice that it will update automatically
as I type something in this input field.
Now that's the simplest way you can do interpolation.
If you want to modify that and have it be parsed
through a variable, then you can actually
use something called v-html
and set that to the variable here.
So we can say output with v-html the name.
You can see that it appears here as well.
The main difference is that now
we can actually use HTML code here.
So now if we add this B tag,
you can see this text is a little bit bolder.
So any HTML we type in here, if we push it through v-html,
it's actually going to parse as opposed to just output.
Notice that the original one just outputs the code
that we typed in here, it doesn't parse out this bold tag.
Now this is a little bit dangerous,
'cause, technically, somebody can type in
some malicious code.
So you may want to sort of trap what somebody's doing
before you just process whatever's in here.
So that's pretty cool.
Also, this is an expression, so you can do things
with the value of name here as well
by adding some expression syntax.
So you can say something like plus and the dash here,
you can see that dash appears because
this is essentially an expression.
Everything in this v-html property
here works as an expression.
That's pretty awesome.
Let's try this last sort of option
and will show you here.
So I'm going to start by putting
in the value of the variable here,
and then I'm going to say v-once here.
Alright, so what this does is it prevents
this text from being updateable.
So see, if I change things anywhere else,
it will show the changes as I'm typing things in,
but because this one has been sort of declared
to render only one time,
it's not going to do anything with this.
Now this can also be used in a parent tag,
so it's going to work the same way,
and it means that anything that is in this section
is not going to update.
Now why would you want to use that?
Well perhaps if you have something
that you know needs to be read
at the beginning of your application
and you don't want it to ever change,
then this is actually not going to be rendered by view.js.
So it's actually going to be a little bit more efficient
and save you some time if you have some section
of code that you know is not going to update,
and you may try using that option.
So as you can see, the interpolation is an expression
whether you use these double curly braces
or if you use this v-html option here,
you can do the same things that you can do
with expressions here and here,
and we have this additional option called v-once.
Now there's a lot more to templates,
so let's keep on exploring them in the rest of this chapter.