Giới thiệu Vue Directives và cách tạo Custom Directives

Khi nói đến VueJS, chúng ta thường chỉ nói đến Component, cách tạo và import component,...Thế nhưng Component không phải là thứ tuyệt vời duy nhất bạn có thể làm với Vue. Trong trường hợp nếu bạn muốn áp dụng một vài chỉnh sửa cho các component của mình, một vài thuộc tính cho các component của mình,...đó là khi Vue Directives được nhắc tới.

Vue Directives là một đoạn lệnh nhỏ mà các bạn có thể chèn chúng vào các phần tử DOM. Tên của các đoạn lệnh đó được bắt đầu bằng tiền tố v- dùng để Vue có thể biết được rằng bạn đang sử dụng một chút đánh dấu đặc biệt và để cho cú pháp được nhất quán. Chắc bạn đã quen dùng với một số Directives như v-model, v-for, v-if. Hôm nay mình sẽ hướng dẫn các bạn cách để tạo ra các Directives của riêng mình, phục vụ cho các mục đích khác nhau của dự án.

Trong bài này chúng ta sẽ áp dụng Vue Directives cho sự kiện scroll khi người dùng lăn chuột trên màn hình từ trên xuống dưới nhé.

Đầu tiên chúng ta cùng tạo một directives đơn giản, đặt tên là scroll nhé:

Vue.directive('scroll');

Và để sử dụng các bạn có thể gắn chúng vào các element trong DOM chúng ta chỉ cần làm như sau:

<div v-scroll></div>

Có một số sự kiện Vue cung cấp khi sử dụng directives như sau:

• bind: được gọi khi directives được gắn vào element.
• inserted: được gọi khi component hoặc element có directives được insert vào node cha của chúng. Nhưng có thể vẫn chưa được đưa vào trong DOM.
• updated: được gọi khi các thành phần của component/element có directives đã được cập nhật, nhưng nhiều khả năng là sẽ xảy ra trước khi các component/element con của chúng.
• componentUpdated: được gọi khi các thành phần của component/element có directives và con của chúng đã được cập nhật.
• unbind: được gọi khi directives bị huỷ bỏ.

Bây giờ chúng ta sẽ cùng nhau tạo custom directives nhé. Ta tạo một directives global như sau, các bạn có thể viết đoạn code dưới đây vào file mà các bạn khai báo sử dụng vue (như Laravel là resources/assets/js/app.js, các frameworks khác tương tự nhé):

Vue.directive('scroll', {
    bind(el, binding, vnode) {
        el.style.position = 'fixed'
    }
});

Sau đó chúng ta gắn directives này vào phần tử mong muốn.

<p v-scroll>I will now be tacked onto the page</p>

Các bạn có thể thấy khi lăn chuột trên màn hình thì dòng text bên trên được đã được fixed sau khi thêm directives: v-scoll. Sau đây chúng ta sẽ thay đổi code một chút để có thể truyền data vào directives, mục đích ở đây là truyền khoảng cách từ đoạn text bên trên lên phần top của cửa sổ trình duyệt.

Vue.directive('scroll', {
    bind(el, binding, vnode) {
        el.style.position = 'fixed'
        el.style.top = binding.value + 'px'
    }
});

Sau đó chúng ta sửa lại phần gắn v-scroll ở element nhé:

<p v-scroll="70">Stick me 70px from the top of the page</p>

Và đây là kết quả( các bạn có thể sửa 70 thành giá trị nào đó bạn thích và chờ xem kết quả nhé)

Như các bạn thấy phần tử p sau khi được gắn directives thì có vị trí đã được fixed với top là 70px.

Bên trên chúng ta mới chỉ set được fixed top cho element, nếu chúng ta muốn thêm một option nữa là fixed left thì làm thế nào được nhỉ? Đừng lo, chúng ta chỉ cần sửa code một chút thôi:

Vue.directive('scroll', {
    bind(el, binding, vnode) {
        el.style.position = 'fixed';
        const s = (binding.arg == 'left' ? 'left' : 'top');
        el.style[s] = binding.value + 'px';
    }
});

Sau đó sửa lại ở element HTML

<p v-scroll:left="70">I'll now be offset from the left instead of the top</p>

Cùng xem kết quả thế nào nhé: