Vue Template(뷰 템플릿) - 1

    뷰 템플릿이란?

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

    템플릿 속성을 사용하는 방법은 첫번째로 ES5에서 뷰 인스턴스의 template속성을 활용하는 방법이다.

    <script>
    	new Vue({
        	template: '<p>Hello {{message}}</p>'
        });
    </script>

    사용자가 볼 수는 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. 변환된 render()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 그리고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해진다.

     

    두 번째 방법은 싱글 파일 컴포넌트 체계의 <template>코드를 활용하는 방법이다.

    <!-- ES6: 싱글 파일 컴포넌트 체계 -->
    <template>
    	<p>Hello {{message}}</p>
    </template>

    템플릿에서 사용하는 뷰의 속성과 문법은 다음과 같다.

    데이터 바인딩

    HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.

    주요 문법으로는 {{}}문법과 v-bind속성이 있다.

     

    {{ }} - 콧수염 괄호

    {{ }}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.

    {{ }}는 모양이 콧수염과 비슷하다고 하여 콧수염 괄호라고 불린다.

    뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법이다.

     

    <div id="app">
    	{{ message }}
    </div>
    
    <script>
    	new Vue({
        	el: "#app",
            data: {
            	message: 'Hello Vue.js!'
            }
        });
    </script>

    위 코드는 data속성의 message속성값인 Hello Vue.js!를  <div>태그 안의 {{ message }}에 언결하여 화면에 나타내는 코드이다. 여기서 만약 data속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신된다.

    만약 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않다면 v-once속성을 사용한다.

     

    v-bind

    아이디, 클래스, 스타일 등의 HTML 속성(attribute) 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다.

    형신은 v-bind속성으로 지정할 HTML속성이나 props속성 앞에 접두사로 붙여준다.

    ...
    <div id="app">
    	<p v-bind:id="idA">아이디 바인딩</p>
        <p v-bind:class="classA">클래스 바인딩</p>
        <p v-bind:style="styleA">스타일 바인딩</p>
    </div>
    
    ...
    
    <script>
    	new Vue({
        	el: '#app',
            data: {
     			idA: 10,
                classA: 'container',
                styleA: 'color: blue'
            }
        });
    </script>

    실행 결과로는 데이터 속성의 idA, classA, styleA 값이 화면의 요소에 각각 연결되어 나타난 것을 확인할 수 있습니다.

     

    추가로 v-bind: 문법을 :로 간소화가 가능하다. 예로 v-bind:id와 :id는 같은 동작을 한다.

    이처럼 약식 문법을 사용할 때는 기본 문법과 약식 문법을 혼용해서 사용하지 않는 것이 좋다.

    또한 뷰 코드가 전반적으로 v-접두사를 붙이는 형태이기 때문에 가급적 v-bind속성을 이용하는 것이 기존 HTML문법과 구분도 되고 다른 사람이 코드를 파악하기도 쉽다.

     

    자바스크립트 표현식

    뷰의 탬플릿에서도 자바스크립트 표현식을 쓸 수 있다. 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 된다.

    <div id="app">
    	<p>{{ message }}</p>
        <p>{{ message + "!!" }}</p>
        <p>{{ message.split('').reverse().join('') }}</p> // 자바스크립트 API 사용
    </div>
    
    <script>
    	new Vue({
        	el: '#app',
            data: {
            	message: 'Hello Vue.js!'
            }
        });
    </script>

    자바스크립트 표현식에서의 주의점

    첫째. 자바스크립트의 선언문과 분기구문은 사용할 수 없다.

    둘째. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.

    <div id="app">
    	{{ var a = 10; }} //선언문은 사용 불가
        {{ if(true) {return 100} }} //분기 구문 사용 불가
        {{ true ? 100 : 0 }} //삼항 연산자는 표현 가능
        
        {{ message.split('').reverse().join('') }} //복잡한 연산은 인스턴스 안에서 수행 -> 불가
        {{ reversedMessage }} //스크립트에서 computed속성으로 계산한 후 최종 값만 표현
    </div>
    
    <script>
    	new Vue({
        	el: '#app',
            data: {
            	message: 'Hello Vue.js!'
            },
            computed: {  //데이터 속성을 자동으로 계산해 주는 속성
            	reversedMessage: function(){ //{{ reversedMessage }}에 표현되기 전에 연산을 수행하는 함수
                return this.message.split('').reverse().join('');
            	}
            }
        });
    </script>

     

     

    디렉티브

    HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.

    앞에서 배운 v-bind도 디렉티브에 해당된다.

    디렉티브는 화면 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경되었을 때 화면 요소들이 Reactive하게 반응하여 변경된 데이터 값에 따라 갱신된다. 이런 식으로 화면 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작할 수 있다.

     

    주요 디렉티브

    v-if 

    지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.

     

    v-for

    지정한 뷰 데이터의 갯수만큼 해당 HTML 태그를 반복 출력한다.

     

    v-show

    v-if와 비슷하게 데이터의 진위 여부에 따라 해당 HTML태그를 화면에 표시하거나 표시하지 않는다.

    다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none;으로 주어 실제 태그는 남아있고 화면상으로만 보이지 않는다.

     

    v-bind

    HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.

     

    v-on

    화면 요소의 이벤트를 감지하여 처리할 때 사용한다.

    예로 v-on:click은 해당 태그의 클릭이벤트를 감지하여 특정 메서드를 실행할 수 있다.

     

    v-model

    폼(form)에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다.

    화면에 입력된 값을 저장하여 서버에 보내거나 watch같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다.

    <input>, <select>, <textarea>태그에만 사용할 수 있다,

     

    <html>
    <head>
        <title>Vue Template - Directives</title>
    </head>
    
    <body>
        <div id="app">
            <a v-if="flag">Do it Vue.js</a>
            <ul>
                <li v-for="system in systems">{{ system }}</li>
            </ul>
            <p v-show="flag">Do it Vue.js</p>
            <h5 v-bind:id="uid">뷰 입문서</h5>
            <button v-on:click="popupAlert">경고 창 버튼</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    flag: true,
                    systems: ['android', 'ios', 'windows'],
                    uid: 10
                },
                methods: {
                    popupAlert: function () {
                        return alert('경고 창 표시');
                    }
                }
            });
        </script>
    </body>
    </html>

     분량 조절 실패로 다른 기능은 다음 장에 이어서 설명하겠습니다.

    'JavaScript > Vue.js' 카테고리의 다른 글

    뷰 프로젝트(Vue Project) 구성 방법  (0) 2021.01.13
    Vue Template(뷰 템플릿) - 2  (0) 2021.01.12
    Vue HTTP 통신  (0) 2021.01.09
    Vue Router(뷰 라우터)  (0) 2021.01.09
    Vue Component teleport(뷰 컴포넌트 통신) - 2  (0) 2021.01.07

    댓글