Custom Directives

v-model, v-show, v-if, v-for와 같은 것들을 Directives라고 한다. 그런데 이걸 사용자가 정의해서 쓸 수 있는데 이것을 Custom Directives라고 한다.

// CustomDirectives.vue
<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style scoped></style>

// index.js
const routes = [
  ...,
  {
    path: "/customDirective",
    name: "CustomDirective",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/CustomDirective.vue"),
  },
];

Global로 정의해서 쓰기

// CustomDirectives.vue
<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  //   directives: {
  //     focus: {
  //       mounted(el) {
  //         el.focus();
  //       },
  //     },
  //   },
};
</script>

<style scoped></style>

main.js에 이 코드 추가

// main.js
app.directive("focus", {
  mounted(el) {
    el.focus();
  },
});