24. watch

18885 단어 vue.jsvue.js

캡틴판교 장기효님의 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 속성을 비교한다.

Go web 1. Web Handler, JSON
[BOJ / C++] #2589 보물섬

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage