1. <transition name="이름"></transition>으로 감싼다.
2. CSS를 설정한다.
.이름-enter-from { 애니메이션 동작 전 상태 }
.이름-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.이름-enter-to { 애니메이션 동작 후 상태 }// lifecycle hook
- 특정 순간에 렌더링을 원할 때 사용
beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Instance Lifecycle</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
mounted: function() {
console.log("mounted");
this.message = 'Hello Vue!';
},
updated: function() {
console.log("updated");
}
})
</script>
</body>
</html>
mounted(){
setInterval(()=>{
this.amount--;
}, 1000);
}
'클라이언트 > Vue.js' 카테고리의 다른 글
| [뷰(Vue)] Axios, Form (0) | 2023.08.02 |
|---|---|
| [뷰(Vue)] Router(라우터) (0) | 2023.08.02 |
| [뷰(Vue)] 사용자 입력, watch, computed (0) | 2023.07.31 |
| [뷰(Vue)] export, import / 컴포넌트 (0) | 2023.07.31 |
| [뷰(Vue)] 이벤트 핸들러, 메서드(Method) (0) | 2023.07.30 |
