CodeOrc.com - Learn by example
X
Make an RPG
Vue Implementations

Example of how to use Custom Directives

Custom Directives let you create attributes that do things

For example: let's create a directive that automatically focuses the attention the current tag on load.

<input type="text" v-focus=""></input>
// Register a global custom directive called `v-focus` Vue.directive('focus', { // When the bound element is inserted into the DOM... inserted: function (el) { // Focus the element el.focus() } });
DO IT
Try changing inserted to bind. What happens?

You may have noticed that when you switched to the bind handler, it no longer works. This is because the focus is called before the element is actually inserted into the DOM, hence does nothing.

Directive Hooks

Hooks tell your directive when to operate. Here are some examples from the Vue Docs:

  • bind called only once, when the directive is first bound to the element. This is where you can do one-time setup work.
  • inserted called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).
  • update called after the containing component’s VNode has updated

Directive Hook Arguments

el is the element that the directive is bound to. With it, you can directly affect the DOM: insert elements around it or inside.

Let's do another example where we add our own custom padding around a div based on our own directive named my_padder

<span my_padder="50"></span>
Vue.directive('v-my-padder', { bind: function( el ) { el.innerHTML = "<div class='the_padding'>" + el.innerHTML + "</div>"; } });
DO IT

If you look at the output in the debugger, you'll see that there is now a div in the inner contents with a class of the_padding. As you can see, this is a very powerful concept and be used in a variety of ways.

Hook Argument: Binding

In our example, nothing is being done with the 50 value. Let's use that value to set the padding. For that, we need the second argument: binding.

<span v-my-padder="50"></span>
Vue.directive('my-padder', { bind: function( el, binding ) { var padding = binding.value; el.innerHTML = "<div style='padding: " + padding + "px;' class='the_padding'>" + el.innerHTML + "</div>"; } });
DO IT

This one is straight from the Vue Docs. It shows you what each of the binding members do.

<div v-demo:foo.a.b="message"> contents. </div>
Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#demo', data: { message: 'hello!' } })
DO IT

Straight from Vue: binding is an object containing the following properties:

binding propertydescription
nameThe name of the directive, without the v- prefix.
valueThe value passed to the directive. For example in v-my-directive="1 + 1", the value would be 2.
oldValueThe previous value, only available in update and componentUpdated. It is available whether or not the value has changed.
expressionThe expression of the binding as a string. For example in v-my-directive="1 + 1", the expression would be "1 + 1".
argThe argument passed to the directive, if any. For example in v-my-directive:foo, the arg would be "foo".
modifiersAn object containing modifiers, if any. For example in v-my-directive.foo.bar, the modifiers object would be { foo: true, bar: true }.

The following 2 are the 3rd and 4th parameters

par
vnodeThe virtual node produced by Vue’s compiler. See the VNode API for full details.
oldVnodeThe previous virtual node, only available in the update and componentUpdated hooks.

Function shorthand

If you only want your hook handler to run on bind and update, you can use the following. It's the same function handler, but without the extra object inbetween.

Vue.directive('demo', function (el, binding, vnode) { el.innerHTML = 'Just a demo.'; });
DO IT

Object Literal

Directives can take any valid javascript expression. This makes it easy to send a JSON object:

Vue.directive('demo', function (el, binding) { el.innerHTML = 'Hello ' + binding.value.first + ", " + binding.value.last; });
DO IT

In the next lesson, we will learn about Example of how to use Vue Filters

Get the Latest Tutorial Updates
<< >>
X