Vue.js는 사용자 인터페이스를 만들기 위한 프론트엔드 프레임워크입니다. 디렉티브와 필터는 Vue.js에서 매우 유용한 기능이며, 이 포스트에서는 디렉티브와 필터의 사용법에 대해 설명하겠습니다.
디렉티브 (Directives)
디렉티브는 Vue.js에서 DOM 요소에 적용되는 특수 속성입니다. 디렉티브를 사용하면 DOM 요소의 동작이나 외관을 동적으로 제어할 수 있습니다. 다음은 Vue.js에서 자주 사용되는 몇 가지 디렉티브입니다.
v-bind
v-bind 디렉티브를 사용하여 DOM 요소의 속성을 동적으로 바인딩할 수 있습니다. 예를 들어, 다음 코드는 href 속성을 Vue 인스턴스의 url 데이터와 바인딩합니다.
<a v-bind:href="url">Click me</a>
v-model
v-model 디렉티브를 사용하여 폼 입력 요소와 Vue 인스턴스의 데이터를 양방향으로 바인딩할 수 있습니다. 예를 들어, 다음 코드는 입력 필드와 Vue 인스턴스의 message 데이터를 바인딩합니다.
<input v-model="message" type="text">
<p>{{ message }}</p>
v-if / v-show
v-if와 v-show 디렉티브를 사용하여 조건부로 DOM 요소를 렌더링할 수 있습니다. v-if는 조건이 참일 때 요소를 렌더링하고, v-show는 요소를 숨기거나 표시합니다. 예를 들어, 다음 코드는 showMessage가 참일 때 메시지를 표시합니다.
<p v-if="showMessage">Hello, Vue.js!</p>
필터 (Filters)
필터는 Vue.js에서 텍스트 형식을 변경하거나 포맷하는 데 사용되는 함수입니다. 필터는 Mustache 보간법({{}}) 안에서 파이프( |
) 문자를 사용하여 적용됩니다. 다음은 Vue.js에서 자주 사용되는 필터의 예입니다. |
uppercase
uppercase 필터는 문자열을 대문자로 변환합니다.
<p>{{ message | uppercase }}</p>
currency
currency 필터는 숫자를 특정 통화 형식으로 포맷합니다. 이 필터는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 통화 기호이고, 두 번째 매개변수는 소수점 자릿수입니다.
<p>{{ price | currency('$', 2) }}</p>
결론
Vue.js에서 디렉티브와 필터를 사용하면 강력한 UI를 만들고 데이터를 다룰 수 있습니다. 이 포스트에서는 v-bind, v-model, v-if, v-show 디렉티브와 uppercase, currency 필터의 사용법에 대해 알아보았습니다. Vue.js 공식 문서에서 더 많은 디렉티브와 필터에 대해 자세히 알아볼 수 있습니다.