Chỉ thị là các cấu trúc lập trình xác định cách trình thông dịch và trình biên dịch sẽ xử lý đầu vào cho một thao tác. Các chỉ thị Vue mở rộng chức năng của các thành phần HTML trong các mẫu Vue, cho phép thao tác trực tiếp với DOM.
Bạn có thể sử dụng các lệnh trong Vue để thêm trình xử lý sự kiện, trong số các hoạt động khác. Bạn sẽ đính kèm các thuộc tính bổ sung vào các phần tử HTML để sử dụng các lệnh trong ứng dụng của mình.
Cấu trúc của chỉ thị Vue
Chỉ thị trong Vue có một v- tiền tố để phân biệt chúng với các thuộc tính HTML thông thường. Các v- tiền tố cho trình biên dịch Vue biết rằng thuộc tính là một lệnh Vue để nó có thể xử lý và áp dụng hành vi của lệnh đó cho phần tử HTML.
Đây là một ví dụ minh họa việc sử dụng v-show thuộc tính để hiển thị nội dung của một h2 yếu tố:
<h2 v-show="true">Hello Vue</h2>
Vue.js có nhiều chỉ thị tích hợp hơn như liên kết v, v-nếuVà v-oncho phép bạn thực hiện các tác vụ như liên kết dữ liệu, hiển thị có điều kiện, xử lý sự kiện, v.v.
Xác định chỉ thị tùy chỉnh trong Vue
Bạn có thể xác định các lệnh tùy chỉnh để thêm chức năng mới, có thể tái sử dụng cho các ứng dụng Vue.js của mình. Tạo chỉ thị tùy chỉnh yêu cầu hai bước chính. Trước tiên, bạn sẽ đăng ký chỉ thị cục bộ hoặc toàn cầu. Sau đó, bạn sẽ xác định hành vi của lệnh với móc vòng đời.
Đăng ký chỉ thị tùy chỉnh
Bạn có thể đăng ký một lệnh tùy chỉnh trong Vue cục bộ hoặc toàn cầu, tùy thuộc vào phạm vi dự định của nó. Tuy nhiên, đó là một thực tế phổ biến hơn để đăng ký các chỉ thị trên toàn cầu. Điều này đảm bảo các lệnh có sẵn ở mọi nơi trong ứng dụng Vue của bạn.
Bạn có thể đăng ký các chỉ thị tùy chỉnh cục bộ nếu bạn định sử dụng chỉ thị tùy chỉnh bên trong một thành phần Vue đơn giản. Đây là cách bạn có thể đăng ký một v-đổi màu chỉ thị tại địa phương:
<script setup>
const vChangecolor = {
mounted(el, binding, value) {},
};
</script><template>
<h2 v-changecolor>Learn about custom directives</h2>
</template>
Khối mã này thể hiện đăng ký cục bộ của một lệnh tùy chỉnh trong thành phần Vue. Nó định nghĩa các v-đổi màu chỉ thị như một đối tượng trong trường hợp lạc đà đổi màu.
Để đăng ký chỉ thị của bạn trên phạm vi toàn cầu, hãy đến chính.js tệp trong thư mục gốc của thư mục ứng dụng của bạn và xác định nó ở đó:
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.directive('changecolor', {
mounted(el, binding, vnode) {
}
})
app.mount('#app')
Chương trình này đăng ký một chỉ thị tùy chỉnh toàn cầu bằng cách sử dụng app.directive phương pháp. Nó gọi app.directive để đăng ký đổi màu chỉ thị trong ứng dụng và sau đó sử dụng app.mount phương pháp để gắn ứng dụng trên một phần tử HTML có ID ứng dụng.
Bạn có thể chọn giữa các tùy chọn toàn cầu và cục bộ để đăng ký chỉ thị tùy chỉnh dựa trên nhu cầu của ứng dụng.
Xác định hành vi của Chỉ thị
Bạn có thể định nghĩa các chỉ thị tùy chỉnh làm đối tượng chứa móc vòng đời. Các móc vòng đời này xác định hành vi của lệnh và nhận phần tử mà lệnh đó bị ràng buộc.
Một số ví dụ về móc vòng đời là tạo, gắn kếtVà cập nhật. Mỗi hook này cung cấp chức năng để tương tác với thành phần ở một giai đoạn cụ thể.
Bạn có thể dùng gắn kết móc vòng đời để truy cập phần tử HTML của một thành phần trong Mô hình đối tượng tài liệu (DOM) sau khi trình biên dịch Vue.js cài đặt ứng dụng. Ngược lại, các cập nhật móc vòng đời có thể thực hiện cập nhật bổ sung cho các thành phần sau khi bạn đã cấu trúc lại thành phần đó.
Đây là cách bạn có thể xác định một đối tượng có chứa một số móc vòng đời cho một lệnh Vue:
const directiveObject = {
mounted(el, binding, vnode) {
},
updated(el, binding, vnode) {
}
}app.directive('changecolor', directiveObject)
Chỉ thị tùy chỉnh có thể có cùng hành vi đối với gắn kết Và cập nhật móc, không cần móc vòng đời khác. Ngoài ra, nhiều chỉ thị tùy chỉnh mà bạn sẽ tạo sẽ chỉ yêu cầu gắn kết Và cập nhật móc câu.
Trong những trường hợp như vậy, thông thường người ta định nghĩa các chỉ thị là các hàm chứ không phải là các đối tượng có móc vòng đời:
app.directive('changecolor', (el, binding, vnode) => {
const message = 'Are you sure you want to change the color?' el.addEventListener('click', () => {
if (confirm(message)) {
el.style.color = binding.value
|| "#" + Math.random().toString().slice(2, 8);
}
})
})
Khối mã này xác định một chỉ thị toàn cầu tùy chỉnh với chuỗi đổi màu như đối số đầu tiên. Đối số thứ hai là một hàm tốc ký xác định hành vi của chỉ thị.
Như tên của nó, các v-đổi màu lệnh thay đổi màu của bất kỳ thành phần HTML nào mà bạn đính kèm. Lệnh có thể thay đổi màu sắc của phần tử HTML một cách ngẫu nhiên khi nhấp chuột.
Các el tham số đại diện cho phần tử HTML mà bạn đã đính kèm vào lệnh. Các ràng buộc tham số là một đối tượng chứa các thuộc tính xác định cách áp dụng chỉ thị. Các ràng buộc.giá trị tham số cho phép bạn chọn màu mặc định khi tạo ứng dụng Vue. Các vnode tham số chứa thông tin về nút ảo Vue.js được liên kết với phần tử.
Các đổi màu lệnh sử dụng trình xử lý sự kiện JavaScript để nắm bắt sự kiện kích hoạt khi bạn nhấp vào phần tử HTML. Các xác nhận() hiển thị một hộp thoại yêu cầu bạn xác nhận xem bạn có muốn thay đổi màu của phần tử một cách ngẫu nhiên hay không.
Để kiểm tra chỉ thị đã tạo, hãy thiết lập ứng dụng Vue tương tự như bên dưới:
<script setup>
import { ref } from 'vue';const name = ref('Victor')
</script>
<template>
<div>
<h2 v-changecolor="'red'">Hello Vue</h2>
<h3 v-changecolor>Learn custom directives</h3>
<p>Can't Wait to Get Started {{ name }}</p>
</div>
</template>
<style>
div {
display: flex;
flex-direction: column;
gap: 0.8rem;
font-family: cursive;
align-items: center;
inline-size: 100%;
margin-block-start: 10%;
justify-items: center;
}
</style>
Quan sát rằng mã này gán màu màu đỏ đến h2 thẻ nhưng không có màu cho h3 nhãn. Khi bạn xem trước ứng dụng Vue của mình trong trình duyệt, nó sẽ trông như thế này:
Nhấp vào cả hai Xin chào Vue Và Tìm hiểu các chỉ thị tùy chỉnhbạn sẽ nhận thấy rằng thẻ được đặt thành màu đỏ sẽ vẫn có màu đỏ, nhưng thẻ không được gán giá trị cho nó sẽ đổi thành màu ngẫu nhiên.
Điều này sẽ xảy ra sau khi bạn xác nhận lựa chọn của mình, như minh họa bên dưới:
Giải phóng sức mạnh tùy biến của Vue
Chỉ thị tùy chỉnh cung cấp quyền truy cập cấp thấp vào DOM, cho phép bạn tạo chức năng trên các thành phần ứng dụng Vue khác nhau, cải thiện khả năng mở rộng của ứng dụng. Bằng cách làm theo các bước trong bài viết, bạn có thể tạo các chỉ thị tùy chỉnh để giảm bớt quá trình phát triển ứng dụng của mình.
Vue đã phát hành phiên bản 3.3 gần đây với các tính năng bổ sung giúp cải thiện khả năng tùy chỉnh và khả năng sử dụng lại của ứng dụng của bạn. Hiểu các tính năng này có thể đưa năng lực phát triển của bạn lên một tầm cao mới.