Vue문법(2) - 바인딩, 렌더링, 핸들링

클래스와 스타일 바인딩

클래스에 active: isActive를 표시해줍니다.

active값은 isActive의 영향을 받습니다.

isActive가 true면, active를 추가할 수 있지만 false면 active를 추가할 수 없습니다.

이것이 클래스 바인딩입니다.

 

클래스 바인딩 참조 문서

 

스타일 바인딩 참조 문서

 

조건부 렌더링

조건부 렌더링 참조 문서

 

v-if, v-else, v-show

 

리스트 렌더링

리스트의 각각의 id를 고유하게 만든 shortid 패키지를 사용할 수 있습니다.

npm i -D shortid

생성시 id: shortid.generate() 메소드를 통해 고유한 id를 생성합니다.

리스트 렌더링 참조 문서

 

이벤트 핸들링

이벤트 핸들링 참조 문서

 

이벤트 핸들링 - 이벤트 수식어

이벤트 수식어 참조 문서

 

이벤트 핸들링 - 키 수식어

키 수식어 참조 문서

 

폼 입력 바인딩

단방향 데이터 바인딩, 즉 일방적으로 데이터를 연결하는 겁니다.

methods에서 수정을 해야만 html파일에서 수정된 내용이 나타납니다.

html파일에서 수정된 내용은 methods에 영향을 주지 않습니다.

 

html에서 수정된 내용이 실제 데이터에도 영향을 주면 양방향 데이터 바인딩이라고 합니다.

양방향 데이터 바인딩 참조 문서

 

v-model의 단점은 한글자가 완성되어야만 반응된다는 겁니다.

예를 들면, '하' 자를 입력하는데 ㅎ 를 반응해주지 않습니다.

이럴 때는 $event.target.value 방식으로 해야 실시간 반응해줍니다.

 

v-model 수식어

change : 입력 완료되면 반응합니다. 이것을 v-model.lazy로 축약할 수 있습니다.

 

입력하면 string형으로 반환되지만,

지속적으로 숫자형으로 반환하고 싶으면 v-model.number를 사용합니다.

 

입력창에 빈칸제거는 v-model.trim을 사용합니다.