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?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
It was great, vue is easyer than react.
react is good framework too, but vue.js is more Intuitive I think.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @console.log! You received a personal award!
Click here to view your Board
Do not miss the last post from @steemitboard:
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit