디렉티브(Directives)

디렉티브란

디렉티브는 v- 접두사가 있는 특수 속성

컴포넌트에게 작동을 지시하는 지시문의 역할

디렉티브의 종류

종류가 다양한데 자주 사용되는 일부만 알아보면

 

v-text

요소의 textContent를 업데이트 한다

<template>
  <div id="app">
    <p v-text="message"></p>
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    message: '안녕하세요!'
  }
})

v-bind

요소의 속성을 동적으로 바인딩하는데 사용.

예를 들어, HTML 요소의 href, class, style 등을 동적으로 설정할 수 있음.

<template>
  <div id="app">
    <a v-bind:href="url">링크</a>
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    url: 'https://www.example.com'
  }
})

 

또한 값을 동적으로 설정할수도 있는데

<div v-bind:class="{ active: isActive }"></div>

<div v-bind:class="{ active: isActive, active2: !isActive }"></div>

 

이런 방식으로 사용 시 isActive가 true이면 active 클래스가 적용되고, false면 제거

아래는 true면 active 클래스가 적용되고 false면 active2 클래스가 적용되는 코드

v-model

폼 입력 요소와 애플리케이션 데이터를 양방향으로 바인딩 한다.

입력 요소의 값이 변경되면 Vue 인스턴스의 데이터도 업데이트되고, 그 반대도 마찬가지.

<template>
  <div id="app">
    <input type="text" v-model="message">
    <p>입력한 메시지: {{ message }}</p>
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

 

위 Vue 인스턴스에서 message 데이터를 선언하고 초기값을 빈 문자열로 설정함. 

이제 브라우저에서 입력 필드에 값을 입력하면 입력된 값이 실시간으로 Vue 인스턴스의 message 데이터에 반영되고

동시에 해당 값이 <p> 요소에 표시됨.

v-if, v-else-if, v-else

조건부 렌더링을 구현.

조건에 따라 요소를 렌더링하거나 숨김.

<div v-if="isTrue">참일 때 보이는 내용</div>
<div v-else>거짓일 때 보이는 내용</div>

v-for

배열이나 객체의 각 항목을 반복하여 요소를 렌더링.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-on

이벤트 리스너를 추가.

사용자의 이벤트에 응답하여 메소드를 호출하거나 표현식을 실행할 수 있음.

<template>
  <div id="app">
    <button v-on:click="handleClick">클릭</button>
  </div>
<template>

new Vue({
  el: '#app',
  methods: {
    handleClick: function () {
      alert('버튼이 클릭되었습니다!');
    }
  }
})

v-show

조건에 따라 요소를 보이거나 숨깁니다. v-if와는 달리 요소를 DOM에서 제거하지 않고 CSS를 사용하여 표시 여부를 제어합니다.

<div v-show="isVisible">보이거나 숨길 내용</div>

 

v-once

요소와 하위 요소의 초기 데이터 바인딩이 한 번만 수행되도록 합니다. 이후에는 데이터 변경에 따른 업데이트를 수행하지 않습니다.

<template>
  <div id="app">
    <p v-once>{{ title }}</p>
    <p>{{ sayHello() }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: '안녕 VueJS!',
    };
  },
  methods: {
    sayHello: function () {
      this.title = "안녕하십니까!"
      return this.title
    }
  }
};
</script>

 

가령 이 코드에서 v-once를 사용하지 않으면 sayHello 함수가 실행되면서 title도 안녕하십니까 로 표기하는데

v-once 속성을 추가하면 title은 초기값 그대로 안녕 VueJS! 를 유지하고 sayHello() 결과만 안녕하십니까로 출력

v-clock

Vue 애플리케이션이 로드될때 Vue 인스턴스가 초기화되기 전까지 화면에 보이지 않도록 하는데 사용됨

주로 Vue 애플리케이션의 초기 로딩 시 화면 깜빡임 방지, 스타일이 적용되기 전까지 컴포넌트 숨김

css와 함께 사용함

<template>
  <div v-cloak>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue 애플리케이션이 로드될 때까지 이 텍스트는 보이지 않습니다.'
    };
  }
};
</script>

<style scoped>
/* v-cloak 디렉티브를 사용할 스타일 */
[v-cloak] {
  display: none;
}
</style>

v-html

html 코드 자체를 data로 선언하고 싶을때 사용하는 디렉티브

<template>
  <div id="app">
    <p v-html="htmlContent"></p>
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    htmlContent: '<strong>이것은 강조된 텍스트입니다.</strong>'
  }
});

 

단 v-html 사용시 XSS공격에 취약해진다고 한다