1.뷰 템플릿이란?
뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연껼하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다.
2.데이터 바인딩
데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미 한다. 주요 문법으로는 {{}}문법과 v-bind속성이 있다.
{{}} 콧수염 괄호
뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다. 뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법이다.
<body>
<div id="app">
<h3>{{ message }}</h3>
</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!'
}
});
</script>
</body>v-bind
v-bind는 id,class,style 등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다. 형식은 v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다.
<body>
<div id="app">
<p v-bind:id="idA">id 바인딩</p>
<p v-bind:class="classA">class 바인딩</p>
<p v-bind:style="styleA">style 바인딩</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>- v-bind: 문법을 :로 간소화할 수 있다. 예로, v-bind:id와 :id는 같은 동작을 한다. 가급적 v-bind를 사용, 뷰 코드가 전반적으로 v-접두사를 붙이는 형태이기 때문에 기존 HTMl문법과 구분도 되고 다른 사람이 코드를 파악하기도 쉽다.
Javascript 표현식
뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다. 데이터 바인딩 방법 중 하나인 {{}} 안에 자바스크립트 표현식을 넣으면 된다.
- 주의점
자바스크립트의 선언문과 분기 구문은 사용할 수 없다. 또한 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.
<body>
<div id="app">
<!-- X,선언문은 사용 불가 -->
{{ let a = 10; }}
<!-- X, 분기 구문은 사용 불가능 -->
{{ if(true) {return 100} }}
<!-- O, 삼항 연사자로 표현 가능 -->
{{ true ? 100 : 0 }}
<!-- X, 복잡한 연산은 인스턴스 안에서 수행 -->
{{ message.split('').reverse().join('') }}
<!-- O, 스크립트에서 computed 속성으로 계산 후 최종 값만 표현 -->
{{ reverseMessage }}
</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 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다. v-bind 속성도 디렉티브에 해당한다. 디렉티브의 형식은 다음과 같다.
<a v-if="flag">Vue.js</a>디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브(Reactive)하게 반응하여 변경된 데이터 값에 따라 갱신된다. 화면의 요소를 직접 제어할 필요 없이 뷰의 티렉티브를 활용하여 화면 요소들을 조작할 수 있다.
- v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
- v-for : 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.
- v-show : v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 'disply:none;'으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다.
- v-bind : HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
- v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 'v-on:click'은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.
- v-model : 폼(form)에서 주로 사용되는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. input,select,textarea 태그에만 사용할 수 있다.
이벤트 처리
웹 앱에서 사용자의 클릭이나 키보드 입력과 같은 이벤트를 처리하는 것은 당연하다. 뷰 역시 화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용한다.
computed 속성과 methods 속성의 차이점
methods속성은 호출할 때만 해당 로직이 수행되고, computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행된다는 것이다. 다시 말해 수동적으로 데이터를 갱신하느냐, 능동적으로 데이터를 갱신하느냐의 차이점이 있다.
위의 차이점을 인지한 상태에서 다시 캐싱 면에서 두 속성을 보면 methods 속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱을 하지 않지만, computed속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가(캐싱하고 있다가) 필요할 때 바로 반환해 준다. 따라서 복잡한 연산을 반복 수행해서 화면에 나타내야 한다면 computed 속성을 이용하는 것이 성능 면에서 효율적이다.
watch 속성
데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에, watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.
