본문 바로가기

Vue.js

Vue.js 시작하기


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 인스턴스.

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



'Vue.js' 카테고리의 다른 글

Computed와 Watch  (0) 2019.01.08
SPA(Single Page Application)  (0) 2019.01.06
템플릿 문법  (0) 2019.01.06
Vue 인스턴스  (0) 2019.01.06
Vue CLI 로 Webpack Simple 프로젝트 생성  (1) 2019.01.02