beforeCreate 인스턴스생성
created 생성후
mounted 인스턴스 el 부착완료
updated 데이터/화면변경 완료
전역컴포넌트는 함께 공유해 가질 수있는 컴포넌트로 인스턴스생성시 모두 동일하게 추가되지만,
지역컴포넌트는 특정 인스턴스 안에 삽입해야만 화면에 추가된다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" class="container p-5 text-center">
<h4 class="fw-bold pb-3 border-bottom mb-0">인스턴스 #app</h4>
<div class="p-2 bg-light fw-bold">data: message: {{message}}</div>
<my-component1></my-component1>
<my-component2></my-component2>
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('my-component1', {template:'<div class="p-2 bg-light fw-bold">전역컴포넌트</div>'});
var cmp ={template: '<div class="p-2 bg-light small">지역컴포넌트</div>'}
//Vue 생명주기
new Vue({
el: '#app',
data: {message: 'Hello Vue.js!'},
components : {'my-component2': cmp},
beforeCreate: function () {console.log('beforeCreate: 인스턴스 생성, 라이프 사이클');},
created: function () {console.log('created: 생성후 다음단계, 첫 라이프 사이클');},
mounted: function () {console.log('mounted: el속성의 인스턴스가 부착되고나서 호출');},
updated: function () {console.log('updated: 데이터변경으로 인한 화면요소변경까지 완료된시점, 노출되지않음');}
});
</script>
</body>
</html>