[vue] directives 뷰 주요 디렉티브 정리

뷰 디렉티브란?

html 태그안의 v-접두사를 가지는 모든 속성을 의미함. 

화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작할 수 있음.

 

directive name	role	비고
v-if	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 html 태그를 화면에 표시하거나표시하지 않는다.
v-for	지정한 뷰 데이터의 개수만큼 해당 html 태그를 반복 출력함
v-show	v-if와 유사하게 데이터의 진위 여부에 따라 해당html태그를 화면에 표시하거나 표시하지 않는다.	v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none;으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다.
v-bind	html 태그의 기본 속성과 뷰 데이터 속성을 연결
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용.	v-on:click
v-model	form에서 주로 사용되는 속성. 폼에 입력한 값을 뷰인스턴스의 데이터와 즉시 동기화함. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있음.	input, select, textarea 만 사용 가능