Vue 템플릿 문법

Vue 템플릿 문법(Template Syntax) 소개

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

 

데이터바인딩

 

{{message}} 로 데이터를 뿌리고

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

이것이 그냥 데이터 바인딩이다.

 

디렉티브

v-if, v-for 등 화면의 요소를 더 쉽게 조작하기 위한 문법이다.

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

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

<ul> 
	<li v-for="item in items">{{item}}</li>
<ul>

new Vue({
	data: {
    	item : ['shirts', 'jeans', 'hats']
    }
})

이런 식으로 구현한다.

 

<div id="app">
    <p v-if="login">로그인 되었습니다.</p>
    <p v-else>로그인 하세요</p>
    <button v-on:click="loginUser">로그인</button>

    <hr>

    <p v-show="login">로그인 되었습니다.</p>
    <button v-on:click="loginUser">로그인</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                login:false
            }
        },
        methods : {
            loginUser(){
                this.login = !this.login;
            }
        }
    }).mount('#app');
</script>

 

이런식으로 사용하게 된다. if와 show는 비슷해보이는데, if는 아예 표시가 되지않고, show는 false의 경우에 display:none으로 처리된다.

 

<style>
.primary{
    color: coral;
}
</style>

<div id="app">
    <h1>클래스 바인딩</h1>
    <div v-bind:class="textClass">데이터 바인딩 예제</div>

    <h1>아이디 바인딩</h1>
    <section :id="sectionId" :style="sectionStyle">
        반갑습니다.
    </section>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                textClass: 'primary',
                sectionId: 'tab1',
                sectionStyle: {color:'red'}
            }
        }
    }).mount('#app');
</script>

 

v-bind는 class, id, style을 변경할 수 있다. 축약형으로 v-bind:class는 :class로도 줄일 수 있다. 실무에서는 대부분 :로만 사용한다.