Custom Directives

Hello, today I will talk about the custom directives we use in Vue JS. So what are custom directives? Let’s start!

Understanding Custom Directives

They are special directives that we can use in addition to the normal directives.

Custom directives enrich HTML with new reactive functionality that’s fully managed by Vue JS.

Custom directives consist of 5 different hooks. These are bind, inserted, update, componentUpdated, and unbind.

Parameters and extra functions can be defined like normal directives.

Hook Functions

🔸 bind(el, binding, vnode): It is called once when the directive is first connected to the element. It takes three parameters, these are: el, binding, and vnode. We’ll look at these parameters extra later.

🔸 inserted(el, binding, vnode): This hook occurs when the item is added to the parent DOM. That is, it is called when the element to which the directive is attached is added to its parent. It takes the same directives as bind.

🔸 update(el, binding, vnode, oldVnode): It is called when the component containing the directive is updated. At this stage, Children Nodes have not been updated yet. In addition, it has the oldVnode parameter.

🔸 componentUpdated(el, binding, vnode, oldVnode): This hook is called once the component and the children have been updated. It has the oldVnode parameter like update hook.

🔸 unbind(el, binding, vnode): This hook is called once the directive is removed.

Let’s take a look at these parameters.

Directive Hook Arguments

Let’s take a closer look at these arguments that we see in the parameters of Hooks.

🔹 el: This parameter represents the element that this custom directive is applied to. This can be used to directly manipulate the DOM.

🔹 binding: This input parameter is an object containing the following properties:

• name: The name of the directive, without the v- prefix. For example, using a custom directive as v-focus yields a name of focus.
• value: The value passed to the directive. For example, using the v-exp=”prop” directive yields a value of prop.
• oldValue: The previous value, only available in update and componentUpdated. It contains the previous value of the directive, before the update.
• expression: The expression of the binding as a string. For example in v-adding ="2 + 2", the expression would be "2 + 2".
• arg: The argument passed to the directive, if any. For example in v-example:default, the arg would be "default".
• modifiers: An object containing modifiers, if any. That is, if the modifier is set to true, if not, it is not seen by the directive. For example,{ foo: true, bar: true }.

🔹 vnode: It is the virtual node produced by Vue’s compiler.

🔹oldVnode: The previous virtual node, only available in the update and componentUpdated hooks.

Building a Custom Directive

Now let’s build a custom directive in your mind so that you can better understand the custom directives.

Vue JS

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

First, we specify that we want to create a directive called exp, then we start to make edits on the paragraph we selected in HTML with the bind hook.

HTML

<p v-exp>It will remain fixed on the page</p>

📍If we want to put the item a certain pixel away, we need to update it as follows.

Vue JS

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

We need to specify 50px top space in HTML.

HTML

<div id="app"> 
  <p>Scroll down the page</p>  
  <p v-exp="50">Stick me 50px from the top of the page</p> 
</div>

📍To leave a space from the right or top, we can make an update using binding.arg

Vue JS

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

Here, if there is right expression in HTML, 50px to the right, if not 50px to the top.

HTML

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

📍If you want to use more than one value, you can follow the following way.

HTML

<p v-exp="{ top: '30', left: '110' }">Stick me 30px from the top of the page and 110px from the left of the page</p>

Vue JS

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

Yes, we did it!

I tried to explain everything about custom directives as much as I could. I hope it was a useful article. Bye now.

See you in my next article 👋🏻