728x90
반응형
vueex1.html
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220531/vueex1.html
라이프사이클 함수
beforeCreate : Vue 객체의 인스턴스 생성 시
created : Vue 객체의 인스턴스 생성 후
beforeMount : 데이터가 마운트 되기 전
mount : 데이터가 마운트 된 후
beforeUpdate : 데이터 상태가 변경 시 호출
Update : 데이터 상태가 변경 후 호출
beforeDestroy : Vue 객체가 제거되기 전 호출
destroyed : Vue 객체가 제거된 후 호출
-->
<html>
<head>
<meta charset="UTF-8">
<title>vue의 라이프사이클</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple">
x : <input type="text" v-model="x" ><br>
y : <input type="text" v-model="y" ><br>
덧샘결과 : {{sum}}
</div>
<script type="text/javascript">
let model = { x : 0, y : 0}
let simple = new Vue ({
el : "#simple",
data : model,
computed : {
sum : function (){
let x = Number(this.x)
let y = Number(this.y)
return x+y
}
},
beforeCreate : function() {
console.log("before Create")
},
beforeUpdate : function() { //데이터의 수정시 호출되는 함수
console.log("before Update")
console.log(this.x + "," + this.y)
},
update : function() { //데이터의 수정 이후 호출되는 함수
console.log("update")
console.log(this.x + "," + this.y)
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 이벤트 처리하기2 (vueex3.html ) (0) | 2022.05.31 |
|---|---|
| [Vue] 28. 이벤트 처리하기 (vueex2.html ) (0) | 2022.05.31 |
| [Vue] 28. 데이터입력하고 검색하기 (vueex7.html ) (0) | 2022.05.31 |
| [Vue] 28. 두 수의 합 구하기 (exam1.html ) (0) | 2022.05.30 |
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |