Vue 시작하기 ①

 

학원에서 배웠지만 사용을 안 하다 보니 그새 머릿속에서 지워지고 있었다

기억을 되살리자는 의미로 블로그에 정리를 해보겠다

 

 

 

본격적으로 Vue.js 시작하기

Vue 공식문서를 참고해가면서 공부하면 좋다

참고 예시가 아주 잘 나와있기 때문 :)

 

 

vue 공식 페이지의 '시작하기'를 클릭해서 천천히 읽어보기를 추천한다

 

일단 HTML 코드 복사하여 사용하고자 하는 파일에 붙여 넣는다

 

 

https://kr.vuejs.org/v2/guide/

시작하기 — Vue.js

 

 

 

 

 

<script> 안에 vue를 작성한다

app이라는 새로운 vue 생성자를 만들고,

여기에 연결 요소를 추가하려면 el: "#아이디 이름"을 작성하여 컨트롤이 가능하다

밑의 data에 원하는 데이터를 추가하여 (위에선 fortune) html에서 2겹의 컬리브라켓 {{ }} 안에 넣어 사용이 가능하다

 

이렇게 하면 데이터와 DOM이 연결된 것이며 반응형이 된 것이다.

실제 콘솔 창에 app.forfune을 다른 값으로 변경하면 변경된 값으로 바로! 업데이트된다

 

Vue를 통해서 app과 같은 단일 DOM 요소에 바로 연결되어 완전히 제어가 가능하며, 또한

변화가 즉시 반영된다.

 

 

위의 코드를 실행하면 이러한 결과가 나온다

 

 

 

 

이번엔 사용자 입력 핸들링 방법에 대해 알아보자

vue의 v-on 디렉티브를 이용하여 methods를 호출하는 이벤트 핸들링이 가능하다

 

v-on:이벤트명="methods object에 있는 호출될 함수명" 형식을 지켜서 사용하면 된다.

 

위의 코드에선 요소를 클릭하면 clicked 메서드가 호출되며,

clicked함수는 msg의 내용을 "버튼을 눌렀네요?"라고 바뀌게 만든다.

 

여기서 this.msg의 this는 data object안의 msg를 참조한다.

 

'눌러보세요' 버튼을 클릭하기 전엔 밑에 아무런 글이 없다가

버튼을 클릭하니 밑에 '버튼을 눌렀네요?'라는 메시지가 나타난다.

v-on:click 외에도 v-on:mouseover 등 여러 가지 이벤트 핸들링이 존재한다.

자바스크립트의 이벤트 리스너를 생각하면 된다.

 

 

 

 

 

5개의 div에서 click 이벤트가 발생하면 divClicked라는 메서드를 호출한다.

divClicked 메서드가 호출되면 이벤트 인자를 받아서 콘솔 창에 출력하며,

이벤트가 발생한 문서 객체의 참조값(=e.target)의 innerText가 "clicked!"로 바뀐다.

 

 

 

div 1 ~ div 5까지의 박스가 존재하며

여기서 div1을 클릭하자마자 (클릭되어 이벤트가 발생 한 target이 됨) divClicked 메서드가 호출되어

innerText가 clicked!로 변경되었다

 

 

 

 

이번엔 이벤트 발생을 막는 방법이다

js도, vue에서도 e.preventDefault(); 를 이용하여 이벤트 발생을 막을 수 있다.

 

하지만 vue에선. prevent 수식어가 존재하여 이를 통해 기본 이벤트를 막는 게 가능하다

전송하는 submit 이벤트를 막고 싶다면 v-on:submit.prevent=""로 작성해준다.

밑의 메서드에 e.preventDefault(); 를 따로 작성하지 않아도 된다.

 

 

첫 번째의 e.preventDefault(); 방법과

두 번째의 v-on:submit.prevent 방법 둘 다 기본 이벤트의 발생을 막아준다.