Vue의 template속성

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

<Vue의 template속성>
1. 데이터 바인딩(Data Binding)
2. 디렉티브(Directive)
3. 고급 템플릿 기법

<Vue의 template속성>

template이란 뷰로 화면을 조작하기 위해 제공되는 문법이다.
template속성은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해준다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업+뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. 변환된 reder()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다.

- temlate속성을 사용하는 방법

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

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

1. 데이터 바인딩(Data Binding)

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

1) {{}}

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

<div id="app">     //v-once 속성을 추가하면 1회만 바인딩할 수 있다.
  {{ message }}
</div>

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

{{}}안에 자바스크립트 표현식을 사용할 수 있다. 하지만 이 안에는 자바스크립트의 선언문과 분기 구문은 사용할 수 없고, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결관만 표시해야 한다.

<div id="app">
  <!-- X, 선언문은 사용 불가능 -->
  {{ var a = 10; }} 
  <!-- X, 분기 구문은 사용 불가능 -->
  {{ if (true) {return 100} }} 
  <!-- X, 복잡한 연산은 인스턴스 안에서 수행 -->
  {{ message.split('').reverse().join('') }} 
  
  <!-- O, 삼항 연산자로 표현 가능 -->
  {{ true ? 100 : 0 }} 
  <!-- O, 스크립트에서 computed 속성으로 계산 후 최종 값만 표현 -->
  {{ reversedMessage }} 
</div>

2) v-bind

아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식
v-bind: 문법을 :로 간소화할 수 있다. 하지만, v-bind속성을 이용하는 것이 구분하기 쉬워 사용하는 것이 좋다.

ex) HTML속성값에 뷰 데이터 값을 연결

<html>
  <head>
    <title>Vue Template - Data Binding</title>
  </head>
  <body>
    <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>
  </body>
</html>

2. 디렉티브(Directive)

화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 뷰의 데이터 값이 변경되었을 때 화면의 요소들을 직접 제어할 필요 없이 요소들이 Reactive하게 반응하여 변경된 데이터 값에 따라 갱신된다.
HTML태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.

//디렉티브 형식
<a v-if="flag">두잇 Vue.js</a>

디렉티브 이름	역할
v-if	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
v-for	지정한 뷰 데이터의 개수만큼 해당 HTML태그를 반복 출력한다.
v-show	v-if와 같은 기능을 한다. (단, v-if는 해당 태그를 완전히 삭제하지만, v-show는 css효과만 display:none;으로 지정한다.)
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어, v-on:click;은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.
v-bind	HTML태그의 기본 속성과 뷰 데이터 속성을 연결한다.
v-model	- form에서 주로 사용되는 속성 - 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. - input, select, textarea 태그에만 사용할 수 있다.

1) 이벤트 처리

v-on디렉티브와 methods속성을 활용

ex)

1. v-on 디렉티브 이용해 이벤트 처리하기
<html>
  <head>
    <title>Vue Template - Event Handling</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="clickBtn">클릭</button>   //v-on디렉티브 추가
		</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>
  </body>
</html>


//2. v-on디렉티브로 메서드 호출할 때 인자 값 넘기기
<html>
  <head>
    <title>Vue Template - Event Handling</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="clickBtn(10)">클릭</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(num) {
            alert('clicked ' + num + ' times');
          }
        }
      });
    </script>
  </body>
</html>

3. 고급 템플릿 기법

1) computed속성

데이터 연산들을 정의하는 영역
data 속성 값의 변화에 따라 자동으로 다시 연산한다.
캐싱(동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러옴)한다. => 복잡한 연산을 반복 수행해서 화면에 나타내야 할 땐, methods속성보다 computed속성을 이용하는 것이 효율적이다.

ex)

<html>
  <head>
    <title>Vue Template - Computed</title>
  </head>
  <body>
    <div id="app">
      <p>{{ reversedMessage }}</p>
    </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!'
        },
        computed: {
          reversedMessage: function() {
            return this.message.split('').reverse().join('');
          }
        }
      });
    </script>
  </body>
</html>

2) watch속성

데이터 변화를 감지하여 자동으로 특정로직을 수행한다.
computed속성과 비슷하지만, computed속성은 내장API를 활용한 간단한 연산인 반면에, watch속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리이다.

ex)

<html>
  <head>
    <title>Vue Template - Watch</title>
  </head>
  <body>
    <div id="app">
      <input v-model="message">
    </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!'
        },
        watch: {
          message: function(data) {
            console.log("message의 값이 바뀝니다 : ", data);
          }
        }
      });
    </script>
  </body>
</html>

저작자표시 비영리 변경금지

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

Vuex (0)	2021.02.06
Single File Components 체계 (0)	2021.02.06
뷰 HTTP 통신 (0)	2020.07.02
Vue Router (0)	2020.07.02
Vue Componets 통신 (0)	2020.07.02

winnih_B

LINKS

CATEGORY

Vue의 template속성

<Vue의 template속성>

1. 데이터 바인딩(Data Binding)

2. 디렉티브(Directive)

3. 고급 템플릿 기법

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

티스토리툴바

Vue의 template속성

<Vue의 template속성>

1. 데이터 바인딩(Data Binding)

2. 디렉티브(Directive)

3. 고급 템플릿 기법

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

'💻WEB FrontEnd/프레임워크 Vue' Related Articles

티스토리툴바