vue.js 인스턴스 개체 및 구성 요소 트리 인스턴스에 대한 자세한 설명-JS 튜토리얼-php.cn

vue.js 인스턴스 개체 및 구성 요소 트리 인스턴스에 대한 자세한 설명

小云云

풀어 주다： 2018-01-04 13:39:42

원래의

2017명이 탐색했습니다.

이 글은 주로 vue.js 인스턴스 객체 + 컴포넌트 트리 관련 정보를 소개하고 있으니, 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

vue의 인스턴스 객체

먼저 js

el의 새 키워드를 사용하여 vue를 인스턴스화합니다. 페이지에서 vue 구성 요소나 객체가 로드되는 위치, ID나 클래스 또는 태그 이름으로 로드할 수 있습니다.

template : 로드된 콘텐츠입니다. 지침이나 기타 구성 요소가 포함된 HTML 코드/HTML 조각, 템플릿은 우리가 사용하는 템플릿입니다

**데이터:** 데이터는 데이터를 통해 구성 요소에 도입됩니다.

구성 요소의 데이터는 함수 형식으로 데이터를 반환해야 합니다. .다른 인터페이스가 동일한 구성 요소를 사용할 때 한 구성 요소의 값이 변경되고 다른 페이지의 내용이 변경되는 것으로 생각되지 않습니다.

{{ }} 이중 괄호 구문에 데이터 변수를 넣습니다.

구성 요소 등록 구문 설탕

전역 구성 요소

A 메서드:

Vue.extend() 메서드를 호출하여 구성 요소 생성자를 만듭니다.

Vue 호출 .comComponent(컴포넌트 라벨, 컴포넌트 생성자) 메소드는 컴포넌트를 등록합니다

컴포넌트는 Vue 인스턴스

/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
 /*组件内容*/
 template:…… ,
 data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);

로그인 후 복사

B 메소드의 범위 내에서만 사용할 수 있습니다(A 메소드와 동일, 간단한 작성 방법입니다) ):

A 메소드가 없습니다. 첫 번째 단계는 Vue.comComponent(레이블 이름, 옵션 객체) 메소드를 직접 호출하는 것입니다

/*B方法 全局组件2:*/
Vue.component('my-component2', {
  /*组件内容*/
 template:…… ,
 data: ……
}
/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

로그인 후 복사

로컬 컴포넌트는 Components 속성을 사용합니다

"javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部组件1 /
'part-component1': partcomponent1
}，
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
"

로그인 후 복사

SubcomComponent

생성 방법은 다음과 유사합니다. 위의 두 가지 방법의 차이점은 위치가 구성 요소 내부에 배치된다는 것입니다.

var compentChild ={
  el:……,
  data:……
}
component: {
  el: ……,
  data: {……}
  components: {
   'component-child': componentChild
  }
}

로그인 후 복사

내장 구성 요소

구성 요소에서 구성 요소를 선언할 필요가 없습니다. 대신 태그를 직접 사용하세요. 예를 들어 아래와 같이 myHeader에 내장 컴포넌트를 사용한다면 root-view, keep-alived 등도 Vue 자체에서 제공하는 내장 컴포넌트입니다.

 var myHeader = {
   template: '<component></component> <root-view></rooot-view>'
 }

로그인 후 복사