Template trong Vue.js chính là ràng buộc chuẩn HTML có thể dùng cho mọi trang web. Nó biểu hiện cấu trúc của DOM được render với lớp dữ liệu được khai báo bên dưới trong script.

Bên dưới, Vue.js biên dịch template thành các hàm render Virtual DOM (DOM ảo). Kết hợp với hệ thống reactivity (phản ứng), Vue.js có thể xác định một cách thông minh số lượng tối thiểu các component cần phải render lại, và áp dụng số lượng tối thiểu các hiệu chỉnh về DOM khi trạng thái của ứng dụng thay đổi.

Cú pháp

<template>
  <div>
    <h1>Hi, my name is {{ name }}</h1>
  </div>
</template>

Lưu ý rằng bên trong template của Vue.js chỉ cho phép tồn tại 1 thẻ con duy nhất, nên ta đặt thẻ div bên trong và khởi tạo các phần tử bên trong thẻ div này nhé. Vue.js sử dụng cú pháp hai dấu ngoặc nhọn {{ }} hay còn gọi là thẻ mustache. Thẻ này sẽ thay thế cho giá trị của thuộc tính name trên object data và nó cũng sẽ cập nhật bất cứ khi nào giá trị này thay đổi.

Vue.js cung cấp sẵn các thuộc tính HTML trên các phần tử, thứ mà không thể gọi qua các thẻ mustache thông qua v-bind:

<button v-bind:disabled="isDisabled">Submit</button>

Data binding

{{ count + 1 }}

{{ condition ? 'YES' : 'NO' }}

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

<div v-bind:id="'list-' + id"></div>

Trên là các kiểu binding trên Vue.js, lưu ý rằng thẻ mustache không dùng để khai báo biến hoặc các cấu trúc điều khiển (dùng toán thử ba ngôi thay vì if else)

<!-- đây là một khai báo, không phải biểu thức: -->
{{ var a = 1 }}

<!--
  các lệnh quản lí luồng (flow control) cũng sẽ không hoạt động,
  thay vào đó bạn hãy dùng toán tử ba ngôi (ternary operator):
-->
{{ if (ok) { return message } }}

Directive

Directive là các thuộc tính đặc biệt trong Vue.js bắt đầu bằng tiền tố v-. Dưới đây là một vài directive ta thường dùng:

<p v-if="seen">You can see this message.</p>
 <li v-for="item in items" :key="item.message">
    {{ item.message }}
 </li>
<button v-on:click="doSomething"> ... </button>
<form v-on:submit.prevent="onSubmit"> ... </form>

Ta cũng có thể lược bỏ bớt các thành phần v-on và v-bind để code trông ngắn gọn hơn:

<!-- cú pháp đầy đủ -->
<a v-bind:href="url"> ... </a>

<!-- cú pháp đầy đủ -->
<a v-on:click="doSomething"> ... </a>

<!-- cú pháp rút gọn: dùng dấu hai chấm -->
<a :href="url"> ... </a>

<!-- cú pháp rút gọn: dùng kí tự @ -->
<a @click="doSomething"> ... </a>

Bài viết tới đây là hết, hi vọng các bạn có thể hiểu về template cũng như cơ chế binding trong Vue.js.