The syntax to declare a new directive is as illustrated:
Vue.directive(<name: String>, { // hooks})
This will register a new global directive. Inside the hooks object, you can define two important functions: bind, which you used in this recipe, and update, which is triggered every time a component contained in it is updated.
Every hook function is called with at least three arguments:
- el: The HTML element
- binding: Directives can receive an argument; binding is an object that will contain the value of the argument
- vnode: the Vue internal representation of this element
We used the el parameter to edit the appearance of our element, manipulating it directly.
