캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
watch란 ?
데이터의 변화에 따라 특정 로직을 실행할 수 있는 뷰 인스턴스의 속성이다.
실습을 통해 알아보자.
1. 버튼을 누르면 숫자가 증가하도록 만들자.
'increase'라는 버튼을 누르면, 'num'이라는 데이터가 증가한다.
{{ }} 콧수염 괄호를 이용하여 화면에 직접 뿌려주자.
<!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>
</head>
<body>
<div id="app">
<button v-on:click="addNum">increase</button>
{{ num }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num : 10
},
methods: {
addNum: function(){
this.num = this.num + 1;
}
}
})
</script>
</body>
</html>2. 숫자가 증가할 때 마다 log를 출력해보자.
log를 출력하는 함수인 logText를 만들고 methods에 추가한다.
methods: {
addNum: function(){
this.num = this.num + 1;
},
logText: function(){
console.log('changed');
}
}watch에는 대상 변수 이름과 함수를 작성한다.
watch: {
num : function(){
this.logText();
}
},watch라는 속성은 기본적으로 data에 선언된 변수들을 대상으로 한다.
이제 num이 증가할 때 마다 콘솔에 log가 찍힌다.
3. 숫자가 12가 되면 화면에 문자열 출력하기
data에 문자열 변수 numText를 하나 만든다.
data: {
num : 10,
numText : ""
},12가 되면 numText를 출력하도록 logText함수에 if문을 추가한다.
methods: {
addNum: function(){
this.num = this.num + 1;
},
logText: function(){
console.log('changed');
if(this.num == 12 ){
this.numText = "num is 12"
}
}
}화면에는 {{ }} 콧수염 괄호를 이용하여 numText를 출력할 곳에 적어준다.
<div id="app">
{{ numText }}
<button v-on:click="addNum">increase</button>
{{ num }}
</div>버튼을 누르다가 숫자가 12가 되면, "num is 12"문자열이 출력된다.
실습한 전체 코드
<!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>
</head>
<body>
<div id="app">
{{ numText }}
<button v-on:click="addNum">increase</button>
{{ num }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num : 10,
numText : ""
},
watch: {
num : function(){
this.logText();
}
},
methods: {
addNum: function(){
this.num = this.num + 1;
},
logText: function(){
console.log('changed');
if(this.num == 12 ){
this.numText = "num is 12"
}
}
}
})
</script>
</body>
</html>다음 시간에는 watch속성과 computed 속성을 비교한다.
코딩 리딩 라이딩💛