{{ fruit }} - {{ index }}

">

{{ fruit }} - {{ index }}

">

{{ fruit }} - {{ index }}

">

<h1 **v-once** @click="add">

<h1 **v-html**="msg"> 

<h1 **v-bind**:class="msg">

<h1 **v-on**:click="add">

<h1 **:[attr]**="active" @**[event]**="click">

<li **v-for="(fruit, index) in fruits"** :key="fruit"> {{ fruit }} - {{ index }} </li>

<section **v-if**="fruits.length > 0">

• v-once : 데이터가 변경되어도 갱신되지 않는다.
• v-html : 데이터를 일반 텍스트가 아닌, html 형식으로 출력한다.
• v-bind : 보간체({{ }})를 사용하지 않으면서 디렉티브 속성의 값에 데이터를 삽입할 수 있다. v-bind 키워드를 생략하고 콜론 기호만 남긴 채로 사용할 수 있다.
• v-on : 특정 이벤트가 발생했을 때, 특정 메소드(핸들러)를 실행시킨다. v-on 키워드를 생략하고 @ 기호만 남긴 채로 사용할 수 있다.
• [] : 데이터의 값을 디렉티브 속성의 이름으로 삽입할 수 있다.
• v-for : vue의 for문이다. :key 속성의 값에는 고유한 값이 들어가야 한다. (shortid : 고유한 값을 만들어 내는 패키지)
• v-if : vue의 if문이다.

---

v-bind

// 클래스 바인딩
<h1 :class="**{active: isActive }**">

<h1 :class="**classObject**">
data() {
	return {
		classObject: {
			active: true,
			'text-danger': false
		}
	}
}

// 스타일 바인딩
<h1 :style="{ color: activeColor, 'font-size': fontSize + 'px' }">
data() {
	return {
		activeColor: 'red',
		fontSize: 30
	}
}

• v-bind 속성 값에 객체 자체를 삽입할 수 있다.
• 바인딩 되는 데이터의 수가 두 개 이상이라면 그 데이터들을 data() 옵션에서 하나의 객체로 만든 뒤, 만든 객체 자체를 v-bind 속성과 바인딩한다.

---

v-if

<h1 **v-if**="isShow"> show </h1>
<h1 **v-else-if**="count > 3"> count > 3 </h1>
<h1 **v-else**> else </h1>

<h1 **v-show**="isShow">

• v-if는 값이 true인 경우에만 렌더링(html에 포함하기)하지만 v-show는 값에 상관 없이 항상 렌더링한다.
• 따라서 토글 버튼과 같이 무언가를 자주 전환해야 한다면 렌더링 과부하가 덜 걸리는 v-show를 사용하는 것이 좋다.

---