[Vue.js] 뷰 템플릿과 뷰의 속성

3 minute read

1. 뷰 템플릿이란?

뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다.

뷰에서 템플릿 속성을 사용하는 방법은 두 가지가 있는데 ES5 사용법과 ES6 사용법이 있다.

우선 ES5 템플릿 사용법은 뷰 인스턴스의 template 속성을 사용하는 것이다.

//뷰 인스턴스 template 속성 사용 방법
<script>
    new Vue({
        template : '<p>Hello </p>'
    });
</script>

지금까지 계속 써왔던 일반적인 인스턴스의 사용법과 같다.

두 번째는 ES6에서 사용하는 방법으로 싱글 파일 컴포넌트 체계의 template 코드를 사용하는 방법이다.

<template>
    <p>Hello <p>
</template>

여기서 싱글 파일 컴포넌트는 컴포넌트의 템플릿, 로직, 스타일을 하나의 파일로 묶어낸 파일 형식으로 차후에 다뤄보도록 하겠다.

2. 템플릿에서의 뷰의 속성

2.1 데이터 바인딩

데이터바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것으로 또는 v-bind 를 사용한다.

2.1.1 {{ }}

중괄호는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 방법이다.
앞서 많이 사용해봐서 익숙한 방법인만큼 간단한 샘플 코드만 보고 넘어가자.

<div id="app">
    {{ message }}
</div>

<script>
    new Vue({
        el : '#app',
        data : {
            mseeage : 'Hello Vue.js'
        }
    });
</script>

2.1.2 v-bind

v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 방법이다.

<div id="app">
    <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.2/dist/vue.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            idA: 10,
            classA: 'container',
            styleA: 'color: blue'
        }
    });
</script>

위 코드를 보면 뷰 인스턴스 영역의 data 속성의 값을 html의 id, class, style의 앞에 v-bind를 사용하여 연결하고 있다. 또한 v-bind는 문법을 간호화 하여 사용할 수 있는데, v-bind:id를 :id로 단순화하여 사용할 수 있다.

2.2 자바스크립트 표현식

뷰의 템플릿에서도 자바스크립트 표현식을 사용할 수 있다. 위에서 언급한 를 사용해서 스크립트 표현식을 넣으면 된다.

<div id="app">
    <!-- {{ var a = 10; }} 선언문 사용 불가 -->
    <!-- {{ if (true) {return 100} }}    분기 사용 불가 -->
    {{ true ? 100 : 0 }} <!-- 삼항 연산자 사용 가능 -->

    <!-- 사용 가능하지만 가능한 연산은 인스턴스에서 -->
    {{ message.split('').reverse().join('') }} 

    <!-- 인스턴스에서 계산후 표현만 -->
    {{ reversedMessage }} 
</div>

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

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMsg: function() {
                this.message = this.message.split('').reverse().join('');
                return this.message;
            }
        }
    });
</script>

스크립트 표현식을 사용할 때 주의점이 있는데 선언문이나 분기 구문은 사용할 수 가 없다. 하지만 삼항연산자는 사용할 수 있으며 연산이 필요한 부분도 가급적 인스턴스 내에서 처리 후 표현하는 것을 권장한다.
처음보는 computed 라는 속성은 아래에서 내용에서 알아보자.

2.3 디렉티브

디렉티브는 HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미한다.
화면의 요소를 더 쉽게 조작하기 위해 사용하며 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.

디렉티브 이름	역할
v-if	지정한 데이터의 true, false 여부에 따라 해당 태그 표시
v-for	지정한 뷰 데이터의 개수만큼 태그 반복 출력
v-show	if와 마찬가지로 true, false 여부에 따라 태그를 표시하지만 false 일 경우 display:none 처리
v-bind	HTML태그의 기본 속성과 뷰 데이터 속성을 연결
v-on	화면 요소의 이벤트를 감지하여 처리
v-model	폼(form)에서 주로 사용하고 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화 input, select, textarea 태그에만 사용 가능

말이 어렵게 느껴질 수 있지만 조금 생소할 수 있는 bind와 model을 간단히 보자면 bind는 자바스크립트의 attr 속성, model은 val 속성이라고 생각하면 편하다.

2.4 이벤트 처리

v-on 디렉티브와 methods 속성을 사용해서 이벤트를 처리할 수 있다.

<div id="app">
    <button v-on:click="clickBtn">클릭</button>
</div>

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

<script>
    new Vue({
        el: '#app',
        methods: {
            clickBtn: function() {
                alert('clicked');
            }
        }
    });
</script>

위의 샘플코드와 같이 button에 v-on 디렉티브를 사용하여 click 이벤트를 걸어주고 인스턴스에서 methods 속성을 이용해 clickBtn 함수를 정의해줬다.
버튼을 클릭하면 methods 속성에 선언한 clickBtn이 실행되고 alert 팝업이 뜨게된다.
우리가 흔히 자바스크립트에서 사용하던 것 처럼 메서드를 호출할 때 v-on:click=”clickBtn(10)”과 같이 인자를 넘겨줄 수 있으며, 따로 메서드 인자를 전달하지 않아도 메서드에 clickBtn:function(evt)와 같이 해동 돔 요소의 이벤트 객체에 접근할 수 있다.

Share on

Twitter Facebook LinkedIn

MOYA