1. 뷰 템플릿
뷰 템플릿은 뷰 인스턴스에서 정의한 로직을 HTML과 연결하여 최종 HTML로 변환해주는 속성이다.
뷰 템플릿을 적용하는 방법은 다음 두 가지가 있다.
- 뷰 인스턴스의 template 속성을 활용하는 방법(ES5)
- 싱글 파일 컴포넌트 체계의 <template> 태그(ES6)
2. 뷰 템플릿의 주요 요소
A. 데이터 바인딩
HTML 화면 요소와 뷰 인스턴스의 데이터를 연결하는 것. {{}} 형태를 사용한다.
{{}} 안에 자바 스크립트 표현식을 사용할 수 있다. 복잡한 로직처리는 불가하며, 연산이나 메소드호출과 같은 말 그대로 표현식만 사용 가능하다. 또한 표현식임에도 너무 복잡할 경우 computed 속성 사용을 권장한다.
[사용 불가]
{{ var a = 10; }}
{{ if (true) { return 100; } }}
[사용 가능]
{{ message }}
{{ true ? 100 : 0 }}
{{ message.split('').reverse().join('') }} //--> not recommended
B. 디렉티브
디렉티브는 화면의 요소를 쉽게 조작하기 위한 기능이다. HTML 태그 안에 v- 로 시작하는 속성이 디렉티브이며, 뷰 인스턴스 데이터로 화면을 제어하는 속성이라고 이해하면 될 것 같다.
[자주 사용하는 디렉티브]
| Directive name | Description |
| v-if | 참/거짓 여부에 따라 태그를 삽입/삭제한다. |
| v-for | 데이터의 개수만큼 태그를 반복 출력한다. |
| v-show | 참/거짓 여부에 따라 태그를 노출/숨김처리한다. |
| v-bind | 태그의 attribute와 뷰 데이터를 연결한다. |
| v-on | 태그의 이벤트(click, focus, blur 등)를 감지한다. 매핑 될 메소드 파라미터로 event를 받아서 이벤트 객체에도 접근 할 수 있다. |
| v-model | 폼(form)에 입력한 값을 뷰 인스턴스 데이터와 실시간으로 동기화 한다. <input>, <select>, <textarea>에만 사용 가능. |
[디렉티브 예제]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Template - Directives</title>
</head>
<body>
<div id="app">
<p v-if="flag">(v-if)Just-do-it! Vue.js</p>
<ul>
<li v-for="system in systems">(v-for){{ system }}</li>
</ul>
<p v-show="flag">(v-show)Just-do-it! Vue.js</p>
<h5 v-bind:style="styleAttr">(v-bind)Stylesheet</h5>
<button v-on:click="toggleFlagData">(v-on)Flag-Toggle</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
data: {
flag: true,
systems: ['android', 'ios', 'windows'],
styleAttr: 'color: blue'
},
methods: {
toggleFlagData: function(event) {
console.log(event);
this.flag = !this.flag;
return alert('toggled');
}
}
}).$mount('#app');
</script>
</body>
</html>
C. 고급 템플릿 기법
실제 애플리케이션 개발 시 유용한 템플릿 속성으로 computed, methods, watch가 있다.
| Attribute name | Description |
| methods | 호출 시 정의 된 로직을 수행 한다. |
| computed | 정의 된 로직을 수행하여 값을 계산한다. 데이터 값이 변경될 때만 내부 로직을 수행하며, 연산 후 값을 캐싱한다. |
| watch | 데이터 변화를 감지한다. 비동기 로직 처리에 적합하다. |
[템플릿 속성 예제]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Template - Directives</title>
</head>
<body>
<div id="app">
<p>methods: {{ methodsSource }}</p>
<p>computed: {{ computedFunc }}</p>
<button v-on:click="callMethod">Methods</button>
<button v-on:click="callComputed">Computed</button>
<p>computeSource: <input v-model="computeSource" /></p>
<hr />
<p>watchSource: <input v-model="watchSource" /></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
data: {
methodsSource: 'Hello Vue.js!',
computeSource: 'Hello Vue.js!',
watchSource: 'Hello Vue.js!'
},
methods: {
methodsFunc: function() {
this.methodsSource = this.methodsSource.split('').reverse().join('');
return this.methodsSource;
},
callMethod: function() {
alert(this.methodsFunc());
},
callComputed: function() {
alert(this.computedFunc);
}
},
computed: {
computedFunc: function() {
return this.computeSource.split('').reverse().join('');
}
},
watch: {
watchSource: function(data) {
console.log("watchSource has been modified! >>>>>", data)
}
}
}).$mount('#app');
</script>
</body>
</html>'Frontend' 카테고리의 다른 글
| Vue.js (9) 웹 애플리케이션 (0) | 2020.04.30 |
|---|---|
| Vue.js (8) 뷰 프로젝트 (0) | 2020.04.25 |
| Vue.js (6) HTTP 통신 (0) | 2020.04.23 |
| Vue.js (5) 라우터 (0) | 2020.04.21 |
| Vue.js (4) 컴포넌트 간 통신 (0) | 2020.04.11 |
