vscode로 Vue.js 시작하기

셋팅하기

패키지 설치

vscode에 들어가 package 탭에 ventur를 쳐서 다운을 받는다.

 

디렉토리를 만든후 새로운 html파일 index.html을 만든다.

다음, "!" 표를 입력한다음 아래와 같이 클릭을 하면, 기본적인 html이 만들어진다.

 

직접 스크립트에 추가하기

https://kr.vuejs.org/v2/guide/installation.html 사이트에 들어가 스크립트 하나를 긁어온다.

그런 다음 설치한 프로젝트 경로로 들어가, index.html을 실행시켜주면 정상 동작하는 것을 확인할 수 있다.

 

 

 

뷰 인스턴스 생성

이제 본격적으로 뷰 인스턴스를 생성해서, 그 안에서 데이터 작업을 진행할 것이다.

먼저 body태그 내부에 script태그를 생성하고, 아래와 같이 인스턴스를 생성해준다.

 

이렇게 하면, app 태그 안에 뷰 코드를 작성할 수 있게 된다.

 

뷰 데이터 이해하기

인스턴스가 완료되었다면, data를 만들어보자. data는 다음과 같이 쌍 중괄호({{}})에 직접 변수를 넣어 쓸수도 있고, 지금 스크린샷처럼  person이란 상위태그를 묶어서 표현할수도 있다.

뷰 메소드 이해하기

메소드를 이용하면, 더 쉽게 사용이 가능하다.

메소드 내에서 Data를 사용할때는, this만 사용해도 되는데 그 이유는,  vue에서 data를 this에 넣어주기 때문에, 아래 리턴값과 같은 접근이 가능해진다.

또한 메소드에 매개변수를 넣어 아래와 같이 처리도 가능하다.

 

 

지금까지는 : function이라고 직접 명시를 해 처리를 했지만, 명시하지 않아도 펑션으로 받아들인다.

 

데이터 바인딩하기

data 바인딩을 하려고 할 때, 단순히 태그에 value이름을 맞춘다고 적용이 되지 않는다.

대신 "v-bind:value"를 써주면, data가 바인딩이 된다.

 

value에만 국한되는게 아니라, type을 정할때도, v-bind:를 사용만하면, 바뀌어지는 것을 확인할 수 있다.

v-bind:는 " : " 으로 생략이 가능하다. 그러므로 아래와 같이 좀더 심플하게 표현도 가능하다.

 

메소드에 파라미터 넣기

메소드에 파라미터를 넣을수도 있다. 링크를 아래와 같이 만들수도 있지만, 

 

특정 아이디를 입력해서 깃헙에 접근하려면 아래와 같이 매개변수를 받아 처리도 가능하다.

 

이벤트 이해하기

이벤트는 어떤 사건이 발생했을때, 무엇이 발생이 발생하는 것을 의미한다. 자바스크립트의 onClick이벤트를 생각하면 되는데, vue에서는 v-on:Click으로 표현이 가능하다.

 

기본적으로 자바스크립트에서 form을 이용한 submit의 경우, 클릭시 바로 페이지가 리로드가 된다. 근데, 만약에 이를 해결하기 위해선, 이벤트 수식어를 활용하면 된다.

아래와같이 이벤트 수식어 prevent를 사용하면, 리로드 되지않고, console이 살아있는것을 확인할 수 있다.

(공식문서 이벤트 헨들링 > 이벤트 수식어에 더 많은 이벤트 기능이 있으니 참조.)