Vue 라이프사이클 다이어그램
<script>
var vm1 = new Vue({
//Vue객체가 관리할 요소들이 만들어지기 전에 호출되는 함수
data : {
a1:100
},
beforeCreate : function(){
console.log('Vue 객체가 관리할 요소들이 만들어지기 전 입니다.')
console.log(this.a1)
},
//Vue객체가 만들어진 후
created : function (){
console.log('Vue 객체가 관리할 요소들이 만들어진 후 입니다.')
console.log(this.a1)
}
})
</script>beforeCreate 는 객체가 관리할 요소들이 만들어지기 전에 생기는 함수
created는 객체가 만들어진 후에 생기는 함수이다.
**console.log(a1) 으로 하면 찍히지 않음. this.a1으로 작성해야 찍힘
el : '#test1'를 대시한 태그도 있다.
해당 태그가 // 되었다고 생각하고
vm1.$mount('#test1')를 vue안에 적어주기만 하면 해당 기능을 대신한다.
전체코드
<script>
window.onload = function() {
var vm1 = new Vue({
//el : '#test1',
//Vue 객체가 관리할 요소들이 만들어지기 전에 호출되는 함수
data : {
a1 : 100
},
beforeCreate : function() {
console.log('Vue 객체가 관리할 요소들이 만들어지기 전 입니다.')
console.log(this.a1)
},
//Vue 객체가 만들어진 후
created : function() {
console.log('Vue 객체가 관리할 요소들이 만들어진 후 입니다.')
console.log(this.a1)
},
//Vue 객체가 관리할 HTML 태그 객체가 할당 되기 전
beforeMount : function() {
console.log('Vue 객체가 관리할 태그가 할당 되기 전입니다.')
},
//Vue 객체가 관리할 HTML 태그 객체가 할당 된 후
mounted : function() {
console.log('Vue 객체가 관리할 태그가 할당 된 이후입니다.')
},
beforeUpdate : function() {
console.log('관리하고있는 HTML요소 내부가 변경되기 전입니다.')
},
updated : function() {
console.log('관리하고있는 HTML요소 내부가 변경된 후입니다.')
},
beforeDestroy : function() {
console.log('Vue 객체 기능이 소멸되기 전입니다.')
},
destroyed : function() {
console.log('Vue 객체 기능이 소멸된 후 입니다.')
},
methods : {
setValue : function() {
this.a1 = 200
}
}
})
//함수로 el: 처럼 사용
vm1.$mount('#test1')
//destroy() Vue객체에 마운트 된 태그를 관리하는 요소를 소멸
vm1.$destroy()
vm1.$mount('#test1')
}
</script>
</head>
<body>
<div id="test1">
<h3>{{a1}}</h3>
<button type="button" @click='setValue'>값변경</button>
</div>
</body>
</html>
728x90
'ETC > Vue.js' 카테고리의 다른 글
| v-for 태그를 반복할 수 있다 (0) | 2022.12.19 |
|---|---|
| v-html / v-bind vue 코드에 html 코드 삽입 (0) | 2022.12.19 |
| Vue 시작은 객체 생성부터, function () { [native code] } 오류 (0) | 2022.12.18 |
| Vue 출력 오류 / Vue2 Vue3 default 문제 에러 {{}}가 안 먹을 때 (0) | 2022.12.18 |
| Vue js 공부시작 (0) | 2022.12.18 |
댓글