프로그래머가 원하는 기능을 할 수 있는 디렉티브를 만들 수 있다.
<template>
<input type="text" v-focus />
</template>
<script>
export default {
directives: {
focus: {
mounted(el) { // el은 해당 디렉티브를 선언한 객체를 의미한다. 여기서는 위의 input 객체
el.focus() // focus 이벤트를 실행한다.
}
}
}
}
</script>
위의 디렉티브는 input 요소가 마운트되자마자 그 쪽으로 포커스가 되도록 하는 디렉티브이다. directives 옵션 안에서 해당 요소를 el이라는 인자로 받아 사용할 수 있다.
만약 해당 디렉티브를 글로벌하게 사용하고 싶다면, main.js에 directive 메서드로 이용할 수 있다.
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
var app = createApp(App)
app.use(router)
**app.directive('focus', {
mounted(el) {
el.focus()
}
})**
app.mount('#app')