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 special directives

Vue.js 3.0 is a powerful JavaScript framework for building user interfaces, and it includes a few special directives that we'll discuss in this tutorial. These special directives help us manipulate the DOM, apply conditions, and control rendering behavior directly from the templates.

v-if, v-else, v-else-if: Conditional Rendering
v-show: Toggle Visibility
v-for: List Rendering
v-on: Event Handling
v-bind: Binding Attributes
v-model: Two-Way Data Binding
v-html: Rendering HTML
v-once: One-Time Rendering
v-cloak: Hiding Un-compiled HTML
v-pre: Skip Compilation

Let's explore each of these with a brief explanation and example:

v-if, v-else, v-else-if: These directives are used for conditional rendering of elements.

<div id="app">
    <p v-if="show">This is a Vue 3 app</p>
    <p v-else>This is not a Vue 3 app</p>
</div>

In your Vue instance:

const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    }
}).mount('#app');

v-show: This directive is used for toggling visibility of elements.

<div id="app">
    <p v-show="show">This is a Vue 3 app</p>
</div>

v-for: This directive is used for rendering lists.

<div id="app">
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
</div>

In your Vue instance:

const app = Vue.createApp({
    data() {
        return {
            items: ['Vue', 'React', 'Angular']
        }
    }
}).mount('#app');

v-on: This directive is used to handle events.

<div id="app">
    <button v-on:click="sayHello">Say hello</button>
</div>

In your Vue instance:

const app = Vue.createApp({
    methods: {
        sayHello() {
            alert('Hello!');
        }
    }
}).mount('#app');

v-bind: This directive is used to bind attributes.

<div id="app">
    <a v-bind:href="url">Visit Google</a>
</div>

In your Vue instance:

const app = Vue.createApp({
    data() {
        return {
            url: 'https://www.google.com'
        }
    }
}).mount('#app');

v-model: This directive is used for two-way data binding.

<div id="app">
    <input v-model="message" placeholder="Enter a message">
    <p>Message: {{ message }}</p>
</div>

In your Vue instance:

const app = Vue.createApp({
    data() {
        return {
            message: ''
        }
    }
}).mount('#app');

v-html: This directive is used for rendering raw HTML.

<div id="app">
    <p v-html="html"></p>
</div>

In your Vue instance:

const app = Vue.createApp({
    data() {
        return {
            html: '<span style="color:red">This is raw HTML</span>'
        }
    }
}).mount('#app');

Vue 3.0 v-model Directive:

The v-model directive is a two-way binding directive used for form input elements.
It automatically binds the input value to a variable in the parent component.

Example code:

<!-- ParentComponent.vue -->
<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!',
    };
  },
};
</script>

Vue 3.0 v-if and v-else Directives:

The v-if and v-else directives are used for conditional rendering.
They show or hide elements based on a given condition.

Example code:

<!-- ConditionalComponent.vue -->
<template>
  <div>
    <p v-if="isTrue">This is true</p>
    <p v-else>This is false</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTrue: true,
    };
  },
};
</script>

Vue 3.0 v-for Directive:

The v-for directive is used for rendering a list of items.
It iterates over an array or object and renders the specified template for each item.

Example code:

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

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
      ],
    };
  },
};
</script>

Vue 3.0 v-show Directive:
- The v-show directive toggles the visibility of an element based on a given condition.
- Unlike v-if, the element is always rendered, and only its CSS display property is manipulated.
- Example code:
```

<template>
  <div v-show="isVisible">This is shown or hidden</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>
```

Vue 3.0 v-once Directive:

The v-once directive renders an element or component only once.
Subsequent changes to the data will not affect the rendered content.

Example code:

<!-- OnceComponent.vue -->
<template>
  <div v-once>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content will only be rendered once.',
    };
  },
};
</script>

Vue 3.0 v-pre Directive:

The v-pre directive skips compilation for this element and all its children.
It is useful when you have large portions of static content that you don't want Vue to process.

Example code:

<!-- PreComponent.vue -->
<template>
  <div v-pre>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content will not be compiled by Vue.',
    };
  },
};
</script>

Vue 3.0 v-cloak Directive:

The v-cloak directive is used to keep an element and its children hidden until Vue's compilation is done.
It is often used with CSS styles to prevent the flickering effect of uncompiled content.

Example code:

<!-- CloakComponent.vue -->
<template>
  <div v-cloak>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content will be hidden until Vue is done compiling.',
    };
  },
};
</script>

<style>
[v-cloak] {
  display: none;
}
</style>

Vue 3.0 v-on Directive Modifiers:

The v-on directive is used to attach event listeners to elements.
Modifiers can be added to change the behavior of the event handling.

Example code:

<!-- EventComponent.vue -->
<template>
  <button v-on:click.prevent="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

Vue 3.0 v-bind Directive:

The v-bind directive is used for dynamic binding of HTML attributes or component props.
It can be shortened using the colon shorthand.

Example code:

<!-- BindComponent.vue -->
<template>
  <a v-bind:href="url">Visit Vue.js</a>
  <!-- Shorthand: <a :href="url">Visit Vue.js</a> -->
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org/',
    };
  },
};
</script>

Vue 3.0 v-html Directive:

The v-html directive renders HTML content dynamically.
It is useful when you want to render HTML stored in data.

Example code:

<!-- HTMLComponent.vue -->
<template>
  <div v-html="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>This is <strong>HTML</strong> content.</p>',
    };
  },
};
</script>

Vue 3.0 v-text Directive:

The v-text directive sets the element's text content dynamically.
It is similar to using double curly braces {{}} but is more explicit.

Example code:

<!-- TextComponent.vue -->
<template>
  <div v-text="message"></div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This is dynamic text content.',
    };
  },
};
</script>

Vue 3.0 v-slot Directive:

The v-slot directive is used for named slots in Vue 3.0.
It allows components to define slots for content distribution.

Example code:

<!-- SlotComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <slot-component>
    <template v-slot:header>
      <h1>Page Title</h1>
    </template>
    Content goes here.
  </slot-component>
</template>

<script>
import SlotComponent from './SlotComponent.vue';

export default {
  components: {
    SlotComponent,
  },
};
</script>

Vue 3.0 v-memo Directive:

The v-memo directive is not a built-in Vue directive.
It is commonly used in the context of libraries like VitePress for memoizing computed values.

Example code (assuming a library that supports v-memo):

<!-- MemoComponent.vue -->
<template>
  <div v-memo="memoizedValue">{{ memoizedValue }}</div>
</template>

<script>
export default {
  computed: {
    memoizedValue() {
      // Memoization logic
      return computeExpensiveValue();
    },
  },
};
</script>

Vue 3.0 v-is Directive:

The v-is directive is used to dynamically switch between components.
It is commonly used with dynamic components to conditionally render different components.

Example code:

<!-- DynamicComponent.vue -->
<template>
  <component :is="componentType"></component>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      componentType: 'first',
    };
  },
  components: {
    first: FirstComponent,
    second: SecondComponent,
  },
};
</script>