YouTip

In addition to the built-in core directives (v-model and v-show), Vue also allows you to register custom directives. Below, we register a global directive called `v-focus`. The function of this directive is to make an element gain focus when the page loads: ## Example // Register a global custom directive named 'focus' Vue.directive('focus', { // When the bound element is inserted into the DOM. inserted: function (el) { // Focus the element el.focus() } }) // Create the root instance new Vue({ el: '#app' }) [Try it »](#) We can also register a local directive using the `directives` option within an instance. This way, the directive is only available within that instance: ## Example // Create the root instance new Vue({ el: '#app', directives: { // Register a local custom directive named 'focus' focus: { // Directive definition inserted: function (el) { // Focus the element el.focus() } } } }) [Try it »](#) * * * ## Hooks ### Hook Functions The directive definition function provides several optional hook functions: * `bind`: Called only once, when the directive is first bound to the element. This hook can be used to define an initialization action that happens once upon binding. * `called when the bound element is inserted into its parent node (as long as the parent node exists; it doesn't have to be present in the document). * `update`: Called when the template containing the bound element updates, regardless of whether the bound value has changed. By comparing the bound value before and after the update, you can ignore unnecessary template updates (see detailed hook function parameters below). * `componentUpdated`: Called after the template containing the bound element has completed a full update cycle. * `unbind`: Called only once, when the directive is unbound from the element. ### Hook Function Parameters The hook functions receive the following parameters: * **el**: The element the directive is bound to. Can be used to directly manipulate the DOM. * **binding**: An object containing the following properties: * **name**: The name of the directive, without the `v-` prefix. * **value**: The value of the directive's binding. For example: `v-my-directive="1 + 1"`, the value is `2`. * **oldValue**: The previous value of the directive's binding, available only in the `update` and `componentUpdated` hooks. Available regardless of whether the value has changed. * **expression**: The expression or variable name of the binding value. For example `v-my-directive="1 + 1"`, the expression is `"1 + 1"`. * **arg**: The argument passed to the directive. For example `v-my-directive:foo`, the arg is `"foo"`. * **modifiers**: An object containing modifiers. For example: `v-my-directive.foo.bar`, the modifiers object is `{ foo: true, bar: true }`. * **vnode**: The virtual node generated by Vue's compiler. * **oldVnode**: The previous virtual node, available only in the `update` and `componentUpdated` hooks. The following example demonstrates the use of these parameters: ## Example Vue.directive('', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '
' + 'value: ' + s(binding.value) + '
' + 'expression: ' + s(binding.expression) + '
' + 'argument: ' + s(binding.arg) + '
' + 'modifiers: ' + s(binding.modifiers) + '
' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: '!' } }) [Try it »](#) Sometimes we don't need other hook functions. We can use a shorthand function in the following format: Vue.directive('', function (el, binding) { // Set the directive's background color el.style.backgroundColor = binding.value.color }) The directive function can accept all valid JavaScript expressions. The following example passes a JavaScript object: ## Example Vue.directive('', function (el, binding) { // Shorthand to set text and background color el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) [Try it »](#)