vue.js - 템플릿 문법 - Directive

Directive(디렉티브)란

• 디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 중 v-for을 제외한 단일 javascript 표현식입니다.
• 디렉티비의 역할은 표현식 값이 변경될 때마다 DOM에 반응적으로 적용하는 것입니다.
• 모든 디렉티브 속성을 확인하고 싶다면, https://vuejs.org/v2/api/#directives

예시)

<div id="app">
  <h1 v-if="seen"> True </h1>
  <h1 v-else> False </h1>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    seen: true,
  }
})
</script>

code pen

전달인자

• 일부 디렉티브는 콜론으로 표시되는 전달인자를 사용할 수 있습니다.
• 예로, v-bind 디렉티브는 반응적으로 HTML을 갱신하는데 사용합니다.

<div id="vbind">
  <a v-bind:href="url">v-bind 예제입니다</a>
</div>
<script>
var vbind = new Vue({
  el: '#vbind',
  data: {
    url: "https://grayhacker91.github.io/vue/vuejs_3/",
  }
})
</script>

code pen

• DOM 이벤트를 수신하는 디렉트비는 v-on 디렉티브입니다.

<a v-on:click="something Function">...</a>

수식어

• 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다.
• .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on디렉티브에게 알려줍니다.

<form v-on:submit.prevent="onSubmit"> ... </form>

약어

• v- 접두사는 Vue의 특정 속성을 식별하기 위한 문자입니다.
• 하지만, 자주 사용되는 디렉티브에 대해서는 불편하게 느낄 수 있어 v-bind, v-on 두 개의 디렉티브에 대해 약어를 제공합니다.
• v-bind는 v-bind를 지우고 콜론만 남긴 형태이며, v-on은 v-on을 지우고 콜론은 @으로 바꿔서 표현됩니다.

<!-- v-bind 전체 -->
<a v-bind:href="url"> ... </a>
<!-- v-bind 약어 -->
<a :href="url"> ... </a>

<!-- v-on 전체 -->
<a v-on:click="doSomething"> ... </a>
<!-- v-on 약어 -->
<a @click="doSomething"> ... </a>

ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.

참고

• https://vuejs.org/v2/guide/syntax.html#Directives