YouTip

In addition to the default set of core directives (v-model and v-show), Vue also allows registering custom directives. Below we register a global directive v-focus, which functions to give the element focus when the page loads: ## Example const app = Vue.createApp({}) // Register a global custom directive `v-focus` app.directive('focus', { // When the bound element is mounted to the DOM... mounted(el) { // Focus the element el.focus() } }) app.mount('#app') [Try it »](#) We can also use the directives option in the instance to register a local directive, so the directive can only be used in that instance: ## Example const app = { data() { return { } }, directives: { focus: { // Directive definition mounted(el) { el.focus() } } } } Vue.createApp(app).mount('#app') [Try it »](#) * * * ## Hooks ### Hook Functions Directive definition functions provide several hook functions (optional): * `created`: Called before the bound element's attributes or event listeners are applied. * `beforeMount`: Called when the directive is first bound to the element and before the parent component is mounted. * `mounted`: Called after the parent component of the bound element is mounted. * `beforeUpdate`: Called before updating the VNode of the component that contains it. * `updated`: Called after the VNode of the component that contains it and its child components' VNodes have been updated. * `beforeUnmount`: Called once when the directive is unbound from the element before the parent component is unmounted. * `unmounted`: Called once when the directive is unbound from the element and the parent component has been unmounted. ## Example import{createApp}from'vue'const app = createApp({})app.directive('my-directive', {created(){}, beforeMount(){}, mounted(){}, beforeUpdate(){}, updated(){}, beforeUnmount(){}, unmounted(){}})app.directive('my-directive', () =>{})const myDirective = app.directive('my-directive') ### Hook Function Parameters The hook functions have the following parameters: **el** The element the directive is bound to. This can be used to manipulate the DOM directly. **binding** binding is an object containing the following properties: * `instance`: The component instance that uses the directive. * `value`: The value passed to the directive. For example, in `v-my-directive="1 + 1"`, the value is `2`. * `oldValue`: The previous value, only available in `beforeUpdate` and `updated`. Available whether or not the value has changed. * `arg`: The argument passed to the directive (if any). For example, in `v-my-directive:foo`, arg is `"foo"`. * `modifiers`: An object containing modifiers (if any). For example, in `v-my-directive.foo.bar`, the modifiers object is `{foo: true, bar: true}`. * `dir`: An object passed as a parameter when registering the directive. For example, in the following directive: app.directive('focus', { mounted(el) { el.focus() }}) dir would be the following object: { mounted(el) { el.focus() }} **vnode** The blueprint of the actual DOM element received as the el parameter. **prevNode** The previous virtual node, only available in beforeUpdate and updated hooks. The following example demonstrates the use of these parameters: ## Example ​ const app = Vue.createApp({}) app.directive('tutorial', (el, binding, vnode) => { console.log(binding.value.name) // => "" console.log(binding.value.url) // => "www." var s = JSON.stringify el.innerHTML = s(binding.value) }) app.mount('#app') [Try it »](#) Sometimes we don't need other hook functions, we can use a shorthand function, as follows: Vue.directive('tutorial', function (el, binding) { // Set the background color of the directive el.style.backgroundColor = binding.value.color }) Directive functions can accept all valid JavaScript expressions, the following example passes a JavaScript object: ## Example Vue.directive('tutorial', function (el, binding) { // Shorthand method to set text and background color el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) [Try it »](#)