뷰 디렉티브(vue Directeve)

HTML 태그 안에 v- 접두사를 가지는 모든 속성이다.

디렉티브는 화면의 요소를 더 쉽게 조작할 수 있게 도와준다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.


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

<p v-bind:class="test">v-bind 테스트</p>


v-if 는 지정한 뷰 데이터값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.


v-for  은 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.


v-show  v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none; 으로 준다.


v-on  은 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.


v-model  은 Form에서 주로 사용되는 속성으로 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. * <input>, <select>, <textarea> 태그에만 사용할 수 있다.



'Web Front > Vue.js' 카테고리의 다른 글

[Vue.js] 뷰 CLI 를 통한 프로젝트 생성  (0) 2018.06.14