html에 vue script를 직접적으로 추가하거나, cli를 설치하여 싱글페이지 웹으로 만들 수 있다.
new Vue({
//인스턴스 옵션 속성
el: indexl.html의 클래스&아이디
data :{객체를 반환하는 함수}
template: <el에 마운팅 되는 컴포넌트 명/>
components: {사용할 컴포넌트}
created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
})
인스턴스는 선택적으로 중첩이 가능하고 재사용가능한 컴포넌트 트리로 구성된다.
인스턴스가 생성될 때 data
객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다. 만약 속성값이 변경될 때 뷰가 반응하여 새로운 값과 일치하도록 업데이트된다.(데이터바인딩)
var data = { a: 1}
이 데이터 객체를 아래와 같이 vue인스턴스에 추가할 수 있다.
new Vue({
data: {
a: 1
})
그리고 데이터가 변경되면 화면은 다시 재랜더링이 된다.
데이터 내부에 빈 값이나 존재하지 않는 상태로 시작하는 것은 초기값으로 지정할 수 있다.