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.