vue.js v- 접두어가 붙어 있는 속성, 디렉티브

디렉티브

디렉티브는 Vue에서 제공하는 특수 속성으로 v- 접두어가 붙어있으며 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 다양한 상황에서 DOM 요소의 행동을 제어하고, 렌더링을 최적화하는 데 사용됩니다. 

Vue.js는 여러 내장 디렉티브를 제공하며, 사용자 정의 디렉티브를 생성하는 것도 가능합니다.

기본적으로 내장 되어 있는 디렉티브는 v-bind, v-model, v-if(v-else-if, v-else), v-for, v-on, v-text, v-html, v-show, v-slot, v-pre, v-once 등이 있습니다.

 

1. 내장 디렉티브

1) v-bind

Vue 인스턴스의 데이터 속성을 DOM 요소의 속성에 연결합니다. 이를 통해 동적으로 DOM 요소의 속성을 변경할 수 있습니다. 예를 들어, v-bind:href="url"는 href 속성을 Vue 인스턴스의 url 속성에 바인드합니다.

<script>
// Vue 인스턴스를 생성합니다.
new Vue({
  el: '#app',
  data: {
    // Vue 인스턴스의 데이터 속성을 정의합니다.
    url: 'https://www.google.com'
  }
})
</script>

<div id="app">
  <!-- 'v-bind:href'를 사용하여 Vue 인스턴스의 'url' 데이터 속성을 <a> 태그의 'href' 속성에 바인딩합니다. -->
  <a v-bind:href="url">Google</a>
</div>

 

 

2) v-model

양방향 데이터 바인딩을 생성하는데 사용됩니다.이는 DOM 요소의 값과 Vue 인스턴스의 데이터 속성 사이에서 자동 동기화를 유지합니다. 주로 form 입력과 textarea에 사용됩니다. 이 예제에서는 입력 필드의 값을 Vue 인스턴스의 message 속성과 동기화하고 있습니다.

<script>
new Vue({
  el: '#app',
  data: {
    // 초기 메시지는 빈 문자열입니다.
    message: ''
  }
})
</script>

<div id="app">
  <!-- 'v-model'를 사용하여 입력 필드와 'message' 데이터 속성 사이에 양방향 바인딩을 생성합니다. -->
  <input v-model="message" placeholder="Enter a message">
  <!-- 입력된 메시지를 표시합니다. -->
  <p>Message is: {{ message }}</p>
</div>

 

3) v-if, v-else-if, v-else

조건부 렌더링을 제어하는데 사용됩니다. 즉, 조건에 따라 특정 요소를 화면에 표시하거나 숨길 수 있습니다. v-if는 조건이 참일 때 요소를 표시하고, v-else-if는 추가적인 조건을 제공하며, v-else는 위의 모든 조건이 거짓일 때 요소를 표시합니다.

<script>
new Vue({
  el: '#app',
  data: {
    // 등급을 설정합니다.
    grade: 'B'
  }
})
</script>

<div id="app">
  <!-- 'v-if' 디렉티브를 사용하여 조건에 따라 특정 요소를 표시합니다. -->
  <p v-if="grade === 'A'">Excellent</p>
  <!-- 'v-else-if' 디렉티브를 사용하여 추가 조건을 추가합니다. -->
  <p v-else-if="grade === 'B'">Good</p>
  <!-- 'v-else' 디렉티브를 사용하여 위의 조건이 모두 실패할 경우 표시할 요소를 지정합니다. -->
  <p v-else>Poor</p>
</div>

 

 

4) v-for

배열 또는 객체의 항목을 기반으로 요소 또는 컴포넌트를 반복하는데 사용됩니다. 이 예제에서는 items 배열의 각 항목에 대해 <li> 요소를 생성하고 있습니다.

<script>
new Vue({
  el: '#app',
  data: {
    // 배열을 정의합니다.
    items: ['Apple', 'Banana', 'Cherry']
  }
})
</script>

<div id="app">
  <ul>
    <!-- 'v-for' 디렉티브를 사용하여 배열의 각 항목에 대해 <li> 요소를 생성합니다. -->
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

 

5) v-on

이벤트 리스너를 추가하는데 사용됩니다. 예를 들어, v-on:click="doSomething"는 클릭 이벤트가 발생하면 doSomething 메소드를 실행합니다. 이 예제에서는 버튼 클릭 이벤트를 감지하고, 클릭 이벤트가 발생하면 sayHello 메서드를 실행하도록 설정하고 있습니다.

<script>
new Vue({
  el: '#app',
  methods: {
    // 메서드를 정의합니다.
    sayHello: function () {
      alert('Hello!');
    }
  }
})
</script>

<div id="app">
  <!-- 'v-on:click'를 사용하여 클릭 이벤트에 메서드를 연결합니다. -->
  <button v-on:click="sayHello">Say Hello</button>
</div>

 

 

6) v-text

요소의 textContent를 업데이트합니다.

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

<div id="app">
  <!-- 'v-text' 디렉티브를 사용하여 요소의 텍스트를 동적으로 업데이트합니다. -->
  <span v-text="message"></span>
</div>

 

7) v-html

요소의 innerHTML를 업데이트합니다.

<script>
new Vue({
  el: '#app',
  data: {
    message: '<b>Hello, Vue!</b>'
  }
})
</script>

<div id="app">
  <!-- 'v-html' 디렉티브를 사용하여 요소의 HTML을 동적으로 업데이트합니다. -->
  <span v-html="message"></span>
</div>

 

8) v-show

조건에 따라 요소의 표시 여부를 제어합니다. 이 디렉티브는 display CSS 속성을 조절하여 작동합니다.

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
})
</script>

<div id="app">
  <!-- 'v-show' 디렉티브를 사용하여 'isVisible' 값에 따라 요소의 표시 여부를 제어합니다. -->
  <span v-show="isVisible">Now you see me!</span>
</div>

 

9) v-slot

슬롯의 이름을 지정하거나 슬롯 props를 받는 데 사용됩니다.

<!-- 'MyComponent'라는 컴포넌트가 있고, 'header'라는 슬롯이 있다고 가정합니다. -->

<my-component>
  <!-- 'v-slot' 디렉티브를 사용하여 슬롯의 이름을 지정합니다. -->
  <template v-slot:header>
    <h1>Page Title</h1>
  </template>
</my-component>

 

 

10) v-pre

컴파일 과정에서 요소와 그 자식 요소의 컴파일을 건너뛰게 합니다. 이는 정적 내용의 성능을 향상시키는 데 사용됩니다.

<div id="app">
  <!-- 'v-pre' 디렉티브를 사용하여 컴파일을 건너뛰며, 이 요소 내부의 모든 문자열은 그대로 표시됩니다. -->
  <span v-pre>{{ this will not be compiled }}</span>
</div>

 

11) v-once

요소와 모든 자식 요소를 한 번만 렌더링하고 이후 변경을 무시합니다. 이는 정적 컨텐츠를 최적화하는 데 유용합니다.

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

<div id="app">
  <!-- 'v-once' 디렉티브를 사용하여 요소를 한 번만 렌더링하고 이후 변경을 무시합니다. -->
  <span v-once>{{ message }}</span>
</div>

이 코드에서 message 데이터 속성을 변경하더라도, v-once 디렉티브가 있는 요소의 내용은 변경되지 않습니다.

 

 

2. 사용자 정의 디렉티브

Vue.js에서는 사용자 정의 디렉티브를 만들 수 있습니다. 이를 통해 재사용 가능한 로직을 캡슐화하거나, 특정 요소에 고유한 동작을 추가할 수 있습니다.

사용자 정의 디렉티브는 전역 또는 로컬로 등록될 수 있으며, 다음과 같이 생성합니다.

1) 전역 사용자 정의 디렉티브

Vue.directive('focus', {
  // 요소가 DOM에 삽입될 때 실행됩니다.
  inserted: function(el) {
    // 'focus'는 이 디렉티브가 바인딩된 요소에 직접적으로 접근합니다.
    el.focus();
  }
});

 

 

2) 로컬 사용자 정의 디렉티브

new Vue({
  el: '#app',
  directives: {
    focus: {
      inserted: function(el) {
        el.focus();
      }
    }
  }
});

 

이렇게 정의된 사용자 정의 디렉티브는 HTML 템플릿에서 다음과 같이 사용할 수 있습니다.

<input v-focus>