[Vue 프로젝트 05] Vue 컴포넌트 개발 2

# 랜더링 문법

1. v-if   vs v-show

v-if 는 조건에 따라 컴포넌트가 실제로 제거되고 생성된다.

v-show는 단순히 css 의 display 속성만을 변경 

 

# 이벤트 처리 

<div>       <button type="button" v-on:click ="increaseCounter">Add 1 </button>       <p>The Count is : {{counter}}</p>   </div> //methode 부분에 increaseCounter 함수를 만들어 줍니다. increaseCounter() {         this.counter = this.counter +1;   }

 

[결과] Add1 버튼을 클릭시 Count가 증가합니다.

 

 

-- KeyUp 활용하는 방법 Vue.js 파일에 

<input type="text" v-model="textValue" @keyup.enter="showValue"/>

생성한 뒤 스크립트 부분의 메소드 부분에서 추가 

showValue(){         alert(this.textValue);       }

텍스트박스에 쓴 글씨를 쓰고 엔터를 눌렀을 경우 저렇게 Alert창이 뜨는 것을 볼수 있다.