VueJS – Directive tùy biến

Bên cạnh những directive được cung cấp mặc định như v-if, v-show, v-else, v-for, v-bind , v-model, v-on, …. VueJS cho phép bạn đăng ký các directive tùy biến. Trong ví dụ bên dưới, chúng ta sẽ tạo ra một global directives.

Cấu trúc

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle>VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               e1.style.color = "red";
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

Trong ví dụ trên, chúng ta tạo ra một custom directivechangestyle.

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

Chúng ta thêm changestyle vào thẻ div.

<div v-changestyle>VueJS Directive</div>

Kết quả đoạn text sẽ thay đổi màu và font-size.

Chúng ta sử dụng phương thức bind, là một phần của directive với 3 tham số e1,binding, vnode

e1 : Phần tử mà custom directive áp dụng. Binding giống như các tham số được truyền vào custom directive ví dụ : v-changestyle = “{color:’green’}”vnode.

Tiếp theo, chúng ta sẽ console log ra tất cả các tham số này như ví dụ sau:

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle = "{color:'green'}">VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               console.log(binding.value.color);
               console.log(vnode);
               e1.style.color=binding.value.color;
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

Trong ví dụ này màu text được đổi thành green.

<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});