Vue.js

컴포넌트 등록과 props 속성

컴포넌트 등록 Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이다. 기본적으로 컴포넌트의 보이는 부분을 표시할 때에는 template을 이용해서 작성해주면 된다. // todo-item 이름을 가진 컴포넌트를 정의 Vue.component('todo-item', { template: '할일 항목 하나입니다.' }) var app = new Vue(...) 하지만 이러한 컴포넌트 등록은 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링할 뿐, 부모 영역의 데이터를 자식 컴포넌트에게 전달할 수 있어야 한다. Props 전달 v-bind 를 사용하여 각각의 반복되는 컴포넌트를 전달할 수 있다. v-bind:프롭스 속성이름="상위 컴포넌트의 데이터" 👉 "이 요소의 title 속성을 Vue 인스턴스..

Vue.js 시작하기

Vue.js 란? 작은 화면단 라이브러리 역할부터 큰 규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프론트엔드 프레임워크이다. 명시적 렌더링(코어 라이브러리) → 컴포넌트 기반 → 클라이언트 사이드 라우팅(프레임워크 기능) → 상태관리 시작하기 문서에 vue 스크립트를 가져올 때 개발버전으로 가져와서 수정을 하며 배포할 때에는 상용버전으로 사용한다. 개발버전에서는 크롬 확장팩을 통해 데이터 수정이 가능하지만, 상용버전은 수정이 불가능하다. Vue.js 공식 문서 선언적 렌더링 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다. {{ str }} React와 다른점은 데이터와 DOM이 연결되어 업데이트 변경된 값에 따라 업데이트가 되는 것을 볼 수..