1. Vue.js의 구성요소

el

지정된 엘리먼트
주로 DOM의 요소에 id를 지정하고, Vue.js 인스턴스를 연결한다.

data

정보, 데이터

watch

정보가 변경되었을 때 감지해서 실행할 기능이 모여 있는 곳이다.
데이터의 변화를 감지해서 어떤 기능을 쓰고 싶을 경우 사용한다.

computed

계산된 속성을 표시하거나 데이터를 변형해서 표시하고 싶을 때 이용한다.
데이터를 바꾸거나, 계산해서 출력하고 싶을 경우 사용한다.

method

함수, 어떠한 기능을 할 수 있도록 만들어 둔 곳이다.
즉, 실행할 기능들의 함수 집합을 의미한다.

mounted

DOM이 그려진 이후에 실행할 코드

created

처음 뷰 인스턴스가 만들어질 때 실행할 코드
뷰 인스턴스만 만들어지고 DOM은 그려지지 않으므로 created에서는 DOM의 구성요소를 변경할 수 없다.

2. Vue.js 사용하기

v-model

사용자 입력 혹은 변하는 값을 연동할 때 사용한다.

v-model="text

input 태그 / textarea 태그 / checkbox 등에 이용 가능하다.

v-on

이벤트나 메소드를 연동할 때 사용한다.

v-on:click = "click" => @click = "click"

v-on:keyup.enter = "enter"

v-if

조건부 출력 시 사용한다.

v-if

v-if-else

v-else

v-show

v-for

반복해서 출력할 때 사용한다.