Vue Template 기초 정리

doit! vue.js 입문 책을 보며 학습한 내용을 간략히 정리하였습니다.

Vue Template?

HTML, CSS등 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결해 사용자가 브라우저를 통해 볼 수 있는 HTML 형태로 변환해주는 것을 말합니다. 템플릿 속성은 크게 2가지로 하나는 ES5에 vue template 속성을 활용하는 방법과 다른 하나는 싱글 파일 컴포넌트 체계의 template 코드를 활용하는 방법입니다.

Vue Template 속성 및 문법

  • 데이터 바인딩
  • 디렉티브
  • 이벤트 처리
  • 자바스크립트 표현식
  • 고급 템플릿

1. 데이터 바인딩

HTML 화면 요소를 뷰 인스턴스의 데이터와 연결시키는 것으로 {{ }} 문법과 v-bind 속성을 가지고 있습니다.

1-1. {{ }} 콧수염 괄호

  • HTML 태그에 뷰 인스턴스의 데이터를 연결하는 기본 텍스트 삽입 방법
1
2
3
4
<div id="app">
  <!-- v-once : 뷰 데이터가 변경되어도 바꾸고 싶지 않을때 const 호이스팅 개념-->
  {{ message }}
</div>
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
 	 message: 'Hello Vue!'
  }
});

1-2. v-bind

  • 아이디, 클래스, 스타일등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 방식
  • HTML 속성 또는 props 속성에 접두사 접근
1
2
3
4
5
6
<div id="app" v-once>
  <!-- v-bind 생략 가능 -->
  <p :id = "idA">아이디 바인딩</p>
  <p v-bind:class = "classA">클래스 바인딩</p>
  <p v-bind:style = "styleA">스타일 바인딩</p>
</div>
1
2
3
4
5
6
7
8
new Vue({
  el: '#app',
  data: {
    idA : 100,
    classA : 'container',
    styleA : 'color : #008080'
  }
});

스크린샷 2019-06-25 오후 10 38 42

v-bind를 생략할 수 있지만 HTML 문법과 구분 및 협업에 있어서 사용하는 것을 권장

2. 자바스크립트 표현식

{{ }} 안에 자바스크립트 표현식을 사용할 수 있습니다.

1
2
3
4
5
<div id="app">
  <p>{{ message }}</p>
  <p>{{ message + ' !!!'}}</p>
  <p>{{ message.split('').reverse().join('')}}</p>
</div>
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
 	 message: 'Hello Vue'
  }
});

하지만 자바스크립트 표현식은 선언과 분기처리는 할 수 없으며 복잡한 함수연산이나 접근은 뷰 인스턴스에서 처리하는걸 권장합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="app" v-once>
  <!-- 선언 불가 -->
  <p>{{ let appID = '10'; }}</p>
  <!-- 분기 불가 -->
  <p>{{ if(appId) { return '100'; } }}</p>
  <!-- 연산 x -->
  <p>{{ message.split('').reverse().join('')}}</p>
 	<!-- 사용 가능 -->
  <p>{{ reverseMessage }}</p>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
new Vue({
  el: '#app',
  data: {
  	message : 'Hello Vue'
  },
  computed : {
  	reverseMessage : function() {
  		return this.message.split('').reverse().join('');
  	}
  }
});

이렇게 HTML엔 결과값만 나타내고 데이터 연산을 인스턴스내에서 처리하는 방법은 화면단의 코드 가독성을 높일 수 있으며 UI의 구조를 쉽게 파악할 수 있습니다.


3. 디렉티브

HTML 태그 안에 v 접두사를 가지는 모든 속성을 말합니다. v-bind 속성 또한 디렉티브에 해당하며 화면의 요소를 더 쉽게 다루기 위해 사용하는 기능을 뜻합니다. (데이터 변경시 요소들이 반응하여 변경된 값에 따라 갱신)


3-1. 디렉티브의 주요 종류

디렉티브명 기능 설명
v-if 지정된 vue 데이터의 true, false 여부에 따라 html 태그 표시
v-for 지정한 vue 데이터 개수만큼 html 반복
v-show v-if와 비슷한 개념으로 데이터의 진위여부에 따라 html 태그 표시 ( v-show는 css 효과만 display : none 옵션을 주어 화면상 노출 x)
v-bind html태그의 기본 속성과 뷰 데이터 속성을 연결
v-on 화면 요소의 이벤트 감지 후 처리시 사용 (ex = v-on : click)
v-model form에서 주로 사용되는 속성 form에 입력한 값을 뷰 인스턴스의 데이터와 동기화하여 입력한 값을 서버에 보내거나 watch등 고급속성을 이용해 로직 수행 가능(input,select,textarea)


1
2
3
4
5
6
7
8
9
<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="popAlert">경고 버튼</button>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
new Vue({
  el: '#app',
  data: {
      flag : false,
      systems : ['android', 'ios', 'window', 'mac'],
      uid : 100
  },
  methods: {
      popAlert : function() {
          return alert("경고창");
      }   
  }
});

스크린샷 2019-06-26 오전 3 29 36

위와 같이 v-if 의 경우 html 코드태그 자체가 보이지 않지만 v-show 디렉티브의 경우 css 속성을 통해 display:none으로 변경되는 것을 확인할 수 있습니다.

4. 이벤트처리

클릭, 키보드 입력과 같은 이벤트 처리를 말하며 v-on, methods 속성등을 활용하여 사용합니다.

인자를 넘겨주어 그것을 활용할 수 있으며, event를 인자로 정의했을때는 해당 돔 요소의 이벤트 객체에 접근이 가능합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
methods: {
  //<button v-on:click="popAlert(10)">경고 버튼</button>
  //   popAlert : function(num) {
  //			 result : 10 경고창 확인
  //       return alert(num + " 경고창 확인");
  //   }   
  //마우스 이벤트 객체 확인
  popAlert : function(e) {
 	 return console.log(e);
  }
}

스크린샷 2019-06-26 오전 3 38 35


5. 고급 템플릿

데이터 바인딩, 디렉티브와 같은 문법과 함께 사용하며 computed, watch등의 속성을 사용합니다.

5-1. computed

데이터를 가공 및 연산 작업은 뷰 인스턴스에서 처리하는데 이러한 연산을 정의하는 영역을 말합니다.

아래 예제와 같이 적용시킬 수 있으며 data 속성의 값이 변화할 때 전체 값을 다시 계산하고 동일한 연산을 반복하지 않기 위해 캐싱(연산의 결과값 저장 후 필요할 때 처리)의 기능을 합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
new Vue({
  el: '#app',
  data: {
  	message : 'Hello Vue'
  },
  computed : {
  	reverseMessage : function() {
  		return this.message.split('').reverse().join('');
  	}
  }
});

reverseMessage 속성을 사용하여 이미 연산처리 되어 있는 값을 필요한 부분마다 사용할 수 있으며 화면에 결과만 표시하게 됩니다.

이는 method 와 비슷한 개념이지만 실질적으로 computed 와 달리 method 는 속성을 호출할 때만 로직이 수행되는 차이를 가지고 있어 능동적 형태, 수동적 형태의 차이가 있습니다. 이를 통해 알 수 있는 것은 복잡한 연산이 많은 화면에서는 computed를 사용하는 것이 더 효율적이란 점입니다.


5-2. watch

데이터 변동을 인식해 자동적으로 특정 로직을 수행하는 것을 말합니다. computed는 작은 로직에 유용한 반면 watch 속성은 상대적으로 시간이 더 소요되는 비동기 처리에 적합한 로직입니다.

1
2
3
<div id="app">
	<input v-model="message">
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
new Vue({
  el: '#app',
  data: {
  	message : 'Hello Vue'
  },
  watch : {
  	message : function(data) {
        console.log("message changed : ", data);
  	}
  }
});

스크린샷 2019-06-26 오후 12 37 44

input 태그에 입력한 값에 따라 console.log 에 찍히는 값이 변화되는 것을 확인할 수 있습니다.


Reference