Template 1 (템플릿)

#vue #vue기초

Vue Template에 대해서 알아보겠습니다.
이전의 예제를 통해서도 많이 봐왔던 Template입니다.

데이터 바인딩

<div id="app" v-once>
    {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    new Vue({
        el : '#app', 
        data : {
            message : 'Hello Vue.Js!'
        }
    });
</script>

일반적인 변수 바인딩입니다.

v-bind

<div id="app" v-once>
    <p v-bind:id="idA">아이디 바인딩</p>
    <p v-bind:class="classA">아이디 바인딩</p>
    <p v-bind:style="styleA">스타일 바인딩</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    new Vue({
        el : '#app', 
        data : {
            idA : '10',
            classA : 'container',
            styleA : 'color:blue'
        }
    });
</script>

해당 요소의 id,class,style 속성을 바인딩 할 수 있습니다.

자바스크립트 표현식

Vue Template에서도 자바스크립트 표현식을 쓸 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>뷰 템플릿</title>
</head>
<body>
    <div id="app" v-once>
        {{ var a = 10; }} <!-- 사용불가 -->
        {{ if (true) { return 100; } }} <!-- 사용불가 -->
        {{ true ? 100 : 0 }} <!-- 사용가능 -->

        {{ message.split('').reverse().join('') }} <!-- 사용가능하지만 인스턴스 안에서 실행 -->
        {{ reversedMessage }} <!-- computed 속성으로 계산한 후 최종 값을 표햔 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
    <script>
        new Vue({
            el : '#app',
            data : {
                message : 'Hello Vue.Js!'               
            },
            computed : {
                reversedMessage : function () {
                    return this.message.split().reverse().join('');
                }
            }
        })
        Vue.config.devtools = true;
    </script>
</body>
</script>
</body>
</html>

선언문과 IF문은 사용이 불가능합니다.
또한 복잡한 연산은 Instance 내에서 사용하는게 좋습니다.