20. 템플릿 문법 - 데이터 바인딩

freejia·2021년 10월 15일

vue.js

야금야금 Vue.js

목록 보기

19/29

캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools

뷰 템플릿 문법

뷰로 화면을 조작하는 방법을 의미한다.
템플릿 문법은 데이터 바인딩과 디렉티브로 나뉜다.

데이터 바인딩

여태 썼던 {{ }} 콧수염 괄호로 데이터 바인딩 한다.

<body>
    <div id="app">
        {{ str }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: 'hi'
            }
        })
    </script>
</body>

디렉티브

v-on 같이 v-로 시작하는 속성들을 디렉티브 라고 한다.
뷰의 요소에 표시 방법을 제공한다.

    <div id="app">
        <span v-if="show">users</span>
    </div>
    
    
        new Vue({
            el: '#app',
            data:{
                show: false
            }
        })

computed 속성

num이 변경될 때 doubleNum 값도 변경되도록 구현하자.
뷰 인스턴스의 data에 num과 doubleNum을 선언한다.

<body>
    <div id="app">
        <p>{{ num }}</p>
        <p>{{ doubleNum }} </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10,
                doubleNum: 10 * 2
            }
        })
    </script>
</body>

이미 num의 값을 기준으로 2배를 계산하여 doubleNum 값이 정해진다.

이 때는 computed 속성을 이용하자.

doubleNum 이라는 data는 지우자.
num값의 2배를 리턴하는 doubleNum() 함수를 작성하여 computed 속성에 추가한다.

<body>
    <div id="app">
        <p>{{ num }}</p>
        <p>{{ doubleNum }} </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10
            },
            computed: {
                doubleNum: function(){
                    return this.num * 2; 
                }
            }
        })
    </script>
</body>