Template Syntax

• v-text
• v-html
• v-show
• v-if, v-else-if, v-else
• v-for
• v-on
• v-bind
• v-model
• v-pre
• v-cloak
• v-once

```html
<template>
  <div>
    <!-- 보간법 : 데이터바인딩 1 -->
    <div>{{msg}}</div>

    <!-- 위 보간법과 동일한 결과 : 데이터바인딩 2 -->
    <div v-text="msg"></div>

    <!-- 담고 싶은 데이터를 string이 아닌 html형식으로 출력함. -->
    <div v-html></div>

    <!-- ok 값이 true이면 영역이 노출되고, false이면 style="display:none"으로 가려짐. -->
    <div v-show="ok">{{msg}}</div>

    <!-- who 값에 맞는 데이터를 노출함(조건에 맞지 않은 영역은 DOM에 포함되지 않음.) -->
    <div v-if="who == 'girl'">영희</div>
    <div v-else-if="who == 'boy'">철수</div>
    <div v-else>바둑이</div>

    <!-- 배열의 길이만큼 값을 뿌려줌. value, key, index의 값을 사용할수 있음. -->
    <!-- v-for와 v-if가 함께 사용될때, v-for의 우선순위가 높음. -->
    <!-- 2.2.0 이상에서 v-for는 key 가 필수 -->
    <ul>
      <li v-for="(fruit, key, index) in fruits" :key="index">{{fruit}}</li>
    </ul>

    <!-- 이벤트를 사용할때, v-on를 사용. 약어는 @ -->
    <!-- 키보드 및 마우스 이벤트 모두 정의 가능 -->
    <!-- 이벤트의 수식어를 사용할 수 있음. -->
    <!-- 사용자 이벤트를 호출할 수 있음. -->
    <button v-on:click="message()"></button>
    <button @click="message()"></button>
    <!-- //약어사용-->
    <button v-on:click.prevent="message()"></button>
    <button v-on:message="getMessage()"></button>

    <!-- data속성에 바인딩함. 또는 하위 컴포넌트에 데이터를 전달할 때 사용, 약어는 : -->
    <div v-bind:class="classes">{{msg}}</div>
    <div :class="classes">{{msg}}</div>

    <!-- form 요소(input, select, textarea)와 components에 사용되며, data를 양방향으로 서로 주고받음. -->
    <input type="text" v-model="value" />

    <!-- 이 엘리먼트와 모든 자식 엘리먼트에 대한 컴파일을 건너 뜀 -->
    <div v-pre>{{이 부분은 컴파일 되지 않습니다}}</div>

    <!-- v-cloak은 어떠한 css 스타일을 정의되었을 때, Vue인스턴스가 컴파일이 완료되기 전까지만
        v-cloak를 처리함. 그 이후에는 해지됨. -->
    <!--// css -->
    [v-cloak] { display:none; }
    <div v-cloak></div>

    <!-- v-once는 한번만 렌더링됨. 추후 변경사항에 대한 반영이 되지 않음. -->
    <!-- 아래예제에서 pineapple값을 추가하여도, 목록에 추가되지 않음. -->
    <ul>
      <li v-for="fruit in fruits" v-once>{{fruit}}</li>
    </ul>
    <button @click="appFruit()">Click</button>
  </div>
</template>
```

export default {
  data: function() {
    return {
      msg: "Hello World!!",
      ok: true,
      who: "girl", //or 'boy' or 'dog'
      fruits: ["apple", "banana", "orange"],
      classes: { bg: false, colorRed: true },
      value: "ID를 입력하세요."
    };
  },
  methods: {
    message: function() {
      alert(this.msg);
    },
    appFruit() {
      this.fruits.push("pineapple");
    }
  }
};

.bg {
  background-color: blue;
}
.colorRed {
  color: red;
}