앞서 살펴봤던 바인딩 이외에도 여러가지 Template 기법을 사용할 수 있습니다.

<div id="app" v-once>
    <a href="#" v-if="flag">Vue.Js</a>
    <ul>
        <li v-for="system in systems">{{ system }}</li>
    </ul>
    <p v-show="flag">Vue.Js</p>
    <h5 v-bind:id="uid">뷰 ID</h5>
    <button v-on:click="popupAlert(10)">Alert</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    new Vue({
        el : '#app',
        data : {
            flag : false,
            systems : ['android','ios','window'],
            uid : 10,
            message : 'Hello Vue Js!'
        },
        methods : {
            popupAlert : function (num) {
                return alert('경고 창 표시' + num);
            }
        },
        computed : {
            reversedMessage : function () {
                return this.message.split('').reverse().join();
            }
        }
    })
    Vue.config.devtools = true;
</script>

• v-if – 지정한 뷰의 데이터 값의 참 거짓 여부에 따라 요소를 표시하거나 숨김 처리
• v-for – 데이터의 갯수만큼 요소를 반복 출력
• v-show – v-if와 같은 기능을 하지만 요소를 완전히 없애지는 않고 display:none 처리
• v-bind – HTML 태그의 기본속성과 뷰 데이터 속성을 연결
• v-on:click – 이벤트를 처리. 매개변수 전달 가능
• v-model – 폼에 주로 사용되며, 폼에 입력한 값을 뷰 Instance의 데이터와 즉시 동기화

추가로 Instance 내에서 computed 속성을 사용하면 복잡한 연산을 사용할 수 있습니다.
method 속성은 호출할 때만 로직이 수행되지만 , computed 속성은 데이터의 값이 변경되면 자동으로 수행됩니다.