Vue directive
Vue directive
Special attributes used in Vue elements
A directive is an attribute in an HTML tag that is used to use Vue's features, and its usage is prefixed with v-, such as v-if.
Basic Directive
v-text
Updates the element’s textContent.
If you need to update the part of textContent,
you should use {{ Mustache }} interpolations.
Example
<div id="simple">
<h2>{{ message }}</h2>
---- Same AS----
<h2 v-text="message"></h2>
</div>
v-html
Updates the element’s innerHTML.
Note that the contents are inserted as plain HTML -they will not be compiled as Vue templates.
If you find yourself trying to compose templates using v-html,
try to rethink the solution by using components instead.
Example
<div id="simple">
<h2 v-html="message"></h2>
</div>
Difference between v-html and v-text
v-html can handles html tags, v-text can't do that.
But, v-text is safer than v-html.
v-html is at risk of XSS attack.
You should be careful.
This is the basic directive, next time I will show you Dynamic directive.
Thank you.
Nice job. Have you built many apps with Vue.js yet? How has your experience been?
It was great, vue is easyer than react.
react is good framework too, but vue.js is more Intuitive I think.
Congratulations @console.log! You received a personal award!
Click here to view your Board
Do not miss the last post from @steemitboard:
Congratulations @console.log! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!