반응형
인스턴스 생성
템플릿과 가상 DOM 생성
이벤트 루프
인스턴스 소멸
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 애완용품샵</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="annoymous" />
</head>
<body>
<div id="app">
<header>
<h1 v-text="sitename"></h1>
</header>
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: 'Vue.js 애완용품샵'
},
beforeCreate: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("beforeCreate");
}
},
created: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("created");
}
},
beforeMount: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("beforeMount");
}
},
mounted: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("mounted");
}
},
beforeUpdate: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("beforeUpdate");
}
},
updated: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("updated");
}
},
beforeDestroy: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("beforeDestory");
}
},
destroyed: function(){
if(APP_LOG_LIFECYCLE_EVENTS){
console.log("destroyed");
}
},
});
</script>
</body>
</html>반응형
