뷰 템플릿이란?
뷰의 템플릿은 html, css등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해주는 속성이다.
데이터 바인딩
html 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{}} 문법과 v-bind 속성이 있다.
{{ }} - 콧수염 괄호
뷰 인스턴스의 데이터를 html 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.
v-bind
아이디, 클래스, 스타일 등의 html 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식
자바스크립트 표현식
뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다. 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 된다.
[❗]
자바스크립트 표현식에서 주의할 점
1. 자바스크립트의 선언문과 분기구문은 사용불가
2. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 함.
첫째. html 에 최종적으로 표현될 값만 나타내고, 데이터의 기본 연산은 자바스크립트 단에서 함으로써 화면단 코드의 가독성을 높일 수 있기 때문이다.
둘째. 반복적인 연산에 대해서는 미리 계산하여 저장해 놓고, 필요할 때 바로 불러오는 캐싱효과를 얻을 수 있음.
디렉티브
뷰 디렉티브란 html 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.
<a v-if="flag">두잇 Vue.js </a>flag 값이 참이면 텍스트가 보일 것이고 거짓이면 보이지 않을 것이다. 즉 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다.
이벤트 처리
클릭이나 키보드 입력과 같은 이벤트 처리! v-on 디렉티브와 methods속성을 활용한다. 제이쿼리 못지 않게 뷰도 이벤트 처리가 간단하다.
고급 템플릿 기법
실제 애플리케이션을 개발할 때 유용한 속성으로 앞에서 배운 데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용한다.
-
computed 속성
장점1: data 속성 값의 변화에 따라 자동으로 다시 연산한다는 점.
ex) computed 속성에서 사용하고 있는 data 속성 값이 변경되면서 전체 값을 다시 계산함
장점2: 캐싱 -
computed 속성과 methods 속성의 차이점
methods 속성은 호출할 때만 해당 로직이 수행되고, computed 속성은 대상 data의 값이 변경되면 자동으로 수행됨
즉, 수동적으로 data를 갱신시키느냐, 능동적으로 data를 갱신시키느냐 그 차이 -
만약 복잡한 연산을 반복 수행하여 화면에 나타내야 한다면 computed 속성을 이용하는 것이 성능 면에서 효율적임
-
watch 속성
데이터 변화를 감지하여 자동으로 특정 로직을 수행. computed 속성은 내장 api를 활용한 간단한 연산에 적합한 반면, watch속성은 데이터 호출과 같이 시간이 많이 소모되는 비동기 처리에 적합!
(비동기 처리: 웹 앱에서 data를 호출할 때 일반적으로 서버에서 http 요청을 보낸다. 그런데 js 코드가 실행되는 시점에서는 서버에 보낸 요청이 언제 응답이 올지 모른다. 따라서 js 연산에 영향을 주지 못하도록 별도의 영역(실행 컨텍스트)에서 해당 data를 요청하고 응답을 기다린다. 이를 자바스크립트 비동기 처리 로직이라고 한다.)
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)
