Vue.js 기초 익히기 (1)
===

###### tags: `지호`, `Vue.js 기초 익히기`

---

## 1. 뷰 인스턴스 생성하기

### Vue.js
- 프로그레시브 프레임워크
- 다른 프레임워크와 달리 뷰를 점진적으로 채택 --> 기존 프로젝트를 뷰 프로젝트로 만들고 싶을 때 부분적으로 업데이트하면서 전환 가능
- 뷰 코드를 기존 프로젝트에 추가: 직접 `<script>` 추가
- 처음부터 뷰 프로젝트 생성: Vue CLI

<br/>

### 뷰 인스턴스 생성
모든 뷰 앱은 새로운 뷰 인스턴스를 만드는 것부터 시작

<br/>

## 2. 데이터 바인딩

### 데이터와 메소드
- 뷰 인스턴스가 생성될 때 `data` 객체에 있는 모든 속성이 뷰의 반응형 시스템에 추가된다.
- 데이터가 변경되면 화면은 다시 렌더링된다.
- `data`에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형 -> 새 속성을 추가하면, 변경되어도 화면이 갱신되지 않는다.

<br/>

### 데이터 바인딩
`v-bind`
- 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용
- `:` 로 대체 가능

<input :type"text" v-bind:value="inputData">


<br/>

## 3. 이벤트
- 이벤트 수식어: https://kr.vuejs.org/v2/guide/events.html#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%88%98%EC%8B%9D%EC%96%B4
- 키 수식어: https://kr.vuejs.org/v2/guide/events.html#%ED%82%A4-%EC%88%98%EC%8B%9D%EC%96%B4

`v-on:`
- DOM 이벤트를 듣고 트리거 될 때 JavaScript 실행
- 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용
- `@`로 대체 가능
- 사용자 이벤트에 의해 실행된 뷰 메서드 함수의 첫번째 인자에는 해당 이벤트가 들어온다.


## 4. 데이터 양방향 바인딩
- keyup 이벤트에서 키보드 이벤트를 자동으로 넣어줌

`v-model`
- form input과 textarea element에 양방향 데이터 바인딩 생성 가능
- 사용자 입력 이벤트에 대한 데이터를 업데이트
- HTML 입력 요소의 종류에 따라 속성이 다음과 같이 구성
- input: value / input
- checkbox: checked / change
- select: value / change
- 한/중/일어에서는 한글자가 끝나야 반응한다는 한계점 존재


<br/>

## 참고
https://joshua1988.github.io/web-development/vuejs/v-model-usage/

<br/>