HTML
엘리먼트에 v-if
디렉티브를 이용해서 반응형 데이터가 truthy
혹은 falsy
인지에 따라 렌더링 여부를 결정할 수 있다.<div v-if="true">Content1</div>
<div v-else-if="0">Content2</div>
<div v-else>Content3</div>
v-if, v-else-if, v-else
디렉티브가 적용된 요소 사이에 다른 요소가 추가되면 안 된다.
v-if
디렉티브이기 때문에 엘리먼트에 추가되어야 하므로, 렌더링 결과에 v-if
가 추가된 엘리먼트를 제외하고 싶다면 <template>
태그로 래핑해야 한다.
초기 렌더링 비용이 낮으며, 전환 비용이 높다.
v-if
와 다르게 조건에 상관 없이 엘리먼트를 HTML
구조에 출력한 뒤, inline style
에 display: none
속성을 변경하는 형태로 작동한다.
v-show
가 추가된 엘리먼트 내부에 보간을 이용해 반응형 데이터를 출력하는 경우, 컴파일되지 않은 보간 문법이 노출될 수 있으므로 v-cloak
과 같이 사용한다.
초기 렌더링 비용이 높으며, 전환 비용이 낮다.
<li v-for=”(item [, index]) in items”>somValue</li>
문법을 이용해서 배열 데이터를 렌더링 한다.
<li v-for=”(value [, key ] [, index]) in object”>someValue</li>
문법을 이용해서 객체 데이터를 렌더링 한다.
간단한 리스트 렌더링 예제
HTML
<html>
<head>
<title>List Test</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div class="list-container">
<ul id="array-list">
<li v-for="fruit in fruits">
{{ fruit.name }}
</li>
</ul>
<input v-model.trim="fruitName" />
<button @click="addFruit">Add Fruit!</button>
<button @click="deleteLastFruit">Delete Fruit!</button>
</div>
<script src="/main.js" type="module"></script>
</body>
</html>
JS
const FruitList = {
data() {
return {
fruitName: '',
fruits: [
{ name: 'apple' },
{ name: 'banana' },
{ name: 'grape' },
{ name: 'lime' },
{ name: 'lemon' },
]
}
},
methods: {
addFruit() {
const { fruits, fruitName } = this;
if (fruitName.length > 0) {
fruits.push({ name: fruitName });
this.fruitName = '';
}
},
deleteLastFruit() {
const { fruits } = this;
this.fruits = fruits.slice(0, fruits.length - 1);
}
}
}
Vue.createApp(FruitList).mount('.list-container');
리스트의 상태가 변할 때, 효율적인 렌더링을 위해 key
값을 이용하며, key
는 String
혹은 Number
타입만 사용하도록 한다.
v-for
와 v-if
를 하나의 엘리먼트에 추가하게 되면, v-if
가 우선하기 때문에 별도로 래핑하는 태그가 필요하다.
v-on:eventName
디렉티브를 이용해서 이벤트 핸들러를 등록하며, @eventName
으로 축약해서 표현이 가능하다.<button v-on:click="addEvent">add Button</button>
<button @click="addEvent">add Button</button>
이벤트 이름을 바인딩 하는 대신 inline으로 메서드 호출 또한 가능하며, 이러한 경우 $event
를 이용해서 event
객체를 명시적으로 전달해야 한다.
inline 메서드 호출 시, ,
혹은 ;
로 메서드를 구분해서 동시에 여러 메서드를 호출할 수 있다.
기본 동작은 버블링(bubbling)이다.
수식어는 키 수식어 | Vue.js와 v-on 디렉티브 | Vue.js를 참고하자.
<body>
<div id="app">
<h1>title : {{ message }}</h1>
<input :value="message" @input="updateMessage" />
</div>
<script>
const App = {
data() {
return {
message: 'Default Message'
}
},
methods: {
updateMessage(e) {
this.message = e.target.value;
}
}
};
const app = Vue.createApp(App).mount('#app');
</script>
</body>
v-model
디렉티브를 이용하면 아래처럼 간결하게 양방향 데이터 바인딩이 가능하다.<body>
<div id="app">
<h1>title : {{ message }}</h1>
<input v-model="message" />
</div>
<script>
const App = {
data() {
return {
message: 'Default Message'
}
}
};
const app = Vue.createApp(App).mount('#app');
</script>
</body>
v-model
디렉티브 사용 시, 한글 입력이 지연되는 문제가 있다. 기존의 양방향 데이터 바인딩 방식을 사용하면 해결된다.
v-model
디렉티브를 사용한 폼 엘리먼트의 value, checked, selected
는 무시된다.
참고 자료
조건부 렌더링 | Vue.js
리스트 렌더링 | Vue.js
이벤트 핸들링 | Vue.js
폼 입력 바인딩 | Vue.js