vue 3 directives code example

Example: vuejs directives list

/* Here we have 5 vuejs directive to use:
v-text
v-once
v-html
v-bind
v-model
*/

// ------------ v-text ------------
// Description: Instead of using interpolation, you can use the v-text directive. It performs the same job:
<span v-text="name"></span>

// ------------ v-once ------------
/* Description:
You know how {{ name }} binds to the name property of the component data.

Any time name changes in your component data, Vue is going to update the value represented in the browser.

Unless you use the v-once directive, which is basically like an HTML attribute:
*/
<span v-once>{{ name }}</span>

// ------------ v-html ------------
/* Description:
When you use interpolation to print a data property, the HTML is escaped. This is a great way that Vue uses to automatically protect from XSS attacks.

There are cases however where you want to output HTML and make the browser interpret it. You can use the v-html directive:
*/
<span v-html="someHtml"></span>

// ------------ v-bind ------------
/* Description:
Interpolation only works in the tag content. You can’t use it on attributes.

Attributes must use v-bind:
*/

<a v-bind:href="url">{{ linkText }}</a>

// v-bind is so common that there is a shorthand syntax for it:

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

// ------------ Two-way binding using v-model ------------
/* Description:
v-model lets us bind a form input element for example, and make it change the Vue data property when the user changes the content of the field:
*/
<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>

// More example of v-model:
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>