[VUE] 공통 directives 정리 및 선언(가격 3자리 콤마 - 계속 추가 예정)

서론

화면을 개발하다보면 input영역에 자주쓰는 포맷이 있다. 이부분을 매번 filter나 methods를 이용하여 하기보단 direc이부분을 공통 directives 만들어서 사용하고자 하여 공부하는겸 정리한다.

directives 란

디렉티브는 v-접두사가 있는 특수 속성이다. 그대로 직역하면 '지시'를 뜻한다.


기본적으로 vue에서 제공하는 directive가 있다.

v-text
v-html
v-show
v-if
v-on
v-bind
v-model
등등 있지만 사용자가 직접 지정하여 만들수도 있다.

아래에는 숫자 입력시 3자리 마다 ',' 를 넣어주어 가격 부분에 보기 좋게 해주는 사용자 지정 directive를 만들어보겠다.

CASE1. JS import

 

comm-utils.js

export default {
    directives: {
        money: {
            created(el) {
                el.addEventListener("input", (e) => {
                    const trim = e.target.value.trim().replaceAll(',','');
            		const regex = new RegExp(/^[0-9]+$/);
            		e.target.value = regex.test(trim) ? trim.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '';
                })
            }
        }
    }
}

 

test.vue

<template>
  <div>
    <input v-money v-model="money">
  </div>
</template>

<script>
import commUtils from '@/js/comm-utils';
export default {
  mixins: [commUtils],
  data() {
    return {
      money: ""
    }
  },
}
</script>

 
* 공통 js 를 생성하고 사용할 페이지에서 import 후 사용한다.
장점 : 여러개의 direcvite 사용 가능
단점 : 각 페이지에서 매번 import 해야함

CASE2. main.js

 

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);

app.directive('money', {
    created(el) {
        el.addEventListener("input", (e) => {
            const trim = e.target.value.trim().replaceAll(',','');
            const regex = new RegExp(/^[0-9]+$/);
            e.target.value = regex.test(trim) ? trim.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '';
        })
    },
});
app.mount('#app')

test.vue

<template>
  <div>
    <input v-money v-model="money">
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: ""
    }
  },
}
</script>

 
* main.js에서 사용할 directvice를 선언한다.
장점 : 전역으로 사용가능
단점 : 공통 js를 한번에 directive 할수 없음. - 다른 선언 방식이 있을것으로 보임
 
 
 

결론

자주 사용하는 format이지만 어떻게 선언하고 어떻게 사용하는게 좋은지는 매번 고민된다. 개발하면서 매일 고민하여 최적화를 정리하도록 하자