반응형
서론
화면을 개발하다보면 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이지만 어떻게 선언하고 어떻게 사용하는게 좋은지는 매번 고민된다. 개발하면서 매일 고민하여 최적화를 정리하도록 하자
반응형
'vue.js > vue.js 기능' 카테고리의 다른 글
[VUE] router - history에 따른 scroll 제어를 위한 scrollBehavior 사용법 (0) | 2023.06.08 |
---|---|
[vue.js] e-commerce(쇼핑몰) 기반으로 만들어보는 router 정리 (0) | 2023.03.09 |
[vue.js] CORS 해결 방법 (0) | 2022.07.28 |
[vue.js] npm audit 을 확인하여 취약점 해결방법 (0) | 2022.07.12 |
[vue.js] object 데이터 빈값 체크하여 버튼 disabled 제어 (0) | 2022.07.05 |