Vue.js Templates

What is a template in Vue.js?

A template in Vue.js is an HTML-based syntax that allows developers to declare the structure of the UI. Templates provide a way to bind data and directives, enabling dynamic rendering of content based on the state of the Vue instance.

How do you define a template in a Vue component?

You can define a template in a Vue component using the template property or by using an HTML template within the component's options. The template can include HTML, Vue directives, and interpolation for dynamic content.

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello from My Component!'
    };
  }
});

const app = new Vue({
  el: '#app'
});

What are directives in Vue.js templates?

Directives are special attributes in Vue.js templates that provide functionality to the HTML elements. They are prefixed with v- and are used for binding data, conditionally rendering elements, and handling events. Some common directives include:

• v-bind: Dynamically binds an attribute to an expression.
• v-model: Creates two-way data binding on form input elements.
• v-if: Conditionally renders elements based on a boolean expression.
• v-for: Renders a list of elements based on an array.

How do you use interpolation in Vue.js templates?

Interpolation in Vue.js templates is used to render dynamic content by embedding expressions within double curly braces {{ }}. Vue automatically evaluates the expressions and updates the DOM when the underlying data changes.

const app = new Vue({
  el: '#app',
  data: {
    name: 'Alice'
  },
  template: '<h1>Hello, {{ name }}!</h1>'
});

What is the difference between v-if and v-show?

v-if and v-show are both used for conditional rendering, but they operate differently:

• v-if: Conditionally renders the element and its children in the DOM. If the condition is false, the element is not rendered at all.
• v-show: Toggles the visibility of the element by applying CSS styles (e.g., display: none;). The element is always rendered but hidden when the condition is false.

<div v-if="isVisible">This will be rendered if isVisible is true.</div>
<div v-show="isVisible">This will always be rendered but hidden if isVisible is false.</div>

How do you handle events in Vue.js templates?

You can handle events in Vue.js templates using the v-on directive, which listens for DOM events and executes specified methods in response. You can also use the shorthand @ for v-on.

const app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  template: '<button @click="increment">Count: {{ count }}</button>'
});

What are template components in Vue.js?

Template components are reusable Vue components defined using the template property. They can encapsulate HTML structure, styles, and behavior, making it easy to reuse UI elements throughout your application.

Vue.component('my-button', {
  template: '<button @click="handleClick">Click me!</button>',
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
});

const app = new Vue({
  el: '#app',
  template: '<my-button></my-button>'
});

How do you use slots in Vue.js templates?

Slots are a powerful feature in Vue.js that allows you to create reusable components with flexible content. You can define slot elements in your component template, which act as placeholders for content passed from the parent component.

Vue.component('modal', {
  template: `
    <div class="modal">
      <slot></slot> <!-- Default slot -->
    </div>
  `
});

const app = new Vue({
  el: '#app',
  template: `
    <modal>
      <h1>Hello from the Modal!</h1>
      <p>This content is passed to the modal.</p>
    </modal>
  `
});

What is the purpose of the v-model directive?

The v-model directive creates a two-way data binding between form input elements and Vue instance data. It automatically updates the data property when the input value changes and updates the input value when the data property changes.

const app = new Vue({
  el: '#app',
  data: {
    inputText: ''
  },
  template: `
    <div>
      <input v-model="inputText" placeholder="Type something...">
      <p>You typed: {{ inputText }}</p>
    </div>
  `
});

How can you conditionally render a list of items in a Vue.js template?

You can conditionally render a list of items using the v-for directive along with a condition. You typically use v-if inside the v-for block to filter the items that should be rendered.

const app = new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5],
    showEven: true
  },
  template: `
    <ul>
      <li v-for="item in items" v-if="showEven ? item % 2 === 0 : item % 2 !== 0">
        {{ item }}
      </li>
    </ul>
  `
});