[Vue] 인스턴스 생성하기

김땅주·2021년 7월 14일
0

Vue

목록 보기
2/6
post-thumbnail

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
})

그리고 데이터가 변경되면 화면은 다시 재랜더링이 된다.
데이터 내부에 빈 값이나 존재하지 않는 상태로 시작하는 것은 초기값으로 지정할 수 있다.

profile
일곱 번 넘어져도 여덟 번 일어나면서 성장하는 프론트 개발자입니다

0개의 댓글

관련 채용 정보