[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>
태그에만 사용 가능
Author And Source
이 문제에 관하여([Vue.js] 뷰 템플릿), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@silverbi99/Vue.js-뷰-템플릿저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)