vuejs 디렉티브

vuejs 공식문서 - https://kr.vuejs.org/v2/guide/syntax.html#%EB%94%94%EB%A0%89%ED%8B%B0%EB%B8%8C

 

html 테그에 사용하며 표현식의 값이 변경될 때 반응적으로 DOM 을 변경하는 기능.

v-if v-show v-for v-bind v-on 과 같이 v- 접두사를 붙여 사용하며

v-if 는 해당 테그를 렌더링 할지 아닐지 결정

v-show 는 해당 테그의 display 속성을 결정

v-for 는 해당 테그를 렌더링할 때 반복문을 이용해 복수의 테그를 생성

v-bind 는 html 요소값을 변경 (단방향 바인딩???) / 약어는 : (ex 'v-bind:href' == ':href' )

v-on 은 DOM 이벤트를 하는 디렉티브 /  약어는 @ (ex 'v-on:click' == '@click' )

v-model 은 form 데이터용 바인딩 양방향 바인딩이다. form 데이터 바인딩 의 경우를 예로 들면 input 태그의 입력 값을 다른 태그에 표시하고 싶을 때에 이 양방향 바인딩이 필요하다. (https://joshua1988.github.io/web-development/vuejs/v-model-usage/)