Vue 사용자지정 디렉티브

custom directives

내장된 디렉티브의 대표적인 예로 v-model, v-show 등이 있다. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수가 있는데, 그것을 custom directives라고 부른다.
등록하는 방법으로는 두가지가 있는데, 하나는 로컬로 등록하는 방법이 있고, 다른 하나는 전역으로 등록하는 방법이 있다.

로컬 방식

<!-- CustomDirectives.vue -->
<template>
  <input type="text" v-focus />
</template>
<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus(); //화면 작동시 자동 focus
      },
    }
  }
}
</script>

전역 방식

<!-- CustomDirectives.vue -->
...
<script>

</script>

<!-- main.js -->
...
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
})
...