07. Vue.js - 뷰 템플릿

(2021.01.19)

뷰 템플릿

뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다.

1. ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법

2. 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법

템플릿에서 사용하는 뷰의 속성과 문법

: HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것

{{ }} - 콧수염 괄호

예전에 공부하던 책에서 {{ }} 를 이용했을 때도 맨날 이런 오류가 났는데

대체 뭐가 문제인지.... 모르겠다...... 밑에 있는 예시들에서는 또 실행이 잘된다.... 뭐지?!?

v-bind

v-bind 는 아이디, 클래스, 스타일 등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다.

형식은 v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다.

자바스크립트 표현식에서 주의할 점

1. 자바스크립트의 선언문과 분기 구문은 사용할 수 없다.

2. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야한다.

뷰 디렉티브는 HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.

디렉티브 이름	역할
v-if	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
v-for	지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.
v-show	v-if 와 비슷하게 데이터의 진위 여부에 따라 HTML 태그를 화면에 표시하거나 표시하지 않는다. v-show는 해당 태그가 남아있다.
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용한다.
v-model	폼에서 주로 사용하는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch 와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다.

이벤트 처리에는 v-on 디렉티브와 methods 속성을 활용한다.

computed 속성

computed 속성은 데이터 값이 변경되면 자동으로 수행된다.

methods 속성은 호출할 때에만 수행된다.

computed 속성을 이용하는 것이 methods 속성을 이용하는 것보다 성능면에서 효율적이다.

watch 속성

watch 속성은 데이터 변화를 감지해서 자동으로 특정 로직을 수행한다.

input 박스의 입력값을 v-model 디렉티브로 연결해서 입력값에 변화가 있을 때마다 watch 속성에서 변화된 값을 로그로 출력한다.

728x90