Hiểu về mẫu Vue.js và cách chúng hoạt động

Mẫu Vue.js là một tính năng chính của Vue framework, cho phép các nhà phát triển kết xuất dữ liệu theo khai báo vào DOM bằng cú pháp đơn giản. Mẫu Vue.js là cú pháp dựa trên HTML liên kết dữ liệu thể hiện Vue với chế độ xem. Chúng cung cấp một cách sạch sẽ và có tổ chức để xây dựng giao diện người dùng tương tác bằng cách kết hợp HTML với các chỉ thị đặc biệt của Vue.

Trong bài viết này, chúng ta sẽ khám phá những điều cơ bản về mẫu Vue.js, cách chúng hoạt động và cách sử dụng chúng hiệu quả để xây dựng các ứng dụng động và phản ứng.

Mẫu Vue.js là gì?

Mẫu Vue.js là cú pháp dựa trên HTML được sử dụng để tạo cấu trúc của thành phần Vue. Mẫu là một phần của thành phần Vue xác định những gì được hiển thị trên giao diện người dùng. Chúng thường được viết bằng HTML chuẩn nhưng được cải tiến bằng các chỉ thị và cú pháp đặc biệt của Vue để liên kết dữ liệu và xử lý sự kiện.

Sau đây là một ví dụ cơ bản về mẫu Vue.js:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

Trong ví dụ này, mẫu chứa một cấu trúc HTML đơn giản với phần tử '<h1>'. Cú pháp {{ message }} là một ví dụ về cú pháp mẫu của Vue, liên kết thuộc tính dữ liệu message với phần tử '<h1>'.

Cú pháp và chỉ thị mẫu

Các mẫu Vue.js sử dụng cú pháp và chỉ thị đặc biệt để liên kết dữ liệu, hiển thị danh sách, hiển thị các phần tử có điều kiện và xử lý sự kiện. Một số chỉ thị phổ biến được sử dụng trong các mẫu bao gồm:

v-bind: Liên kết một thuộc tính với một biểu thức.
v-model: Tạo ràng buộc dữ liệu hai chiều trên các phần tử đầu vào của biểu mẫu.
v-if: Hiển thị có điều kiện một phần tử dựa trên một biểu thức.
v-for: Hiển thị danh sách các mục bằng cách lặp qua một mảng hoặc đối tượng.
v-on: Đính kèm trình lắng nghe sự kiện vào một phần tử.

Thuộc tính liên kết với v-bind

Chỉ thị v-bind được sử dụng để liên kết các thuộc tính HTML với dữ liệu thể hiện Vue. Điều này cho phép bạn thiết lập các thuộc tính động như src, href, alt, v.v.

<template>
  <img v-bind:src="imageUrl" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

Viết tắt cho v-bind chỉ đơn giản là dấu hai chấm (:), làm cho mẫu ngắn gọn hơn:

<img :src="imageUrl" alt="Dynamic Image" />

Xử lý sự kiện với v-on

Chỉ thị v-on được sử dụng để đính kèm trình lắng nghe sự kiện vào các phần tử trong mẫu. Điều này cho phép bạn thực thi các phương thức khi một số sự kiện nhất định được kích hoạt, chẳng hạn như nhấp chuột, di chuyển chuột hoặc gửi biểu mẫu.

<template>
  <button v-on:click="sayHello">Click Me</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('Hello, Vue.js!');
    }
  }
};
</script>

Giống như v-bind, lệnh v-on cũng có phiên bản viết tắt, đó là ký hiệu at (@):

<button @click="sayHello">Click Me</button>

Kết xuất có điều kiện với v-if, v-else và v-else-if

Các mẫu Vue.js hỗ trợ kết xuất có điều kiện bằng cách sử dụng các chỉ thị v-if, v-else và v-else-if. Các chỉ thị này cho phép bạn kết xuất các phần tử có điều kiện dựa trên tính đúng đắn của một biểu thức.

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

Hiển thị danh sách với v-for

Chỉ thị v-for được sử dụng để hiển thị danh sách các mục bằng cách lặp qua một mảng hoặc đối tượng. Chỉ thị này thường được sử dụng trong các mẫu Vue để hiển thị dữ liệu trong một vòng lặp.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

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

Thuộc tính :key được sử dụng để xác định duy nhất từng mục trong danh sách, giúp Vue tối ưu hóa quá trình hiển thị.

Khả năng tái sử dụng mẫu với các khe cắm

Vue.js cho phép các thành phần có thể tái sử dụng và cấu thành thông qua việc sử dụng <slot>. Các khe cung cấp một cách để truyền nội dung vào các thành phần con và cho phép các mẫu linh hoạt và có thể tái sử dụng.

<template>
  <div>
    <slot>Default content if no slot content provided</slot>
  </div>
</template>

Sau đó, bạn có thể sử dụng thành phần này và truyền nội dung tùy chỉnh vào khe của nó:

<template>
  <my-component>
    <p>Custom content inside the slot</p>
  </my-component>
</template>

Phần kết luận

Mẫu Vue.js là một tính năng mạnh mẽ cung cấp một cách đơn giản nhưng linh hoạt để xây dựng giao diện người dùng. Bằng cách sử dụng các chỉ thị như v-bind, v-on, v-if, v-for và các khe cắm, bạn có thể tạo các thành phần động, phản ứng và có thể tái sử dụng. Hiểu và nắm vững các mẫu Vue.js là điều cần thiết để xây dựng các ứng dụng hiệu quả và có thể bảo trì.

vue mẫu chỉ thị khe cắm v-bind v-on thành phần có điều kiện kết xuất dữ liệu danh sách sự kiện khả năng tái sử dụng cấu trúc