Những điều cơ bản về chỉ thị Vue.js

Các chỉ thị Vue.js là các mã thông báo đặc biệt trong mã đánh dấu cho biết thư viện thực hiện điều gì đó với một phần tử DOM. Chúng được thêm tiền tố v- để chỉ ra rằng chúng là các thuộc tính đặc biệt do Vue cung cấp. Các chỉ thị là một trong những tính năng cốt lõi của Vue.js, cho phép các nhà phát triển thao tác DOM một cách hiệu quả.

Trong bài viết này, chúng ta sẽ khám phá những điều cơ bản về chỉ thị Vue.js, bao gồm các chỉ thị được sử dụng phổ biến nhất và cách sử dụng chúng trong ứng dụng Vue của bạn.

Các chỉ thị thường dùng trong Vue.js

Sau đây là một số chỉ thị được sử dụng phổ biến nhất trong Vue.js:

v-bind: Liên kết động một hoặc nhiều thuộc tính hoặc một prop thành phần với một biểu thức.
v-model: Tạo ràng buộc dữ liệu hai chiều trên phần tử đầu vào biểu mẫu, vùng văn bản và phần tử chọn.
v-if: Hiển thị có điều kiện một phần tử hoặc thành phần.
v-else: Cung cấp khối else cho v-if.
v-else-if: Cung cấp khối else-if cho v-if.
v-for: Hiển thị danh sách các mục bằng cách sử dụng một mảng hoặc đối tượng.
v-on: Đính kèm trình lắng nghe sự kiện vào các phần tử.
v-show: Chuyển đổi chế độ hiển thị của một phần tử dựa trên biểu thức.
v-html: Cập nhật mã HTML bên trong của một phần tử.

v-bind: Liên kết các thuộc tính động

Chỉ thị v-bind được sử dụng để liên kết động các thuộc tính hoặc thuộc tính với một biểu thức. Ví dụ, bạn có thể liên kết thuộc tính src của phần tử img với một thuộc tính dữ liệu:

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

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

Viết tắt cho v-bind chỉ đơn giản là dấu hai chấm (:), do đó ví dụ trên có thể được viết lại như sau:

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

v-model: Liên kết dữ liệu hai chiều

Chỉ thị v-model được sử dụng để tạo ràng buộc dữ liệu hai chiều trên các phần tử đầu vào biểu mẫu. Nó giữ cho phần tử đầu vào và thuộc tính dữ liệu đồng bộ:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

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

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

Các chỉ thị v-if, v-else-if và v-else được sử dụng để render có điều kiện các phần tử. Chúng cho phép bạn render có điều kiện các phần tử dựa trên việc đánh giá một biểu thức:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

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

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

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. Mỗi mục trong mảng có thể được hiển thị bằng vòng lặp:

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

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

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

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ử DOM. Bạn có thể xử lý các tương tác của người dùng như nhấp chuột, nhập liệu và nhiều hơn nữa:

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

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

Viết tắt của v-on là ký hiệu @ (@), do đó ví dụ trên có thể được viết lại như sau:

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

v-show: Chuyển đổi chế độ hiển thị

Chỉ thị v-show được sử dụng để chuyển đổi chế độ hiển thị của một phần tử dựa trên một biểu thức. Không giống như v-if, chỉ thị này không xóa phần tử khỏi DOM; nó chỉ chuyển đổi thuộc tính CSS display:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

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

v-html: Hiển thị HTML

Chỉ thị v-html được sử dụng để cập nhật HTML bên trong của một phần tử. Chỉ thị này hữu ích khi bạn cần hiển thị HTML thô trong các thành phần Vue của mình:

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

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Phần kết luận

Các chỉ thị Vue.js cung cấp những cách mạnh mẽ để thao tác DOM và tạo các ứng dụng web động và tương tác. Hiểu được những điều cơ bản về các chỉ thị Vue.js như v-bind, v-model, v-if, v-for, v-on, v-show và v-html là điều cần thiết đối với bất kỳ nhà phát triển Vue nào. Bằng cách thành thạo các chỉ thị này, bạn có thể xây dựng các ứng dụng mạnh mẽ và giàu tính năng hơn với Vue.js.

vue chỉ thị v-bind v-model v-if v-for v-on v-show v-html phản ứng dữ liệu sự kiện có điều kiện kết xuất