From the course: Vue.js 2 Essential Training
Template interpolations
- [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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.