Vue.js

Vue.js 시작하기

KimJye 2019. 1. 2. 05:31


Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것

데이터와 DOM이 연결되어 이제 모든 것이 반응형이다.



DOM : 브라우저의 JavaScript 콘솔에서 보여주는 것들

  • 예) HTML 작성시 <table> 안에 <tbody>없이 <tr>,<th>를 사용한 경우, 개발자 도구에는 <tbody>가 존재
  • <tbody>는  DOM에 있다.



선언적 렌더링



 v-bind : 렌더링 된 DOM에 특수한 반응형 동작




조건문과 반복문


v-if : 조건

v-for : 반복





사용자 입력 핸들링


v-on 디렉티브 : 상호 작용, 특히 DOM을 직접 건드리지 않고 Vue에 의해 처리되고 업데이트

v-model 디렉티브 : 양식에 대한 입력과 앱 상태를 양방향으로 바인딩



컴포넌트를 사용한 작성방법


Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴스.

대규모 응용 프로그램에서는 개발 과정을 관리할 수 있는 수준 하에 두기 위해 전체 앱을 컴포넌트로 나누는 것이 필수적이다.