Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 directives

Directives are special attributes with the v- prefix. They are expected to be used in the template of Vue components. Directives apply special reactive behavior to the rendered DOM.

Here is a tutorial on some commonly used Vue 3.0 directives:

v-model
The v-model directive allows you to create two-way data bindings on form inputs, textareas, and select elements.
```
<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>
```
In this example, v-model syncs the value of the input element with the message data property.

v-if, v-else-if, v-else

These directives are used to conditionally render blocks:

<template>
  <div v-if="type === 'A'">Render A</div>
  <div v-else-if="type === 'B'">Render B</div>
  <div v-else>Render C</div>
</template>

<script>
export default {
  data() {
    return {
      type: 'B'
    }
  }
}
</script>

Depending on the value of type, only one of the divs will be rendered.

v-for

The v-for directive is used for rendering a list of items using the data from an Array:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Learn Vue' },
        { text: 'Love Vue' },
        { text: 'Master Vue' }
      ]
    }
  }
}
</script>

The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.

v-on

The v-on directive is used for attaching event listeners:

<template>
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button has been clicked {{ counter }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  }
}
</script>

In this example, a click event listener increments the counter.

The v-on directive can be shortened to @. So v-on:click becomes @click.

v-bind
The v-bind directive is used to bind attributes of an HTML element or component to an expression:
```
<template>
  <div v-bind:id="dynamicId"></div>
</template>

<script>
export default {
  data() {
    return {
      dynamicId: '123'
    }
  }
}
</script>
```
In this example, the id attribute of the div is bound to the dynamicId data property.
The v-bind directive can be shortened to :. So v-bind:id becomes :id.

These are just a few of the directives Vue.js provides. Directives are a powerful tool in Vue.js and help you write declarative code in your templates.

Creating Custom Directives in Vue 3.0: You can create custom directives using app.directive in the setup function.

// Example custom directive to focus an element
app.directive('focus', {
  mounted(el) {
    el.focus();
  },
});

<!-- Using the custom directive -->
<input v-focus>

Vue 3.0 v-bind Directive: The v-bind directive is used to bind an attribute to an expression.
```

<div :class="{ active: isActive }"></div>
```
Vue 3.0 v-model Directive: The v-model directive provides two-way data binding for form inputs.
```

<input v-model="message">
```
Vue 3.0 v-if and v-else Directives: The v-if and v-else directives are used for conditional rendering.
```

<p v-if="isVisible">Visible</p>
<p v-else>Hidden</p>
```
Vue 3.0 v-show Directive: The v-show directive toggles the visibility of an element based on the truthiness of the expression.
```

<p v-show="isVisible">Visible</p>
```

Vue 3.0 v-for Directive: The v-for directive is used for rendering a list of items.

<!-- Rendering a list -->
<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Vue 3.0 v-on Directive: The v-on directive is used to listen to events and execute methods.
```

<button v-on:click="handleClick">Click me</button>
```
Vue 3.0 v-html Directive: The v-html directive renders HTML from a variable.
```

<div v-html="htmlContent"></div>
```
Vue 3.0 v-text Directive: The v-text directive sets the element's text content.
```

<p v-text="message"></p>
```
Vue 3.0 v-pre Directive: The v-pre directive skips compilation for this element and all its children.
```

<div v-pre>{{ rawHtml }}</div>
```
Vue 3.0 v-cloak Directive: The v-cloak directive is used with CSS to prevent the element from being visible until Vue's compilation is done.
```

<div v-cloak>{{ message }}</div>
```
Vue 3.0 v-once Directive: The v-once directive renders the element and its children once.
```

<p v-once>{{ staticContent }}</p>
```