디렉티브 (Directives)

: v- 접두사로 시작하며 Vue.js에서 엘리먼트에 사용되는 특별한 속성

Vue 인스턴스의 데이터와 DOM 요소를 연결하여 DOM이 반응적으로 동작할 수 있도록 한다.

• Vue.js의 핵심 기능 중 하나로, HTML과 JavaScript간의 강력한 상호작용을 제공한다.
• 디렉티브들을 사용해서 Vue.js 애플리케이션을 동적으로 만들 수 있다.

---

v-text

: 요소의 textContent 속성을 변경하는 디렉티브

• HTML 요소의 텍스트 내용을 Vue 인스턴스의 데이터로 동적으로 바인딩할 수 있다.
• HTML 요소 내의 텍스트가 Vue 데이터와 동기화되며 해당 데이터가 변경될 때마다 텍스트가 업데이트된다.

<!-- HTML -->
<div id="app">
  <p v-text="message"></p> <!-- data에 있는 message와 동적 바인딩 -->
</div>

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

---

v-html

: 요소의 innerHTML 속성을 변경하는 디렉티브
HTML 요소의 내용을 Vue 인스턴스의 데이터에 있는 HTML마크업으로 동적으로 바인딩할 수 있다.
= Vue 데이터 포함된 HTML 코드를 렌더링할 수 있다.

<!-- HTML -->
<div id="app">
  <p v-html="htmlContent"></p> <!-- data에 있는 htmlContent와 동적 바인딩 -->
</div>

// js
new Vue({
  el: '#app',
  data: {
    htmlContent: '<strong>이 텍스트는 강조됩니다.</strong>'
  }
})

하지만 v-html을 사용할 때는 보안상의 이슈에 주의해야 한다.
사용자 입력을 포함한 데이터를 v-html에 직접 삽입하는 경우, 크로스 사이트 스크립팅(XSS) 공격과 같은 보안 문제가 발생할 수 있으므로 신뢰할 수 없는 데이터를 사용할 때 조심해야 한다.

---

v-show

: 표현식의 truthy/falsy 값을 기반으로 엘리먼트를 보여주거나(display: visible) 숨기는(display: none) 디렉티브

• 조건에 따라 HTML 요소의 CSS 속성 중 display를 토글한다.

<!-- HTML -->
<div id="app">
  <p v-show="isVisible">이 요소는 조건이 true일 때만 표시됩니다.</p>
</div>

// js
new Vue({
  el: '#app',
  data: {
    isVisible: true // true일 때는 요소가 표시됨, false일 때는 숨김
  }
})

---

v-if

: 표현식의 truthy/falsy 값을 기반으로 엘리먼트를 렌더링하는 디렉티브

• 조건에 따라 HTML 요소를 동적으로 렌더링하고 DOM에서 제거한다. (조건부 렌더링)

<!-- HTML -->
<div id="app">
  <p v-if="isVisible">이 요소는 조건이 true일 때만 표시됩니다.</p>
</div>

// js
new Vue({
  el: '#app',
  data: {
    isVisible: true // true일 때는 요소가 표시됨, false일 때는 DOM에서 제거됨
  }
})

v-if와 v-show를 언제 사용해야하는가?

Vue.js conditional rendering: v-if vs. v-show

---

v-else-if

: v-if와 함께 조건부 렌더링을 구현하는 else if 역할을 하는 디렉티브

• 이전 형제 엘리먼트에 v-if 또는 v-else-if가 있어야 한다.
• <template>에서 텍스트 또는 여러 엘리먼트를 포함하는 조건부 블록을 나타내는 데 사용할 수 있다.

v-else

: v-if 또는 v-else-if 와 함께 조건부 렌더링을 구현하는 else 역할을 하는 디렉티브

• 이전 형제 엘리먼트에 v-if 또는 v-else-if가 있어야 한다.
• 표현식을 작성하지 않는다.

<!-- HTML -->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  A/B/C 가 아니야!
</div>

---

v-for

: 반복 가능한 데이터를 기반으로 엘리먼트 또는 <template> 블록을 여러 번 렌더링하는 디렉티브

• Vue.js에서 반복문을 구현하는 데 사용된다.
• Vue 인스턴스의 배열이나 객체와 같이 반복 가능한(iterable) 데이터를 기반으로 HTML 요소를 반복적으로 생성하고 렌더링할 수 있다.
• v-for 디렉티브는 반복문에서 현재값에 별칭(alias)을 제공하기 위해, 특수 문법인 alias in expression(표현식 내 별칭)을 사용해야 한다.

배열의 요소 반복

<!-- HTML -->
<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

// js
new Vue({
  el: '#app',
  data: {
    items: ['사과', '바나나', '체리', '딸기']
  }
})

객체의 속성 반복

• 객체의 key에 별칭을 지정할 수도 있다.

<!-- HTML -->
<div id="app">
  <ul>
    <li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
  </ul>
</div>

// js
new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Alice',
      age: 30,
      profession: 'Engineer'
    }
  }
})

---

v-on

: 엘리먼트에 이벤트 리스너를 연결하는 디렉티브

• 단축 문법 : @
• 인자(:)로 이벤트 타입을 전달해야 한다. v-on:[event]
• 사용자의 상호작용에 반응해 함수를 실행하거나 이벤트를 처리할 수 있다.

<!-- HTML -->
<div id="app">
  <button v-on:click="showMessage">클릭하세요</button>
  <!-- <button @click="showMessage">클릭하세요</button> 단축 문법 -->
</div>

// js
new Vue({
  el: '#app',
  methods: { // methods 객체에 함수를 정의할 수 있다.
    showMessage: function () {
      alert('버튼이 클릭되었습니다!');
    }
  }
})

수식어

• .stop - event.stopPropagation() 호출
• .prevent - event.preventDefault() 호출
• .capture - 캡처 모드로 이벤트 등록
• .self - 이벤트가 이 엘리먼트에서 전달된 경우에만 트리거 됨
• .{keyAlias} - 이벤트가 특정 키에 대해서만 트리거 됨
• .once - 이벤트가 한 번만 트리거 됨
• .left - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨
• .right - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨
• .middle - 마우스 중앙(휠 클릭) 버튼으로만 이벤트가 트리거 됨
• .passive - { passive: true } 옵션으로 DOM 이벤트를 등록
  더 많은 사용법 예시

<div id="app">
  <button @click.once="showMessage">한 번만 실행됩니다.</button>
</div>

---

v-bind

: 엘리먼트의 속성값을 동적으로 바인딩하는 디렉티브

• 단축 문법 : :
• Vue 데이터를 HTML 요소의 속성값으로 사용할 수 있다.
• v-bind 디렉티브는 다양한 HTML 속성에 사용할 수 있으며, href, src, alt, class, style, disable 등의 속성을 동적으로 설정할 수 있다.
  더 많은 사용법 예시

<!-- HTML -->
<div id="app">
  <a v-bind:href="url">Vue.js 공식 웹사이트</a>
  <!-- <a :href="url">Vue.js 공식 웹사이트</a> 단축 문법 -->
</div>

// js
new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

---

v-model

: 사용자 입력을 받는 form 엘리먼트 또는 컴포넌트에 양방향 바인딩을 만드는 디렉티브

• <input>, <select>, <textarea>, 컴포넌트에만 사용할 수 있다.
• 사용자의 입력을 받는 폼 요소와 Vue 인스턴스의 데이터를 양방향으로 바인딩하는 데 사용된다.
• v-model 디렉티브를 사용하면 입력된 데이터가 Vue 데이터와 동기화되며, 데이터가 변경될 때 입력 요소도 업데이트된다.

<!-- HTML -->
<div id="app">
  <input v-model="message" placeholder="메시지를 입력하세요">
  <p>입력한 메시지: {{ message }}</p>
</div>

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

위의 예시에서 message 데이터는 초기에 빈 문자열로 초기화되어 있고, 사용자가 <input> 요소에 텍스트를 입력하면 message 데이터와 자동으로 값이 동기화되며 입력한 내용이 화면(<p>)에 표시된다.

수식어

• .lazy - change 이벤트 대신 input 이벤트를 수신함 (사용자가 입력할 때마다 데이터가 업데이트되는 것이 아닌 사용자가 입력을 완료한 후에 데이터를 업데이트하고 싶을 때 사용)
• .number - 입력 문자열을 숫자로 변환하여 전달
• .trim - 사용자 입력의 공백을 트리밍

<div id="app">
  <input v-model.number="age" type="text" placeholder="나이를 입력하세요">
  <p>나이: {{ age }}</p>
</div>