1. 컴포넌트들의 생명 주기별로 콘솔을 찍어본다. -> hook 으로 각각 콘솔 찍어보기 가능
const Display = {
props: {
emoji: String,
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeUnmount() {
console.log('beforeUnmount');
},
unmounted() {
console.log('unmounted');
},
template: `
<h1>{{ emoji }}</h1>`,
};
2. v-if 속성 사용
boolean 값으로 컴포넌트를 display / undisplay 한다.
const Toggle = {
data() {
return {
isOn: true,
emoji: '🌙',
};
},
components: {
Display,
},
template: `
<div v-if=isOn><Display :emoji="emoji" /></div>
<button @click="emoji='☀️'">sun</button>
<button @click="isOn=!isOn">toggle</button>`,
};
[전체 예시 코드]
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const Display = {
props: {
emoji: String,
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeUnmount() {
console.log('beforeUnmount');
},
unmounted() {
console.log('unmounted');
},
template: `
<h1>{{ emoji }}</h1>`,
};
const Toggle = {
data() {
return {
isOn: true,
emoji: '🌙',
};
},
components: {
Display,
},
template: `
<div v-if=isOn><Display :emoji="emoji" /></div>
<button @click="emoji='☀️'">sun</button>
<button @click="isOn=!isOn">toggle</button>`,
};
Vue.createApp(Toggle).mount('#app');
</script>
</body>
</html>
[실행 결과]
1. 최초 랜더링
2. Sun 버튼 클릭
3. toggle 버튼 클릭
'programming > Vue' 카테고리의 다른 글
| [Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기 (0) | 2022.03.03 |
|---|---|
| [Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기 (0) | 2022.03.03 |
| [Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기 (0) | 2022.03.03 |
| [Vue.js] #2 부모 - 자식 관계 컴포넌트 구현 (0) | 2022.03.03 |
| [Vue.js] #1 시작하기 (0) | 2022.03.03 |
