건설자
각 vue.js 응용 프로그램은 생성자 vue를 통해 vue의 루트 인스턴스를 만들어 시작합니다.
var vm = new vue ({// 옵션})VUE 인스턴스는 실제로 MVVM 모드에 설명 된 뷰 모델이므로 변수 이름 VM은 종종 문서에 사용됩니다.
VUE를 인스턴스화 할 때는 데이터, 템플릿, 마운트 요소, 메소드, 수명주기 후크 등과 같은 옵션을 포함 할 수있는 옵션 개체를 전달해야합니다. 모든 옵션은 API 문서에서 볼 수 있습니다.
VUE 생성자를 확장하여 사전 정의 된 옵션으로 재사용 가능한 구성 요소 생성자를 생성 할 수 있습니다.
var mycomponent = vue.extend ({// 확장 옵션}) // 모든`myComponent '인스턴스는 사전 정의 된 확장 옵션으로 생성됩니다. var myComponentInstance = new MyComponent ()확장 인스턴스는 필수적으로 생성 될 수 있지만 대부분의 경우 구성 요소 생성자는 사용자 정의 요소로 등록 된 다음 템플릿에서 선언적으로 사용됩니다. 나중에 구성 요소 시스템을 자세히 설명하겠습니다. 이제 모든 vue.js 구성 요소가 실제로 확장 된 vue 인스턴스임을 알아야합니다.
속성 및 방법
각 VUE 인스턴스는 데이터 객체의 모든 속성을 프록시합니다.
var data = {a : 1} var vm = new vue ({data : data}) vm.a === data.a //-> true // 속성 설정 속성도 원래 데이터 vm.a = 2data.a // -> 2 // ... 그 반대는마다 데이터 .a = 3vm.a //-> 3이러한 프록시 속성 만 반응합니다. 인스턴스가 생성 된 후 인스턴스에 새 속성이 추가되면 뷰 업데이트가 트리거되지 않습니다. 응답 시스템에 대해 나중에 자세히 논의 할 것입니다.
이러한 데이터 속성 외에도 VUE 인스턴스는 유용한 인스턴스 속성 및 메소드를 노출시킵니다. 이러한 속성과 방법에는 프록시의 데이터 속성과 구별하기 위해 $ prefix $가 있습니다. 예를 들어:
var data = {a : 1} var vm = new vue ({el : '#example', data : data}) vm. $ data === data //-> truevm. $ el === document.getElementById ( 'example') //-> true // $ watch ( 'a', function, '// thisbal) {// 변경되었습니다})모든 인스턴스 속성 및 메소드를 보려면 API 문서를 참조하십시오.
인스턴스 수명주기
VUE 인스턴스에는 일련의 초기화 단계가 생성 될 때 일련의 초기화 단계가 있습니다. 예를 들어, 데이터 관찰을 설정하고 템플릿을 컴파일하고 필요한 데이터 바인딩 생성이 필요합니다. 이 과정에서 일부 수명주기 후크를 호출하여 사용자 정의 논리에 대한 실행 기회를 제공합니다. 예를 들어, 인스턴스가 생성 된 후 생성 된 후크가 호출됩니다.
var vm = new vue ({data : {a : 1}, 생성 : function () {//`이것은 vm instance console.log를 가리 킵니다 ( 'a is :' + this.a)}) // -> "a is : 1"인스턴스 수명주기의 다른 단계에서 컴파일, 준비, 파괴와 같은 다른 고리도 있습니다. 이 훅은 VUE 인스턴스를 호출하는 것을 가리 킵니다. 일부 사용자는 vue.js가 "컨트롤러"라는 개념을 가지고 있는지 묻을 수 있습니까? 대답은 아니요. 구성 요소의 사용자 정의 논리는이 후크로 분할 될 수 있습니다.
수명주기 다이어그램
다음 그림은 인스턴스의 수명주기를 보여줍니다. 모든 것을 즉시 알아낼 필요는 없지만 앞으로는 도움이 될 것입니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.