감시하고 싶은 data를 쓰면 된다. 데이터를 쓰고, 함수처럼 만들어주면 된다.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }} <br>
<button @click="changeMessage">Click</button><br> <!--이벤트핸들러 함수는 methods객체 안에 정의한다.-->
{{ updated }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: '헬로우',
updated: '아니요',
},
methods: {
changeMessage(){
this.message = '코지코더';
}
},
computed: {},
watch: { // 감시하고싶은 데이터를 쓰고, 함수처럼 만들어주면된다.
message(newVal, oldVal){ // 매개변수로 newValue, oldValue를 받는다. 지켜보고있다가, message가 변경되면 실행되면서 newValue-새로 업데이트된 value, oldValue-기존의 데이터
console.log(newVal, oldVal); // 헬러우 코지코더
this.updated = '네';
}
}
})
</script>
</body>
</html>Click버튼 클릭 전의 화면은 다음과 같다.
Click버튼 클릭 후 화면은 다음과 같다.
그리고, watch속성에 의해 console창에는 '헬로우 코지코더'가 뜬다.
'Vue.js' 카테고리의 다른 글
| Kossie Coder 09. v-if와 v-show (0) | 2022.05.16 |
|---|---|
| Kossie Coder 08. 클래스 & 스타일 바인딩 (0) | 2022.05.16 |
| Kossie Coder 06. Computed 속성 (0) | 2022.05.15 |
| Kossie Coder 05. 데이터 양방향 바인딩(Data Two Way Binding : v-model) (0) | 2022.05.09 |
| Kossie Coder 04. 이벤트(Events) (0) | 2022.05.09 |
