[Vue.js] 뷰 템플릿

뷰 템플릿

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

📌데이터 바인딩

데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미

주요 문법은 {{}} 문법과 v-bind 속성이 있다.

{{ }} - 콧수염 괄호

• 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식

v-bind

• 아이디, 클래스, 스타일 등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식
• v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다.

📌디렉티브

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

<a v-if="flag">vue.js</a>

• v-if : 지정한 뷰 데이터의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
• v-for: 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.
• v-show: v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
• v-bind : HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다,
• v-on: 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. v-on:click 은 해당 태그의 클릭 이벤트 감지하여 특정 메서드 실행
• v-model : 폼(form)에서 주로 사용되는 속성. 화면에 입력된 값을 저장하여 서버에 보내거나 watch같은 고급 속성을 이용하여 추가로직을 수행. <input>,<select>,<textarea> 태그에만 사용 가능