Vue Custom Directive로 개발속도 올리기

HeeGeun.Lee·2022년 12월 11일

vue

목록 보기

2/2

Introduction

Vue에서 Directive는 v-라는 접두어를 가진 v-model, v-show, v-bind등을 말한다.
그중에 개발자가 직접 정의하여 사용하는 Custom Directive를 알아보자.

사용법

local(지역) 설정

<template>
  <div>
    <!-- 숫자만 입력하는 폼 -->
    <input type="text" v-number />
  </div>
</template>

<script>
export default {
  // Directive 설정
  directives: {
    number: {
      mounted(el) {
        el.addEventListener('input', (e) => {
          e.target.value = e.target.value.replace(/[\D]/g, '')
        })
      }
    }
  },
}
</script>

이런식으로 v-number라는 custom directive를 세팅하기 위해 directives에 number안에 라이프 사이클 훅(created, mounted, updated, unmounted등)을 넣어서 사용한다.

global(전역) 설정

// main.js
app.directive('number', {
  mounted(el) {
    el.addEventListener('input', (e) => {
      e.target.value = e.target.value.replace(/[\D]/g, '')
    })
  }
})

설정만 main.js에 해주고 template에서는 사용법이 같다.

바로 함수 전달

app.directive("font-size", (el, binding) => {
  el.style.fontSize = 24 + "px";
});

라이프 사이클 훅을 쓰지 않고 바로 함수를 directive설정하면 beforeMount, updated훅에 설정한 것처럼 작동한다.

app.directive('font-size', (el, binding) => {
  el.style.fontSize = binding.value + 'px'
})

binding을 이용하면 반응형 데이터로 작성할 수 있다.

그외

// main.js
// 소문자만
app.directive('lowercase', {
  mounted(el) {
    el.addEventListener('input', (e) => {
      e.target.value = e.target.value.toLowerCase()
    })
  }
})

// 대문자만
app.directive('uppercase', {
  mounted(el) {
    el.addEventListener('input', (e) => {
      e.target.value = e.target.value.toUpperCase()
    })
  }
})

// 숫자만
app.directive('number', {
  mounted(el) {
    el.addEventListener('input', (e) => {
      e.target.value = e.target.value.replace(/[\D]/g, '')
    })
  }
})

// 한글만
app.directive('korean', {
  mounted(el) {
    el.addEventListener('input', (e) => {
      e.target.value = e.target.value.replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '')
    })
  }
})