1. 템플릿(Template)의 분류

뷰로 화면을 조작하는 방법
크게 데이터 바인딩과 디렉티브로 나뉜다.

데이터 바인딩
콧수염 괄호(Mustache Tag)

<div>{{ message }}</div>

new Vue({
    data: {
        message: 'Hello Vue.js'
    }
})

div 태그에 콧수염 괄호를 이용해 뷰 인스턴스의 message 속성을 연결하였다.

디렉티브
뷰를 화면의 요소로 더 쉽게 조작하기 위한 문법

<div>
  Hello <span v-if="show">Vue.js</span>
</div>

new Vue({
    data: {
        show: false
    }
})

2. 데이터 바인딩과 computed 속성

<div id="app">
    <p>{{ num }}</p>
    <p>{{ doubleNum }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
        },
    computed: {
        doubleNum: function() {
            return this.num * 2;
        }
    }
})
</script>

3. 뷰 디렉티브와 v-bind

1) 기본 사용법

<div id="app">
    <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
    <p>{{ doubleNum }}</p>
</div>
    
<script>
new Vue({
    el: '#app',
    data: {
        num: 10,
        uuid: 'abc1234',
        name: 'text-blue'
    },
        computed: {
            doubleNum: function() {
            return this.num * 2;
            }
        }
    })
</script>

2) 로그인 상태 표시하기

전형적인 프로그래밍의 if ~ else를 생각하면 된다.

<div id="app">
    <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
    <p>{{ doubleNum }}</p>
    <div v-if="loading">
        Loading...
    </div>
    <div v-else>
        test user has been logged in
    </div>
</div>

또는

<div v-show="loading">
    Loading...
</div>

※ v-if 와 v-show 의 차이

v-if

loading 의 값이 참이면 Loading... 가 렌더링 되고 거짓이면 test user has been logged in 가 렌더링 된다. v-else 를 통해서 "else 블록"을 나타낼수도 있다. v-else 는 항상 v-if 나 v-else-if 뒤에 와야한다.

v-show

v-if 와 거의 동작이 비슷하다. loading 의 값이 참이면 화면에 표시된다.

차이점

v-if 는 조건에 따라 컴포넌트가 실제로 제거되고 생성된다.

반면에 **v-show** 는 단순히 css 의 display 속성만 변경된다. 보일지 말지만 바뀐다는 뜻이다.

4. methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법

버튼에 클릭 이벤트 주기

<div id="app">
    <!-- <button v-on:click="메서드 이름">click me</button> -->
    <button v-on:click="logText">click me</button>
</div>

<script>
    new Vue ({
        el: '#app',
        methods: {
            logText: function() {
                console.log('clicked');
            }
        }
    })
</script>

키보드 입력 이벤트 주기

<input type="text" v-on:keyup="logText">

엔터를 누를 때만 기능 실행하도록 하기

<input type="text" v-on:keyup.enter="logText">