티스토리 뷰
뷰 템플릿
뷰의 템플릿은 HTML, CSS 등 의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다.
라이브러리 내부적으로 template 속성에서 정의한 마크업과 뷰 테이너를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을하고, 변환 과정에서 뷰의 반응성이 화면에 더해진다.
템플릿 속성을 사용하는 첫 번째 방법은 template 속성을 활용한 방법이다. 지금까지 예제로 사용했다. 두 번째는 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법이다.
// 1
new Vue({
...
template: `<div> Hello Vue.js! </div>`
});
// 2
<template>
<p>Hello {{ message }}</p>
</template>데이터 바인딩
데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로 {{}}과 v-bind가 있다.
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: "Hello Vue.js!"
}
});
</script>
--------------------------------------------------------------
<div id="app" v-once>
{{ message }}
</div>
<!-- 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않은 경우 v-once를 사용한다. --><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>
v-bind: 문법은 단순히 : 로 간소화할 수 있다. 예를 들어 v-bind:id 와 :id 는 같은 동작을 수행한다. 하지만 가급적 v-bind를 사용해야 HTML 문법과 구분되고 다른 사람이 알아보기 쉽다.
자바스크립트 표현식
데이터 바인딩 기법 중 하나인 {{ }} 안에 자바스크립트 표현식도 작성 가능하다. 하지만 모든 표현식이 가능한 것은 아니다.
1. 자바스크립트의 선언문과 분기 구문은 사용할 수 없다.
2. 복잡한 연산은 인스턴스 내부에서 처리하고, 화면에는 간단한 연산 결과만 표시해야한다.
디렉티브
디렉티브는 HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미한다. v-bind도 디렉티브에 해당한다. 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.
- v-if
지정한 뷰 데이터의 참, 거짓 여부에 따라 HTML 태그를 표시하거나 표시하지 않는다. - v-for
지정한 뷰 데이터의 개수 만큼 해당 HTML 태그를 반복한다. - v-show
v-if와 유사한 기능이다. 다만, v-if는 해당 태그를 완전히 제거하지만, v-show는 css 효과만 display: none; 으로 주어 실제 태그는 남아있고, 화면 상으로는 보이지 않는다. - v-bind
HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다. - v-on
화면 요소의 이벤트를 감지하여 처리할 때 사용한다. - v-model
폼(form)에서 주로 사용되는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. <input>, <select>, <textarea> 태그에만 사용할 수 있다.
<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">Vue 입문서</h5>
<button v-on:click="popupAlert">경고 창 버튼</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="js/app.js"></script> -->
<script>
new Vue({
el: "#app",
data: {
flag: false,
systems: ['ios', 'android', 'window'],
uid: 10
},
methods: {
popupAlert: function() {
return alert("경고 창 표시")
}
}
})
</script>
</body>이벤트 처리
뷰에서는 화면에서 발생한 이벤트 처리를 위해 v-on 디렉티브와 methods 속성을 활용한다.
...
<button v-on:click="clickBtn(인자)"> 클릭 </button>
...
<script>
new Vue({
...
methods: {
clickBtn: function(인자 or event 객체) {
...
}
}
});
</script>고급 템플릿 기법
computed 속성
복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로 HTML에는 데이터만 표현해야한다. computed 속성은 이러한 데이터 연산들을 정의하는 영역이다.
<div id="app">
<p> {{ reversedMessage }} </p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
});
</script>computed 속성의 장점은 data 속성 값의 변화에 따라 자동으로 다시 연산한다는 것이다. 그리고 캐싱이다. 캐싱은 동일한 연산을 반복해서 하지 않기 위해 연산의 결과를 미리 저장하고 있다가 필요할 때 불러오는 동작이다.
methods와 computed의 차이점
methods 속성은 호출할 때만 로직이 수행되고, computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행된다. computed 속성은 데이터가 변경되지 않는 한, 이전의 값을 가지고 있다가 필요할 때 바로 반환해주기 때문에, 복잡한 연산을 반복적으로 수행한다면 computed가 성능면에서 효율적이다.
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMsg">문자열 뒤집기</button>
<p>{{ reverseMessage }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "Hello Vue.js"
},
methods: {
reverseMsg: function() {
this.message = this.message.split('').reverse().join('');
}
},
computed: {
reverseMessage: function() {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
watch 속성
watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성과 유사하지만, computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면, watch 속성은 데이터 호출과 같이 시간이 상대적ㅇ로 더 많이 소모되는 비동기 처리에 적합하다.
'Vue.js' 카테고리의 다른 글
| [Vue.js] 라우터와 HTTP 통신 (0) | 2021.06.24 |
|---|---|
| [Vue.js] 뷰 인스턴스와 컴포넌트 (0) | 2021.06.21 |
| [Vue.js] Vue.js 소개 (0) | 2021.06.21 |