본문 바로가기

Web/Vue.js & Nuxt.js

Vue 디렉티브(v-접두사) 간단 정리

디렉티브 종류 및 역할

v-접두사로 시작하는 모든 속성을 디렉티브라고 한다.

v-if 참,거짓 여부에 따라 해당 태그를 화면에 표시할 지, 말지를 정함

v-show 참 거짓 여부에 따라 태그를 화면에 표시할지 말지를 정한다.

(v-if와 v-show의 차이는 v-if는 false시에 화면에서 아예 해당 태그를 삭제,

v-show는 태그는 존재하나 화면에서 숨기는 정도. 주로 if를 많이 씀)

 

v-for 조건식에 맞게 반복해서 어떤 태그를 생성해 내는 역할을 한다.

v-bind html속성과 뷰 데이터를 연결해줌 바인딩이 필요한 경우

v-on 이벤트를 감지해서 처리한다. 예를들어 이벤트 발생시 연결된 메소드를 실행

v-model 주로form 에서 많이 쓰고 폼에 입력한 값을 뷰 데이터와 즉시 동기화 input, select, textarea태그에만 사용가능