SeouliteLab

[Vue.js] Vue 애플리케이션에서 커스텀 디렉티브를 등록하는 app.directive() 메서드 이해하기 본문

카테고리 없음

[Vue.js] Vue 애플리케이션에서 커스텀 디렉티브를 등록하는 app.directive() 메서드 이해하기

Seoulite Lab 2024. 4. 25. 08:08

Vue.js에서는 DOM 요소에 특별한 동작을 적용하기 위해 커스텀 디렉티브를 등록할 수 있습니다. 이를 가능하게 하는 메서드가 바로 app.directive() 메서드입니다. 이를 통해 Vue 애플리케이션에서 원하는 기능을 가진 커스텀 디렉티브를 생성하고 적용할 수 있습니다.

app.directive() 메서드란?

app.directive() 메서드는 Vue 애플리케이션에서 커스텀 디렉티브를 등록하는 데 사용됩니다. 디렉티브는 DOM 요소에 특정 동작이나 기능을 부여하거나 엘리먼트의 스타일을 변경하는 등의 작업을 수행할 수 있습니다.

예제

아래는 app.directive() 메서드를 사용하여 간단한 커스텀 디렉티브를 등록하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 커스텀 디렉티브 등록 예제</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app">
  <input v-uppercase />
</div>

<script>
  const app = Vue.createApp({});

  // 커스텀 디렉티브 등록
  app.directive('uppercase', {
    mounted(el) {
      el.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
      });
    }
  });

  // 애플리케이션을 #app 요소에 마운트
  app.mount('#app');
</script>

</body>
</html>

위 예제에서는 다음과 같은 작업을 수행합니다.

  1. createApp() 메서드를 사용하여 Vue 애플리케이션을 생성합니다.
  2. app.directive() 메서드를 사용하여 커스텀 디렉티브를 등록합니다. 이때 첫 번째 인자는 디렉티브의 이름을 나타내는 문자열이며, 두 번째 인자는 디렉티브의 동작을 정의하는 객체입니다.
  3. 등록된 디렉티브를 Vue 애플리케이션에서 사용합니다. 위 예제에서는 입력 필드에 값을 입력할 때마다 입력된 값을 대문자로 변환하는 기능을 가진 v-uppercase 디렉티브를 사용합니다.
저작자표시 비영리 변경금지