Chào mừng bạn đến với Cafedev – nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết này, chúng ta sẽ khám phá về Vue.js với các chỉ đạo tùy chỉnh. Vue.js không chỉ mạnh mẽ với các tính năng tích hợp sẵn, mà còn cho phép chúng ta tạo ra các chỉ đạo tùy chỉnh để điều khiển hành vi của các phần tử DOM. Chúng ta sẽ khám phá cách sử dụng và tạo ra các chỉ đạo tùy chỉnh để tối ưu hóa trải nghiệm phát triển của mình. Hãy cùng khám phá!
Nội dung chính
1. Giới thiệu
Ngoài các hướng dẫn mặc định đi kèm trong core (như v-model hoặc v-show), Vue cũng cho phép bạn đăng ký các hướng dẫn tùy chỉnh của riêng bạn.
Chúng tôi đã giới thiệu hai hình thức tái sử dụng mã trong Vue: components và composables. Components là các khối xây dựng chính, trong khi composables tập trung vào việc tái sử dụng logic có trạng thái. Ngược lại, các hướng dẫn tùy chỉnh chủ yếu được dùng để tái sử dụng logic liên quan đến việc truy cập DOM cấp thấp trên các phần tử thông thường.
Một hướng dẫn tùy chỉnh được định nghĩa như là một đối tượng chứa các lifecycle hooks tương tự như của một component. Các hooks nhận phần tử mà hướng dẫn được ràng buộc vào. Dưới đây là một ví dụ về một hướng dẫn mà tập trung vào một input khi phần tử được chèn vào DOM bởi Vue:
<script setup>
// enables v-focus in templates
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>Giả sử bạn chưa nhấp vào bất kỳ nơi nào khác trên trang, input ở trên sẽ tự động được focus. Hướng dẫn này hữu ích hơn thuộc tính autofocus vì nó hoạt động không chỉ khi trang được tải – nó cũng hoạt động khi phần tử được chèn động bởi Vue.
export default {
setup() {
/*...*/
},
directives: {
// enables v-focus in template
focus: {
/* ... */
}
}
}Tương tự như components, các hướng dẫn tùy chỉnh phải được đăng ký để có thể sử dụng trong các template. Trong ví dụ trên, chúng tôi sử dụng việc đăng ký cục bộ thông qua tùy chọn directives.
Thông thường, việc đăng ký toàn cầu các hướng dẫn tùy chỉnh ở cấp độ ứng dụng cũng rất phổ biến:
const app = createApp({})
// make v-focus usable in all components
app.directive('focus', {
/* ... */
})Típ: Lời khuyên Hướng dẫn tùy chỉnh chỉ nên được sử dụng khi chức năng mong muốn chỉ có thể đạt được thông qua manipulation trực tiếp DOM. Ưu tiên sử dụng templating mô tả bằng các hướng dẫn tích hợp sẵn như v-bind khi có thể vì chúng hiệu quả hơn và thân thiện với việc render trên máy chủ.
2. Directive Hooks
Một đối tượng định nghĩa hướng dẫn có thể cung cấp một số hàm kết nối (tất cả tùy chọn):
const myDirective = {
// called before bound element's attributes
// or event listeners are applied
created(el, binding, vnode, prevVnode) {
// see below for details on arguments
},
// called right before the element is inserted into the DOM.
beforeMount(el, binding, vnode, prevVnode) {},
// called when the bound element's parent component
// and all its children are mounted.
mounted(el, binding, vnode, prevVnode) {},
// called before the parent component is updated
beforeUpdate(el, binding, vnode, prevVnode) {},
// called after the parent component and
// all of its children have updated
updated(el, binding, vnode, prevVnode) {},
// called before the parent component is unmounted
beforeUnmount(el, binding, vnode, prevVnode) {},
// called when the parent component is unmounted
unmounted(el, binding, vnode, prevVnode) {}
}2.1 Đối số của Hook
Các hook chỉ đạo được truyền các đối số sau:
– el: phần tử mà chỉ đạo được ràng buộc. Điều này có thể được sử dụng để trực tiếp thao tác DOM.
– binding: một đối tượng chứa các thuộc tính sau.
– ->value: Giá trị được truyền vào chỉ đạo. Ví dụ trong v-my-directive="1 + 1", giá trị sẽ là 2.
– ->oldValue: Giá trị trước đó, chỉ có sẵn trong beforeUpdate và updated. Nó có sẵn dù giá trị có thay đổi hay không.
– ->arg: Đối số được truyền vào chỉ đạo, nếu có. Ví dụ trong v-my-directive:foo, đối số sẽ là "foo".
– -> modifiers: Một đối tượng chứa các bộ điều chỉnh, nếu có. Ví dụ trong v-my-directive.foo.bar, đối tượng điều chỉnh sẽ là { foo: true, bar: true }.
– ->instance: Thể hiện của thành phần mà chỉ đạo được sử dụng.
– ->dir: đối tượng định nghĩa chỉ đạo.
– vnode: VNode cơ bản đại diện cho phần tử được ràng buộc.
– prevVnode: VNode đại diện cho phần tử được ràng buộc từ lần render trước. Chỉ có sẵn trong các hook beforeUpdate và updated.
Ví dụ, xem xét việc sử dụng chỉ đạo sau:
<div v-example:foo.bar="baz">Đối số binding sẽ là một đối tượng theo dạng:
{
arg: 'foo',
modifiers: { bar: true },
value: /* value of `baz` */,
oldValue: /* value of `baz` from previous update */
}Tương tự như các chỉ đạo tích hợp sẵn, đối số chỉ đạo tùy chỉnh có thể là động. Ví dụ:
<div v-example:[arg]="value"></div>Ở đây, đối số chỉ đạo sẽ được cập nhật phản ứng dựa trên thuộc tính arg trong trạng thái thành phần của chúng ta.
Ghi chú: Ngoài el, bạn nên coi các đối số này như chỉ đọc và không bao giờ sửa đổi chúng. Nếu bạn cần chia sẻ thông tin qua các hook, nên làm như vậy thông qua các thuộc tính của phần tử .
3. Rút gọn chức năng
Thông thường, một chỉ đạo tùy chỉnh sẽ có cùng hành vi cho mounted và updated, không cần các hook khác. Trong các trường hợp như vậy, chúng ta có thể định nghĩa chỉ đạo dưới dạng một hàm:
<div v-color="color"></div>app.directive('color', (el, binding) => {
// this will be called for both `mounted` and `updated`
el.style.color = binding.value
})4. Đối tượng chữ số(Literals)
Nếu chỉ đạo của bạn cần nhiều giá trị, bạn cũng có thể truyền vào một đối tượng chữ số JavaScript. Hãy nhớ, chỉ đạo có thể nhận bất kỳ biểu thức JavaScript hợp lệ nào.
<div v-demo="{ color: 'white', text: 'hello!' }"></div>app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})5.Sử dụng trên các thành phần
Khi sử dụng trên các thành phần, chỉ đạo tùy chỉnh luôn áp dụng cho nút gốc của một thành phần, tương tự như thuộc fallthrough
<MyComponent v-demo="test" /><!-- template of MyComponent -->
<div> <!-- v-demo directive will be applied here -->
<span>My component content</span>
</div>Lưu ý rằng các thành phần có thể tiềm năng có nhiều hơn một nút gốc. Khi áp dụng cho một thành phần có nhiều nút gốc, một chỉ đạo sẽ bị bỏ qua và một cảnh báo sẽ được hiển thị. Khác với thuộc tính, các chỉ đạo không thể được chuyển sang một phần tử khác với v-bind="$attrs". Nói chung, không khuyến khích sử dụng chỉ đạo tùy chỉnh trên các thành phần.”
Chúng tôi hy vọng rằng bài viết về Vue.js với các chỉ đạo tùy chỉnh đã mang lại cho bạn cái nhìn sâu sắc và hiểu biết mới về cách tận dụng sức mạnh của framework này. Tại Cafedev, chúng tôi luôn khuyến khích sự sáng tạo và khám phá, và chúng tôi tin rằng việc sử dụng các chỉ đạo tùy chỉnh sẽ giúp bạn tạo ra các ứng dụng Vue.js mạnh mẽ và linh hoạt hơn bao giờ hết. Hãy tiếp tục theo dõi chúng tôi để không bỏ lỡ những bài viết hữu ích khác từ Cafedev!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
