구성 요소는 무엇입니까? 구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서 구성 요소는 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
구성 요소를 등록하는 방법?
vue.extend 메소드를 사용하여 구성 요소를 작성한 다음 vue.component 메소드를 사용하여 구성 요소를 등록해야합니다. vue.extend 메소드의 형식은 다음과 같습니다.
var mycomponent = vue.extend ({// 옵션 ... 나중에 소개하겠습니다})다른 곳 에서이 생성 된 구성 요소를 사용하려면 이름을 지정해야합니다.
vue.component ( 'my-component', mycomponent)
이름 지정 후 DOM 요소를 사용하는 것처럼 HTML 태그 에서이 구성 요소 이름을 사용할 수 있습니다. 구성 요소 등록 및 사용의 완전한 예를 살펴 보겠습니다.
HTML 코드 :
<div id = "example"> <my-component> </my-component> </div>
JS 코드 :
// var mycomponent = vue.extend 정의 ({template : '<div> 사용자 정의 구성 요소! </div>'}) // register vue.component ( 'my-component', mycomponent) // 루트 인스턴스 작성 new vue ({el : '#example'})출력 결과 :
<div id = "example"> <div> 사용자 정의 구성 요소! </div> </div
중첩 구성 요소
구성 요소 자체에는 구성 요소가 포함될 수도 있습니다. 다음 부모 구성 요소에는 자식 구성 요소라는 구성 요소가 포함되어 있지만이 구성 요소는 부모 구성 요소에서만 사용할 수 있습니다.
var child = vue.extend ({template : '<div> 사용자 정의 구성 요소! </div>'}); var parent = vue.extend ({template : '<div> 부모 구성 요소 : <hild-component> </hild-component> </div>', 구성 요소 : { 'child-component': child});위의 정의 프로세스는 매우 번거롭고 vue.component 및 vue.extend 메소드를 호출 할 필요가 없습니다.
// vue.component ( 'my-component', {template : '<div> 사용자 정의 구성 요소! </div>'}) // 이것은 로컬 등록 var parent = vue.extend ({components : {emplate : '<div> 사용자 정의 구성 요소!'}})에서도 가능합니다.동적 구성 요소
여러 구성 요소가 동일한 마운트 포인트를 사용한 다음 동적으로 전환 할 수 있습니다. 예약 된 <성분> 요소를 사용하여 IS 속성에 동적으로 바인딩하십시오. 아래 열에는 동일한 VUE 인스턴스 아래에 설치된 홈, 게시물 및 아카이브 3 개가 있으며 CurrentView 기능을 통해 컴포넌트 디스플레이가 동적으로 스위치됩니다.
HTML 코드 :
<div id = "dynamic"> <button id = "home"> home </button> <button id = "posts"> posts </button> <button id = "Archive"> archive </button "<component :"currentView "> </component> </div
JS 코드 :
var vue = new vue ({el : "#dynamic", data : {currentView : "home"}, 구성 요소 : {home : {템플릿 : "홈"}, posts : {template : "posts"}, archive : {template : {archive "}}}); document.getElementBiew"). "home";}; document.getElementById ( "posts"). onclick = function () {vue.currentView = "posts";}; document.getElementById ( "Archive"). onclick = function () {vue.currentView = "Archive";};구성 요소 및 V-FOR
<my component v-for = "항목의 항목"> </my-component>
구성 요소의 범위가 독립적이므로 데이터를 구성 요소로 전달할 수 없습니다. 데이터를 구성 요소에 전달하려면 소품을 사용해야합니다.
<내 성분
v-for = "항목의 항목"
: item = "항목"
: 색인 = "$ index">
</my-component>
항목이 구성 요소에 자동으로 주입되지 않은 이유는 구성 요소가 현재 V-FOR에 단단히 결합되기 때문입니다. 데이터가 어디에서 왔는지, 구성 요소를 위해 다른 곳에서 재사용 할 수있는 위치를 명시 적으로 선언하십시오.
심층적 인 응답 원칙
구성 요소가 데이터를 바인딩하면 바인딩이 어떻게 효과적이며 속성을 동적으로 수정하고 추가 할 수 있습니까? 다음 원칙을 살펴보십시오.
변경 사항을 추적하는 방법 : 데이터 옵션으로 VUE 인스턴스에 다른 객체를 전달하면 vue.js는 속성을 가로 지르고 Object.DefineProperty를 사용하여 Getter/Setter로 변환합니다. 이것은 ES5 기능이며 모든 vue.js는 IE8 이하를 지원하지 않습니다.
템플릿의 각 명령/데이터 바인딩에는 해당 감시자 객체가 있으며, 이는 계산 프로세스 중 속성을 종속성으로 기록합니다. 그 후, 종속 세터가 호출되면 감시자 재 계산이 트리거됩니다. 프로세스는 다음과 같습니다.
감지 문제 : vue.js는 객체 속성의 추가 또는 제거를 감지 할 수 없습니다. vue.js가 getter/setter 모드로 변환하여 응답 할 수 있도록 속성은 데이터에 있어야합니다. 예를 들어:
var data = {a : 1}; var vm = new vue ({data : data}); //`vm.a` 및`data.a`는 이제 반응 형 vm.b = 2 //`vm.b`는 반응 형 데이터가 아닙니다 .B = 2 //`data.b`는 응답하지 않습니다.그러나 인스턴스 생성 후 속성을 추가하고 해당하는 방법이 있습니다. 세트 (키, 값) 인스턴스 메소드를 사용할 수 있습니다.
VM. set ( 'b', 2)
//`vm.b`와`data.b`는 이제 반응이 있습니다
일반 객체의 경우 vue.set (Object, Key, value) : 글로벌 메소드를 사용할 수 있습니다.
vue.set (data, 'c', 3)
//`vm.c`와`data.c`는 이제 반응합니다
데이터 초기화 : vue.js는 해당 속성의 동적 추가를 제공하지만 데이터 객체에 해당 속성을 선언하는 것이 좋습니다.
이것을하지 마십시오 :
var vm = new vue ({template : '<div> {{msg}} </div>'}) // 그런 다음`msg`vm. $ set ( 'msg', 'hello!')를 추가하십시오.완료해야합니다.
var vm = new vue ({data : {//`msg` msg : ''}, 템플릿 : '<div> {{msg}} </div>'}) // 그런 다음`msg`vm.msg = 'Hello!'구성 요소 완전한 케이스
아래에 소개 된 예제는 모달 창 함수를 구현하며 코드는 비교적 간단합니다.
HTML 코드 :
<!-템플릿을 정의하기위한 스크립트 구현-> <script type = "x/template"id = "modal-template"> <!-템플릿이 표시되는지 여부는 v-show = "show", 전환 세트 애니메이션 효과-> <div v-show = "show"transfice = "modal"> <div> <div> <!-Slot is Header Place Holsholder와 동일합니다. 기본 헤더 </slot> </div> <div> <!-슬롯은 바디 자리 표시 자와 동일합니다-> <슬롯 이름 = "body"> 기본 바디 </slot> </div> <div> <!-슬롯은 바닥 글로 홀더와 동일합니다 .-> <slot name = "keater"> default fumer </slot> <click = "show ="> 거짓 "> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "app"> <!-버튼을 클릭 할 때 vue 인스턴스 속성을 설정하십시오. showmodal의 값은 true입니다-> <button id = "show-modal" @click = "showmodal = true"> show modal </button> <!-Modal은 사용자 정의 플러그인입니다. 플러그인의 기능은 vue 인스턴스의 쇼 모달 기능을 바인딩합니다-> <modal : show.sync = "showmodal"> <!-모달 플러그인의 슬롯 내용을 교체 한 다음 헤더-> <h3 slot = "header"> custom header </h3> </modal> </div>
JS 코드 :
// modalvue.component라는 이름으로 플러그인을 정의합니다 ( "modal", {// 플러그인의 템플릿은 Modal-Template 템플릿의 ID와 함께 DOM 요소의 내용에 바인딩됩니다. // Instantiate vue, 범위는 앱 요소, new vue의 ID 아래에 있습니다 ({el : "#app", data : {// 기본값은 false showmodal : false});CSS 코드 :
. 모달 마스크 {위치 : 고정; Z- 인덱스 : 9998; 상단 : 0; 왼쪽 : 0; 너비 : 100%; 높이 : 100%; 배경색 : RGBA (0, 0, 0, .5); 디스플레이 : 테이블; 전환 : 불투명도 .3S EASE;}. MODAL-WRAPPER {디스플레이 : 테이블 셀; 수직-정상 : 중간;}. Modal-container {너비 : 300px; 마진 : 0px 자동; 패딩 : 20px 30px; 배경색 : #fff; Border-Radius : 2px; Box-Shadow : 0 2px 8px rgba (0, 0, 0, .33); 전환 : 모든 .3S 용이성; Font-Family : Helvetica, Arial, Sans-Serif;}. Modal-Header H3 {마진-탑 : 0; 색상 : #42b983;}. Modal-Body {margin : 20px 0;}. Modal-Default-Button {float : right;}/** 다음 스타일은* v-transition = "modal"에 자동으로 적용됩니다. 스타일.*/. modal-enter, .Modal-leave {불투명도 : 0;}. modal-enter .Modal-container, .Modal-leave .Modal-container {-webkit-transform : scale (1.1); 변환 : 스케일 (1.1);}이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
프로젝트에서 구성 요소의 기능을 깊이 사용하지 않았기 때문에 구성 요소에 대한 깊은 이해가 없으며 소개는 비교적 피상적입니다. 읽어 주셔서 감사합니다.