vue directive basics and beyond
If you start getting into vuejs the concept of a vue directive is something that will come up, and it is important to understand what they are. There might be a range of ways of defining what a directive is, but maybe a good way of summing things up is that they are just a way to go about preforming some kind of an action on an html element in a static vue template. Actions such as changing what the text node is for a paragraph element, assigning a value for a style attribute of an element, or attaching an event handler for a button element.
There are many built in directives and an important part of vuejs development involves knowing how to use them first and foremost before looking into taking the time to make a custom directive. However speaking of custom directives, yes in addition to knowing about the built in ones it also goes without saying that it is a good idea to also know how to make them also. Directives are a great way to add features that act on elements that are needed for a project, but are not built into vuejs itself.
If you have some background with angular chances are you will be able to get up and running with vue directives fairly fast. However in any case in this post I will be getting into some simple, and maybe not so simple vue directive examples. Starting out with some very basic hello world type examples, and then getting into some additional ones that are custom made.
1 - Vue directive basic v-text, and v-bind example
If you find what I wrote a little confusing maybe it would be best to look at some code examples. Here I have an html file in which I am linking to vuejs, and then using just a single vue instance in a script tag that makes use of these v-text, and v-bind directives.
In the html here you will notice the v-text directive just sets the innerText of the p elements to the mess property of the data object in my Vue instance in the script tag. I am also using the v-bind directive to set the value of a p elements style attribute to what is in the red property of the data object as well.
When this example is up and running it results in the messages and style set in the data object of the vue being used in the text nodes and style attributes of the elements in which the v-text, and v-bind directives are being used. As such this should help to give you at least a basic idea of that a directive is in vuejs, it is a way to set the attributes and values of DOM elements.
Understanding directives along with templates, the data object, and other vuejs instance options is a major part of vuejs development. However the built in set of directives has its limitations, so there are ways of creating my own custom directives. In addition there is also how to go about ditching static templates all together in favor of render functions. However both of those options give a fair amount of control allowing me to do just about anything that comes to mind when it comes to DOM manipulation.
2 - Vue directive v-on directive
So then this is a directive that should have at least a few examples here as this is one that I find myself using all the time.
2.1 - A Basic vue v-on:click directive example
2.2 - Call Click method example
I can call the method that I want to fire when binding the directive in the template. This way I can design my methods in a way in which they work as functions that take arguments other than an event object. For example I can use my step method in a way in which I can give a rate as the first argument, and I can have few buttons that will step at different rates.
3 - A Custom vue directive to binary example
So now that we have a good grasp on how to go about using directives there is the question of making them. To do so I just need to call the Vue directive global api method and pass the name I want for the directive as the first argument followed by an object that will contain the logic of the directive. When doing so there are a number of hook functions that can be defined for a directive which include hook, inserted, update, componentUpdated, and unbind.
3.1 - Basic v-tobin example that makes use of the bind directive hook.
Here I have a simple directive that will take the inner text of an element and turn it into a binary string. The example makes used of the bind hook which will only fire once and is called when the directive is first bound to an element.
4 - Conclusion
In vuejs directives are a helpful tool for making use of built in logic, as well as defining my own logic when it comes to preforming actions on html elements and vuejs components. They are not a replacement for components though, in fact that is the first and for most way of going about breaking down code into smaller more reusable pieces. However there are many situations in which it might be called for to create one or two custom directives.