Template

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

ES5에서 뷰 인스턴스의 template 속성 활용
싱글 파일 컴포넌트 체계의 <template> 코드 활용

템플릿 속성은 다음과 같이 두가지 방법으로 사용할 수 있다.

1. ES5에서 뷰 인스턴스의 template 속성 활용

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

이전 예제에서 주로 사용한 위와 같은 코드이다.

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

template 속성을 사용하지 않은 경우

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

template 속성을 사용하지 않은 경우에는 우선 <h3>{{message}}</h3> 코드를 화면에 표시하고, 인스턴스가 생성되면 message의 값을 data속성 안의 값으로 치환한다.

template 속성을 사용한 경우

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

template속성을 사용하면 아무 내용이 없다가 인스턴스가 생성되면 <h3>{{message}}</h3> 코드가 화면에 추가되어 표시된다.

2. 싱글 파일 컴포넌트 체계의 `<template>` 코드 활용

<template>
  <p>{{message}}</p>
</template>

데이터 바인딩

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

{{}}

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

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

data 속성의 message 값을 {{message}}에 연결하여 화면에 나타내는 코드이다. 여기서 data 속성의 message 값이 변경되면 뷰 반응성에 의해 화면이 자동으로 갱신된다.

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

<div id="app">
  <h3 v-once>{{message}}</h3>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    }
  });
</script>

v-bind

v-bind는 id, class, style 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다.

<div id="app">
	<p v-bind:id="idA">ID binding</p>
 	<p v-bind:class="classA">Class binding</p>
	<p v-bind:style="styleA">style binding</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      idA: 10,
      classA: 'container',
      styleA: 'color: blue'
    }
  });
</script>

다음과 같이 v-bind 속성으로 지정할 HTML 속성이나 props 속성앞에 접두사로 붙여주면된다.

<div id="app">
  <p id="10">ID binding</p>
  <p class="container">Class binding</p>
  <p style="color: blue;">style binding</p>
</div>

코드를 실행하면 데이터의 값이 각 <p> 에 연결되어 화면에 나타난다.

여기서 v-bind: 문법을 : 로 간소화할 수 있다. 예를 들어 v-bind:id는 :id와 같은 동작을 한다.

자바스크립트 표현식

뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다. {{}} 안에 자바스크립트 표현식을 넣으면 된다.

<div id="app">
  <p>{{ message }}</p>
  <p>{{ message + "!!!" }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</div>

자바스크립트 표현식을 사용할 때 주의해야할 점이 있다.

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

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

computed

cpmputed 속성은 데이터 연산들을 정의하는 영역이다.

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function(){
      // 여기서 this는 vm 인스턴스를 가리킨다.
      return this.message.split('').reverse().join('')
    }
  }
});

복잡한 계산은 computed (데이터 속성을 자동으로 계산해주는 속성)를 이용하여 나타내는 것이 좋다. HTML에 최종적으로 표현될 값만 나타내고, 데이터의 기본연산은 자바스크립트 단에서 함으로써 화면단 코드의 가독성을 높일 수 있기 때문이다. 또한 반복적인 연산에 대해서는 미리 계산하여 저장해 놓고, 필요할 때 바로 불러오는 caching 효과를 얻을 수 있다.

즉, computed 속성은 다음과 같은 장점을 가지고 있다.

data 속성 값의 변화에 따라 자동으로 다시 연산한다.
caching : 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작 ( 종속 대상 )

computed vs methods

methods 속성은 호출할 때만 해당 로직이 수행되고, computed 속성은 대상 데이터 값이 변경되면 자동적으로 수행된다. 즉, 수동적으로 데이터를 갱신하는지, 능동적으로 데이터를 갱신하는지의 차이이다.

methods속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱을 하지 않지만, computed 속성은 데이터가 변경되지 않는 한 데이터를 캐싱하고 있다가, 필요할때 반환해 준다. 따라서, 복잡한 연산을 반복 수행해서 화면에 나타내야 한다면, computed 속성을 이용하는 것이 성능면에서 더 효율적이다.

 computed: {
        message: function(){
          return Date.now();
        }
      }

computed 속성은 **종속 대상을 따라 저장(캐싱)**되기 때문에 Date.now() 와 같이 아무곳에도 의존하지 않는 속성은 절대로 update되지 않는다.

computed vs watch

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input v-model="message">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'reverse message',
      },
      watch: {
        message: function(data){
          console.log(data + '값이 변경됩니다.');
        }
      }
    });
  </script>
</body>
</html>

Directive

뷰 디렉티브란 HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다. 앞에서 다룬 v-bind 속성도 디렉티브에 해당된다. 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 뷰의 데이터 값이 변경되었을 대 화면의 요소들이 변경된 데이터 값에 따라 갱신된다. 화면의 요소를 직접 제어할 필요없이 뷰의 디렉티브를 활용해 화면 요소를 조작할 수 있다.

디렉티브 종류 역할

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

v-if

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

v-for

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

v-show

v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. (display:none css 를 주어 실제 태그는 남아 있고, 화면상으로만 보이지 않음)

v-bind

HTML 태그의 기본 속성과 뷰 데이터 속성 연결

v-on(@)

화면 요소의 이벤트를 감지하여 처리할 때 사용 v-on:을 간소화한 문법은 @ 이다.

v-model

form에서 주로 사용되는 속성으로, 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장해 서버에 보내거나 watch 와 같은 속성을 이용해 추가 로직을 수행할 수 있다. <input>, <select>, <textarea> 태그에만 사용가능

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <a 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">Vue Documents</h5>
    <button v-on:click="popupAlert">alert</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        flag: false,
        systems: ['ios', 'window', 'android'],
        uid: 10
      },
      methods: {
        popupAlert: function(){
          return alert('alert!!');
        }
      }
    });
  </script>
</body>
</html>

이벤트 처리

뷰 화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용한다.

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

var vm = new Vue({
  el: '#app',
  methods: {
    clickBtn: function(){
      alert('clicked');
    }
  }
});

다음 예제는 v-on:click 디렉티브를 추가하여 클릭 버튼 클릭시 clickBtn 메서드가 실행된다.

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

var vm = new Vue({
  el: '#app',
  methods: {
    clickBtn: function(num){
      alert('clicked'+num);
    }
  }
});

다음과 같이 인자를 넘길 수 있다. 추가적으로 event 인자를 이용해 화면 돔 이벤트에 접근할 수 있다.

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

var vm = new Vue({
  el: '#app',
  methods: {
    clickBtn: function(event){
	    console.log(event);
    }
  }
});

function(event){} 와 같이 event 인자를 정의하면 해당 돔 요소의 이벤트 객체에 접근할 수 있다.

MouseEvent {isTrusted: true, screenX: 2181, screenY: 557, clientX: 25, clientY: 356, …}

PreviousHTTP 통신 NextSingle File Component

Last updated 2 years ago

1. ES5에서 뷰 인스턴스의 template 속성 활용

2. 싱글 파일 컴포넌트 체계의 <template> 코드 활용

데이터 바인딩

v-bind

자바스크립트 표현식

computed

computed vs methods

computed vs watch

Directive

이벤트 처리

2. 싱글 파일 컴포넌트 체계의 `<template>` 코드 활용