v-html & v-text

[00:00:00]
>> v-html, scrape for strings that have HTML elements that need to be rendered. This is really cool. So let's say, from a server, somebody gives you this string and it has a link in it and of course, it's gonna be a really amazing taco recipe that I really like.

[00:00:17]
So if you wanna make really good, all pasta or tacos, I suggest this one that's neither here nor there. But, [LAUGH] if you look at this string you don't wanna evaluate this string when you put it to the page, which is what it would typically do. What you wanna do is you want to use v-html instead of the mustache templates, and then it will treat that HTML like HTML.

[00:00:38]
It will see that link and create a link out of the link. Cool. There is a warning that I will warn you with, do not accept user input and then put it to the page with v-html because that could be a cross site scripting attack vector. So if you look at this goofy example and you want it to go to this Alpa store tacos thing, and it says I have to install all your tacos, that sucks, I don't want them to be stolen.

[00:01:09]
So this is really not a good way of doing things. If you know that you you don't know exactly what you're getting, I would not suggest using v-html to access that and print it out to the page. v-text is similar to using mustache templates. This is also one that is not as useful as other things.

[00:01:31]
But it's basically the same as the mustache template. So if I say, I like carne asada, I know there are other tacos but I'm just sticking to those two those are my favorites. [LAUGH] So we've got these moustache templates here, and then we've got the v-text, they do the same thing.

[00:01:50]
The reason why we have both is sometimes you only have access to changing an attribute or something and you don't or you're not able to insert something inside of a tag. So just in case you run into that occurrence, then you can use that. If you want to dynamically update things though, it's recommended to use mustache templates.

[00:02:09]
They're evaluated a little faster. I made a little table just in case you wanted to look at all of them really quickly and you didn't wanna go through back through all of the course. So I have some of these purposes and examples that you can refer to.