[Vue] 기본 디렉티브

1. v-text, v-html 디렉티브

• v-text , {{ }}

  • innerText 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남.

• v-html

  • innerHtml 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄.
  • XSS 공격 등에 취약하여 꼭 필요한 경우가 아니면 v-text 를 사용하는걸 추천.

2. v-bind 디렉티브

Element의 콘텐츠 영역(시작태그와 종료태그 사이의 영역)을 설정하는 것이 아닌 요소 객체의 속성들을 바인딩하기 위해 사용

<img v-bind:src="imagePath" />

아래처럼 v-bind:src에서 v-bind를 생략하고 :src 와 같이 작성해도 됨.

<img :src="imagePath" />

3. v-model 디렉티브

1,2 번의 디렉티브들은 모두 단방향 디렉티브이다. HTML 요소에서 값을 변경하더라도 모델 객체의 값이 바뀌지 않는다.

화면에서 변경한 값이 모델 객체에 반영되기를 원할 경우, 즉 양방향 바인딩을 원할 경우에는 v-model 디렉티브를 사용해야 한다.

v-model 디렉티브는 텍스트 박스 뿐만 아니라 여러가지 입력 폼 필드에서도 사용할 수 있다.

 <div>
    <label><input type="checkbox" value="서울" v-model="checkedList"/> 서울</label>
    <label><input type="checkbox" value="부산" v-model="checkedList"/> 부산</label>
    <label><input type="checkbox" value="제주" v-model="checkedList"/> 제주</label>
    <br>
    <span>체크한 지역: {{ checkedList }}</span>
 </div>
 
 <div>
    <label><input type="radio" v-bind:value="radioValue1" v-model="picked"/> 서울</label>
    <label><input type="radio" v-bind:value="radioValue2" v-model="picked"/> 부산</label>
    <label><input type="radio" v-bind:value="radioValue3" v-model="picked"/> 제주</label>
    <br>
    <span>선택한 지역: {{ picked }}</span>
 </div>
 
<select v-model="selectedValue" @change="changeSelect">
      <option value="서울">서울</option>
      <option value="부산">부산</option>
      <option value="제주">제주</option>
</select>

... (생략) 

export default {
  name: "DataBinding",
  components: {},
  data() {
    return {
      checkedList: [],
      picked: '',
      radioValue1: '서울',
      radioValue2: '부산',
      radioValue3: '제주',
      selectedValue: '',
    }
  },
    

여러개의 아이템을 선택할 수 있는 <input type="checkbox" /> 나 <select multiple></select> 의 경우는 모델 객체의 배열 객체와 연결되고,
단일 아이템만을 선택할 수 있는 <input type="radio" /> 나 <select></select> 의 경우는 모델 객체의 단일값과 연결된다.

v-model 디렉티브는 몇가지 수식어 (Modifier)를 지원한다. 수식어는 디렉티브에 특별한 기능을 추가하는 Vue.js 디렉티브의 문법 요소이다.
v-model 디렉티브에서 사용할 수 있는 수식어는 다음과 같다.

• lazy : 입력폼에서 이벤트가 발생할 때 입력한 값을 데이터와 동기화한다. 텍스트 박스에서라면 입력 후 포커스가 이동하거나 할 때 데이터 옵션 값이 변경됨
  • 예: <input type="text" v-model.lazy="name"/>
• number : 이 수식어를 지정하면 숫자가 입력될 경우 number 타입의 값으로 자동 형변환되어 데이터 옵션값으로 반영됨
• trim: 이 수식어를 지정하면 문자열의 앞뒤 공백을 자동으로 제거

3. v-show, v-if, v-else, v-else-if 디렉티브

이름에서와 알 수 있듯이, 위 디렉티브들은 Vue객체의 data 속성 값에 따라 렌더링 여부를 결정할 수 있는 기능이다.

v-show, v-if 차이점

실제 렌더링 여부에 있다.
v-if 디렉티브는 조건에 부합되지 않으면 렌더링을 하지 않고,
v-show 디렉티브는 일단 HTML 요소를 렌더링 한 후에 disply 스타일 속성으로 화면에 보여줄지 말지 여부를 결정한다. (보여주지 않을 경우 display 스타일 속성을 none으로 설정)

그러므로, 자주 화면이 변경되는 부분에 대해서는 v-if 디렉티브 보다는 v-show 디렉티브를 사용하는 것이 바람직하다.

4. 반복 렌더링 디렉티브

반복적인 데이터를 렌더링하기 위해서 v-for 디렉티브를 사용한다.
v-for 구문은 원본 데이터가 어떤 형식인지에 따라 사용법이 조금씩 달라질 수 있다.

    <tr :key="i" v-for="(product, i) in productList">
      <td>{{ i + 1 }}</td>
      <td>{{ product.product_name }}</td>
      <td>{{ product.price }}</td>
      <td>{{ product.category }}</td>
      <td>{{ product.delivery_price }}</td>
    </tr>
    
 export default {
  name: "DataBinding",
  components: {},
  data() {
    return {
      productList: [
        {"product_name": "기계식키보드", "price": 25000, "category": "악세서리", "delivery_price": 5000},
        {"product_name": "무선마우스", "price": 35000, "category": "악세서리", "delivery_price": 5000},
        {"product_name": "아이패드", "price": 45000, "category": "노트북/태블릿", "delivery_price": 5000},
        {"product_name": "태블릿거치대", "price": 55000, "category": "악세서리", "delivery_price": 5000}
      ],
    }
  }, 

혹시 여러 요소의 그룹을 반복 렌더링하려면, <template> 태그를 사용하면 된다.
<template> 태그는 렌더링 내용에 포함되지 않고, 단지 요소들을 그룹으로 묶어주기 위한 용도로만 사용된다.

    <template :key="i" v-for="(product, i) in productList">
      <tr>
        <td>{{ i + 1 }}</td>
        <td>{{ product.product_name }}</td>
        <td>{{ product.price }}</td>
        <td>{{ product.category }}</td>
        <td>{{ product.delivery_price }}</td>
      </tr>
      <tr class="divider" v-if="i % 2 === 1">
        <td colspan="5"></td>
      </tr>
    </template>

스타일에는 .divider {height: 2px; background-color: gray;} 추가

5. 기타 디렉티브

1) v-pre 디렉티브

v-pre 디렉티브는 HTML 요소에 대한 컴파일을 수행하지 않는다.

<span v-pre> {{message}} </span>

v-pre를 사용하지 않았다면 Mustach 표현식( {{ }} )을 사용해 message 속성의 값이 화면에 바인딩되어 나타나겠지만,
v-pre 디렉티브로 인해 Vue 객체는 컴파일하지 않고 {{message}} 문자열을 그대로 출력한다.
이렇게 템플릿 문자열을 컴파일하지 않고 그대로 내보내기 위해 v-pre를 사용한다.

2) v-once 디렉티브

v-once 디렉티브는 HTML 요소를 단 한번만 렌더링하도록 설정한다.

<span v-once>{{message}}</span>

처음 한 번만 렌더링을 수행하기 때문에, Vue 인스턴스의 데이터를 변경하더라도 다시 렌더링을 수행하지 않는다.
초깃값이 주어지면 변경되지 않는 UI를 만들때 사용할 수 있다.

3) v-cloak 디렉티브

가끔 v-for 디렉티브를 이용해 많은 데이터를 출력하거나 할 때에 Mustach 표현식이 화면에 일시적으로 나타나는 경우가 있다.
이것은 Vue 인스턴스가 el 옵션의 템플릿을 컴파일할 때 발생생하는 시간 때문에 일어나는 현상이다. 복잡한 UI일수록 이런 경우가 빈번하게 발생하낟.

이와 같은 경우 사용할 수 있는 디렉티브가 v-cloak 이고, 화면 초기에 컴파일되지 않은 템플릿은 나타내지 않도록 할 수 있다.