Vue 지시어는 인터프리터와 컴파일러가 작업 중 입력을 처리하는 방법을 지정하여 Vue 템플릿 내의 HTML 태그의 기능을 강화합니다.
주어진 문장을 더 정교하게 렌더링할 수 있도록 허용해 주세요: Vue의 지시문은 애플리케이션 프레임워크 내에서 이벤트 리스너를 연결하는 등 다양한 작업을 수행할 수 있는 수단을 제공합니다. 지시문을 활용하려면 HTML 요소에 특정 속성을 추가합니다.
Vue 지시문의 구조
Vue에서 지시문의 활용은 표준 HTML 속성과 구별하는 역할을 하는 “v-” 접두사를 붙임으로써 표시됩니다. 이 명명법은 Vue 컴파일러에 속성이 지시어임을 나타내므로 지시어의 동작을 처리하고 HTML 요소에 쉽게 적용할 수 있습니다.
다음은 h2 태그의 콘텐츠를 표시하기 위해 “v-show” 속성을 활용하는 데모입니다:
<h2 v-show="true">Hello Vue</h2>
Vue.js는 데이터 바인딩, 조건부 렌더링 및 이벤트 처리와 같은 기능을 구현할 수 있는 v-bind, v-if, v-on과 같은 다양한 내재 지시문을 제공합니다.
Vue에서 사용자 지정 지시문 정의하기
사용자 지정 지시문은 두 가지 기본 프로세스를 수행하여 Vue.js 애플리케이션에서 설정할 수 있습니다. 처음에는 지시문이 로컬 또는 전역으로 등록됩니다. 그 후, 지시문의 기능은 라이프사이클 훅을 통해 정의됩니다.
사용자 정의 지시문 등록하기
Vue 지시문은 의도된 사용 범위에 따라 로컬 또는 전역으로 등록할 수 있습니다. 하지만 일반적으로 전체 Vue 애플리케이션에서 액세스할 수 있도록 지시문을 전역적으로 등록하는 것이 더 적절합니다.
복잡하지 않은 Vue 요소 내에서 사용자 지정 지시문을 활용하려는 경우 지역적으로 사용자 지정 지시문을 등록할 수 있습니다. 로컬에서 `v-changecolor` 지시문을 등록하는 방법을 알아보려면 다음을 참조하십시오:
<script setup>
const vChangecolor = {
mounted(el, binding, value) {},
};
</script>
<template>
<h2 v-changecolor>Learn about custom directives</h2>
</template>
이 코드 블록은 Vue 컴포넌트 내에 “v-changecolor”라는 사용자 지정 지시문을 등록하는 절차를 보여줍니다. 이 지시문은 camelCase의 엔티티로 설정되며, ‘changeColor’라는 이름이 지정됩니다.
특정 지시문이 애플리케이션 전체에 전역적으로 적용되도록 하려면 프로젝트 디렉토리 구조의 루트에 있는 main.js 파일에 해당 지시문의 정의를 추가해야 합니다.
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('changecolor', {
mounted(el, binding, vnode) {
}
})
app.mount('#app')
본 코드는 app.directive 메서드를 사용하여 범용 사용자 지정 태그를 등록합니다. 그런 다음 app.directive를 전화로 호출하여 유틸리티 내에서 변경 색상 지시문을 카탈로그화합니다.마지막으로 app.mount 함수를 사용하여 식별자를 통해 “앱”으로 식별되는 HTML 엔티티에 앱을 첨부합니다.
사용자 지정 지시어의 등록은 애플리케이션의 요구 사항에 따라 전역 또는 로컬로 수행할 수 있습니다.
지시어의 동작 정의
사용자 지정 지시어는 라이프사이클 훅이 포함된 객체 으로 정의할 수 있습니다. 이러한 라이프사이클 후크는 지시어의 동작을 정의하고 지시어가 바인딩된 요소를 수신합니다.
라이프사이클 후크는 컴포넌트 생성, DOM에 첨부, 업데이트 등 컴포넌트가 존재하는 다양한 단계를 포함합니다. 이러한 후크는 개발자가 각 단계에서 컴포넌트를 조작할 수 있는 다양한 기능을 제공합니다.
마운트된 수명 주기 훅을 활용하면 Vue.js에서 애플리케이션을 컴파일하고 마운트한 후 DOM(문서 객체 모델) 내에서 컴포넌트의 HTML 요소에 액세스할 수 있습니다. 반대로, 업데이트된 라이프사이클 훅을 사용하면 구조를 수정한 후 컴포넌트를 추가로 수정할 수 있습니다.
Vue 지시문은 여러 개의 라이프사이클 훅으로 정의할 수 있으며, 각 훅은 컴포넌트 라이프사이클의 특정 단계에 할당되는 객체 내에 캡슐화될 수 있습니다.
const directiveObject = {
mounted(el, binding, vnode) {
},
updated(el, binding, vnode) {
}
}
app.directive('changecolor', directiveObject)
추가 훅을 포함할 필요 없이 “마운트된” 및 “업데이트된” 라이프사이클 훅 모두에 대해 동일한 동작을 가진 사용자 지정 지시문을 포함할 수 있습니다. 또한, 생성되는 대부분의 사용자 정의 지시문에는 앞서 언급한 후크만 필요합니다.
특정 상황을 처리해야 하는 경우, 라이프사이클 훅이 장착된 객체 대신 지시어를 함수로 지정하는 것이 선호되는 경우가 많습니다.
app.directive('changecolor', (el, binding, vnode) => {
const message = 'Are you sure you want to change the color?'
el.addEventListener('click', () => {
if (confirm(message)) {
el.style.color = binding.value
|| "#" + Math.random().toString().slice(2, 8);
}
})
})
본 코드 세그먼트는 첫 번째 요소로 “변경 색상”을 지정하여 개인화된 글로벌 방향을 설정하고, 두 번째 구성 요소로 작용하는 해당 행위에 대한 간결한 기능적 정의를 설정합니다.
“v-changecolor” 지시어는 이 지시어가 추가되는 모든 컴포넌트의 색조를 수정합니다. 이 속성은 사용자가 시작한 작업에 따라 컴포넌트의 음영을 임의로 변경할 수 있습니다.
`el` 매개변수는 지시어에 바인딩된 HTML 요소를 나타내고 `binding` 매개변수는 지시어의 적용을 지정하는 속성으로 구성된 엔티티입니다. binding.value` 속성을 사용하면 Vue 앱을 생성할 때 미리 정의된 색상을 선택할 수 있습니다. vnode` 매개 변수는 요소와 관련된 Vue.js 가상 노드와 관련된 데이터를 보유합니다.
ChangeColor 지시어는 JavaScript 이벤트 리스너를 사용하여 HTML 요소를 클릭할 때 트리거되는 이벤트 발생을 감지합니다. 그런 다음 Confirm 메서드는 요소의 색상을 무작위로 변경하는 것에 대한 사용자 확인을 요청하는 대화 상자를 표시합니다.
<script setup>
import { ref } from 'vue';
const name = ref('Victor')
</script>
<template>
<div>
<h2 v-changecolor="'red'">Hello Vue</h2>
<h3 v-changecolor>Learn custom directives</h3>
<p>Can't Wait to Get Started {{ name }}</p>
</div>
</template>
<style>
div {
display: flex;
flex-direction: column;
gap: 0.8rem;
font-family: cursive;
align-items: center;
inline-size: 100%;
margin-block-start: 10%;
justify-items: center;
}
</style>
앞서 언급한 코드는 h3 태그를 무시한 채 h2 레이블에 진홍색 음영을 할당한다는 점에 유의하세요. 인터넷 브라우저에서 Vue 앱을 검사하면 다음과 같이 표시될 것으로 예상됩니다:
“Hello Vue” 및 “사용자 지정 지시문 배우기” 링크를 클릭하면
태그 내의 텍스트가 빨간색 음영으로 유지되는 반면 할당되지 않은
태그는 임의의 색조로 변경되는 것을 볼 수 있습니다.
추가 처리를 위해 제공된 옵션 중 하나를 선택하세요.
Vue의 사용자 정의 기능 활용
지시문은 DOM(문서 객체 모델)에 대한 낮은 수준의 액세스 권한을 얻는 방법을 제공하여 개발자가 Vue 애플리케이션 내에서 교차 구성 요소 기능을 구현하여 프로그램의 전반적인 확장성을 높일 수 있도록 합니다. 이 글에 설명된 지침에 따라 소프트웨어 개발 프로세스를 간소화하는 개인화된 지시문을 만들 수 있습니다.
Vue의 최신 버전인 버전 3.3에는 애플리케이션의 적응성과 재사용 가능성을 높여주는 몇 가지 향상된 기능이 포함되어 있습니다. 이러한 개선 사항을 파악하면 코딩 능력을 더 높은 수준으로 연마하는 데 도움이 될 것입니다.