뷰2

뷰 인스턴스

뷰로 개발할때 필수로 생성해야함

 

new Vue();

var vm = new Vue({

            el: '#app', //body에서 app이라는 id를 가진 태그 엘레먼트를 가져오겠다

            data: {

                message: 'hi'

            }

        }); //api //개발하기 쉽게 제공

 

뷰를 왜 생성자 형태로 정의하는가?
만약 뷰의 내부 함수를 아래와 같이 미리 정의해놓는다면

function Vue(){
    this.logText = function(){
        console.log('hello');
    }
}

 

var vm = new Vue();

라고 선언할때마다 Vue의 logText 기능을 따로 정의하지 않아도 사용할 수 있다.

vm.logText(); 사용가능!

 

뷰를 생성할 때마다 미리 정의해 놓은 형식, 함수를 그대로 사용할 수 있어 생성자 형태로 정의한다.

 

 

재사용할 수 있는 옵션과 기능들!

new Vue({

el:, //

template:,

data:, 

methods:, 

created:,

watch:,

});

 

var vm = new Vue({

 옵션을 하나씩 , 로 연결해 나가는 것을 권장});

(* var option ~~, new Vue(options) 권장 X)

 

뷰 컴포넌트

화면의 영역을 구분하여 개발

컴포넌트간의 관계가 有

 

컴포넌트 통신 방식

뷰 컴포넌트는 각가 고유한 데이터 유효범위를 갖는다

상위 -> 하위 데이터 내려줌 (props)

하위 -> 상위 이벤트 올려줌(이벤트 발생)

 

컴포넌트 통신 방식이 정해지면

데이터의 흐름을 추적할 수 있다.(mvc 에서는 데이터 흐름이 복잡해서 버그 발생하면 파악이 어려움)