Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17

How it works...

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.

Using WebSockets in Vue

WebSockets is a new technology that enables two-way communication between the user

and the server where the app is hosted. Before this technology, only the browser could
initiate a request and, thus, a connection. If some update on the page was expected, the

browser had to continuously poll the server. With WebSockets, this is no longer necessary;
after the connection is established, the server can send updates only when there is a need.

Getting ready

You don't need any preparation for this recipe, just the basics of Vue. If you don't know

what WebSockets are, you don't really need to, just think about them as a channel of

continuous two-way communication between a server and browser.