[Vue] 상수 사용

// constants.js
export default Object.freeze ({
    HELLO: '안녕하세요.',
    BYE: '안녕히가세요.'
})

위와 같이 상수를 모아둔 파일을 만든다.

import Constants from './constants';
 
export class Content extends Vue {
    private Constants: object = Constants;
}

Constants를 html 템플릿에서 알아보지 못해서

위와 같이 private Constants 객체를 내부에 선언을 해주었다.

<div>
    <div>{{Constants.HELLO}}</div>
 
    <input type="text" v-bind:placeholder="Constants.BYE" />    
    <input type="text" :placeholder="Constants.BYE" />
</div>

html 템플릿에서는 위와 같이 사용한다.

placeholder와 같이 엘리먼트의 속성에 사용할 때는 v-bind를 사용한다.

v-bind는 생략할 수 있으며 생략한 :placeholder와 v-bind:placeholder는 같은 기능을 한다.

이렇게 하면 상수들을 한 곳에서 관리할 수 있다.