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 template syntax

Vue.js uses a template syntax that allows you to declaratively render your data to the DOM using straightforward syntax. It's very similar to HTML with additional custom Vue directives.

Here are the fundamental parts of Vue 3's template syntax:

Interpolations

Text Interpolation: You can use the "Mustache" syntax (double curly braces) to display text.

<span>Message: {{ msg }}</span>

Raw HTML Interpolation: If you want to output real HTML, you need to use the v-html directive.

<div v-html="rawHtml"></div>

JavaScript Expressions: Vue.js supports full JavaScript expressions inside data bindings.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

Directives

Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression.

Parameters: Some directives can take an "argument", denoted by a colon after the directive name.

<a v-bind:href="url">...</a>
<button v-on:click="doSomething">...</button>

Modifiers: Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way.

<form v-on:submit.prevent="onSubmit">...</form>

Conditional and List Rendering

v-if, v-else-if, v-else: Conditionally render elements.

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

v-for: Render elements in a list.

<ul id="example-1">
  <li v-for="item in items">{{ item.message }}</li>
</ul>

Event Handling

v-on: Attach event listeners that invoke methods on Vue instances.

<button v-on:click="counter += 1">Add 1</button>

Two-Way Binding

v-model: Create two-way data bindings on form input, textarea, and select elements.

<input v-model="message" placeholder="edit me">

Remember, Vue.js templates are just syntactic sugar for render functions. You can always drop down to the render function level if you need more control over your component's render output.

Vue 3.0 Template Directives:

Vue 3.0 templates use directives to apply special behavior to HTML elements or manipulate the DOM.

Example code:

<!-- TemplateDirectives.vue -->
<template>
  <div v-if="isVisible">Visible content</div>
  <span v-for="item in items">{{ item }}</span>
</template>

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

Dynamic Templates in Vue 3.0:

Use dynamic templates to conditionally render different components or elements based on data.

Example code:

<!-- DynamicTemplates.vue -->
<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      dynamicComponent: 'ComponentA',
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

Conditional Rendering in Vue 3.0 Templates:

Use v-if and v-else to conditionally render elements based on data conditions.

Example code:

<!-- ConditionalRendering.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 Template Expressions:

Use template expressions to output dynamic data within double curly braces {{ }}.

Example code:

<!-- TemplateExpressions.vue -->
<template>
  <p>{{ message }}</p>
</template>

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

Looping in Vue 3.0 Templates:

Use v-for to iterate over an array and render elements dynamically.

Example code:

<!-- LoopingTemplates.vue -->
<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

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

Vue 3.0 Template ref Attribute:

Use the ref attribute to get a reference to an element or component in the template.

Example code:

<!-- TemplateRef.vue -->
<template>
  <div ref="myDiv">Reference this div</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // Access the referenced div
  },
};
</script>

Scoped Slots and Templates in Vue 3.0:

Use scoped slots to pass data or functions from a parent component to its child.

Example code:

<!-- ScopedSlotsTemplates.vue -->
<template>
  <child-component v-slot="{ message }">
    {{ message }}
  </child-component>
</template>

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

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

Vue 3.0 Template Styles and Classes:

Use dynamic classes and styles in templates based on data conditions.

Example code:

<!-- TemplateStylesClasses.vue -->
<template>
  <div :class="{ 'is-active': isActive, 'has-error': hasError }">
    Dynamic styles and classes
  </div>
</template>

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

Event Handling in Vue 3.0 Templates:

Use v-on to attach event handlers to elements and respond to user interactions.

Example code:

<!-- EventHandling.vue -->
<template>
  <button @click="handleClick">Click me</button>
</template>

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

Vue 3.0 Template Slots:

Use slots to provide content from a parent component to a child component.

Example code:

<!-- TemplateSlots.vue -->
<template>
  <child-component>
    <p>This content will be placed in the slot</p>
  </child-component>
</template>

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

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