이 기사는 공식 문서를 말하면보다 자세한 코드를 컴파일하고 초보자가 읽고 학습 할 수있는보다 안전한 자습서입니다.
이 기사는 공식 문서에서 나옵니다.
http://cn.vuejs.org/guide/components.html
구성 요소는 무엇입니까?
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서는 구성 요소가 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
구성 요소 정의
components 구성 요소의 기능 :
【1 end HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화합니다.
components 구성 요소는 사용자 정의 요소이며 Vuejs의 컴파일러는 특수 함수를 추가 할 수 있습니다.
【3 some 경우에 따라 구성 요소는 기본 HTML 요소의 형태 일 수 있으며 IS와 같은 방식으로 확장 될 수 있습니다.
② 표준 구성 요소 작성 :
다음 단계로 나뉩니다.
[1] 구성 요소가 장착 된 장소는 VUE 인스턴스에 의해 렌더링 된 HTML 요소가되어야합니다. 구체적으로, 예를 들어, <div id =”app”> </div>와 같은 HTML 요소 및 자식 노드;
【2 ine 구성 요소를 정의하고 사용합니다
var variable name = vue.extend ({template : "html의 템플릿 내용은 다음과 같습니다"})는 "var btn = vue.extend ({template :"<버튼> 이것은 버튼 </button> "}의 형태로 생성됩니다.prested 정의 된 구성 요소를 VUE 인스턴스에 등록하여 지정된 태그를 구성 요소의 내용으로 대체 할 수 있습니다.
코드로 :
// vue.component ( "add-button", btn)에 등록;
구체적으로, 다음 각 태그 (VUE의 루트 인스턴스 범위 내에서)
<Add-Button> </add-button>
될 것입니다
<버튼> 버튼 </button>입니다
교체.
[4] 위의 방법은 글로벌 등록입니다 (각 VUE 인스턴스의 추가 버튼 태그는 우리가 정의하는 것으로 대체됩니다);
솔루션은 지역 등록입니다.
예를 들어, 코드 : (이것은 템플릿 속성입니다.이 속성을 사용할 수없는 경우 <div id = "app"> </div> 태그에 <d add-button> </add-button> 태그를 배치 할 수도 있습니다.
<div id = "app"> </div> <cript> // 구성 요소 정의 var btn = vue.extend ({template : "<button> 이것은 버튼 </button>"}) vue.component ( "add-button", btn); // 루트 인스턴스를 만듭니다. 즉, vue 가이 루트 var vm = new vue ({el : '#app', 템플릿 : "<add-button> </add-button>"})에서 적용합니다. </스크립트>③ 지역 등록 구성 요소 :
간단히 말해서,이 vue 인스턴스에만 적용됩니다. 구체적인 방법은 등록 단계를 건너 뛰는 것입니다.
그런 다음 VUE 인스턴스를 선언 할 때 구성 요소 속성에 추가됩니다 (KV 형식으로 배치 된 객체입니다.이 단어는 하나 더 있습니다).
코드로 :
<div id = "app"> </div> <cript> // 구성 요소 정의 var btn = vue.extend ({템플릿 : "<버튼> 이것은 버튼 </button>"}) // 루트 인스턴스를 만듭니다. vue 가이 루트 vm = 신입생 vue ({el : 'app', <<<<aptton> "에 적용됩니다. "Add-Button": btn}}); </스크립트>메모:
공식 자습서에 따르면이 방법 (지역 등록 참조)은 지침, 필터 및 전환과 같은 다른 리소스에도 적용됩니다.
simplify 단계 :
【1 ing 한 단계에서 구성 요소를 정의하고 구성 요소를 등록합니다.
// 구성 요소 정의 vue.component ( "add-button", {template : "<버튼> 버튼 </button>");【2 local 지역 등록 중에 정의 및 등록 단계가 완료됩니다.
// 루트 인스턴스를 만듭니다. 즉, vue 가이 루트 var vm = new vue에 적용하도록하자 ({el : '#app', 템플릿 : "<add-button> </add-button>", 구성 요소 : { "add-button": {템플릿 : "<button> 버튼 </button>"}});data 속성
구성 요소에 데이터 속성을 직접 추가 할 수는 없습니다 (유효하지 않음).
이 작업이 완료되면 구성 요소의 데이터 속성이 객체가 될 수 있으며이 객체는 외부에서 전달 될 수 있기 때문에 (예 : 먼저 객체를 선언하고, 객체가 데이터의 값이라) 구성 요소의 모든 사본이 객체 (외부 전달 된 객체)를 공유하게 할 수 있기 때문입니다.
따라서 데이터 속성은 함수이어야하며 데이터 속성의 값인 리턴 값이 있습니다.
그리고이 반환 값은 새로운 객체 여야합니다 (즉, 딥 카피, 여러 구성 요소를 객체를 공유하는 것을 피).
코드로 :
var vm = new vue ({el : '#app', 템플릿 : "<add-button> </add-button>", 구성 요소 : { "add-button": {template : "<button> 이것은 버튼 {{btn}} </button>", data : {return {btn : "123"}}}}}}};또한이 경우 BTN의 값은 동일합니다 (실제로 객체를 공유하기 때문에)
<div id = "app"> </div> <div id = "app2"> </div> <cript> var obj = {btn : "123"}; var vm = new vue ({el : '#app', 템플릿 : "<add-button> </add-button>", 구성 요소 : { "add-button": {template : "<button> 이것은 버튼 {{btn}} </button>", data : function () {return obj}}}); obj.btn = "456"; var vm2 = new vue ({el : '#app2', 템플릿 : "<add-button> </add-button>", 구성 요소 : { "add-button": {template : "<button> 이것은 버튼 {{btn}} </button>", data : function () {return ob}}}); </스크립트>메모:
EL 속성이 vue.extend ()에서 사용되면 기능이어야합니다.
⑥ 기능 :
[1] 공식 자습서에 따르면 일부 HTML 요소는 어떤 요소에 배치 될 수 있는지에 대한 제한이 있습니다.
그러나 사실, 나는 내 자신의 테스트에 아무런 문제가 없었기 때문에 이해가 안 돼요.
【2 me URL을주세요. 실제로 무슨 일이 생기면 다시 공부할 것입니다.
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
위는 vuejs의 8 번째 장에서 vuejs 구성 요소의 정의에 대한 예제 분석입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!