Vue.js - Template

템플릿이란?

: 뷰로 화면을 조작하기 위해 제공되는 문법

1. Data Binding

: 뷰 인스턴스에서 관리하는 데이터를 화면에 연결

콧수염 문법 {{ }}를 활용 → 인스턴스의 data, computed, props 속성을 연결

2. Directive

HTML 태그의 속성에 v- 접두사가 붙은 특별한 속성
  → 화면의 DOM 조작을 쉽게할 수 있는 문법들을 제공

예제

    <div id="app">
        <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
        <!-- <p id="abc1234" class="text-blue">{{ num }}</p> -->
        <p>{{ doubleNum }}</p>
        
        <div v-if="loading">
            Loading...
        </div>
        <div v-else>
            test user has been logged in
        </div>
        
        <div v-show="loading"> 
            Loading...
        </div>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10,
                uuid: 'abc1234',
                name: 'text-blue',
                loading: true,
                message: ''
            },
            computed: {
                doubleNum: function() {
                    return this.num * 2;
                }
            }

        });
    </script>

• computed 속성
  : 템플릿의 복잡성을 피하기 위해 사용, num을 연산하는 기능

• <v-bind: HTML 속성 = "인스턴스 속성">
  : html id와 class 명을 Vue 인스턴스의 data에 있는 값을 사용하기 위해 bind

• {{ num }}
  : Vue 인스턴스의 data 속성 num 값을 호출

• <v-if="인스턴스 속성">
  : 인스턴스 속성 값이 참(true)일 때 실행
  But, 거짓(false)일 때는 화면과 DOM에서 모두 제거

• <v-else>
  : 인스턴스 속성 값이 거짓(false)일 때 실행

• <v-show="인스턴스 속성">
  : 인스턴스 속성 값이 참(true)일 때 실행
  But, 거짓(false)일 때는 화면에만 출력되지 않을 뿐 DOM에서 제거되지 X

• <v-model="인스턴스 속성>
  : HTML의 input과 textarea로 입력받는 값을 바인딩하기 위해 사용
  → input에서 입력받는 값을 Vue 인스턴스의 message에 바인딩하여 화면에 출력