첫째, 시나리오의 운용
1. 기존 구성 요소에서 사용하는 특징:
2. 일반 구성요소는 지정된 위치에서만 구성요소를 렌더링할 수 있습니다. 이는 다음과 같은 일부 특수 장면에서 제한됩니다.
둘째, 용법
Vue 인스턴스를 만들 때 항상 El 옵션을 사용하여 인스턴스의 루트 노드를 지정합니다. El 옵션을 쓰지 않으면 구성 요소가 설치되지 않은 것입니다. Vue.extend 의 역할은 Vue 생성자를 기반으로 하위 클래스를 만드는 것입니다. 그 매개 변수는 new Vue 의 매개 변수와 거의 동일하지만 data 는 구성 요소와 같은 함수입니다. $mount 를 사용하면 구성 요소를 렌더링하여 body 와 같은 지정된 노드에 마운트할 수 있습니다.
같은 효과를 얻으려면 extend 를 사용하는 것 외에도 Render 함수를 사용하여. Vue 구성 요소를 렌더링하는 vue 인스턴스를 직접 만들 수 있습니다. 이런 식으로 사용할 수 있습니다. Vue 를 사용하여 복잡한 구성요소를 작성하거나 필요에 따라 적절한 소품을 전달할 수 있습니다. 렌더링 후 렌더 인스턴스 조작도 매우 간단합니다.
Mount 가 수동으로 렌더링한 구성요소는 $destroy 에 의해 삭제되어야 인스턴스를 수동으로 삭제할 수 있습니다. 필요한 경우 removeChild 를 사용하여 DOM 에서 노드를 제거할 수 있습니다.
셋째, 실제 전투 1- 구성 요소를 동적으로 렌더링하는 방법? Vue 파일
1. 인터페이스 디자인: 일반. Vue 파일은 템플릿, 스크립트 및 스타일의 세 부분으로 구성됩니다. Extend 를 사용하여 구성 요소 인스턴스를 구성할 때 해당 옵션 템플릿은
깨닫다
(1) 표시 디렉토리를 만들고 새 display.vue 파일을 만듭니다.
(2) 상위에서 전달한 코드는 데이터의 html, js 및 CSS 에 분할되어 저장됩니다.
(3) this.js 는 new Function(this.js) 을 통해 객체 유형으로 변환할 수 있는 문자열입니다.
(4) extend 를 사용하여 인스턴스를 구성하고 구성 요소의 노드에 설치합니다.
(5) CSS 를 로드하는 것은 스타일 태그를 만들고 그 안에 CSS 를 쓰고 페이지 머리를 삽입하는 것입니다. 이 코드가 변경되거나 구성 요소가 손상되면 동적으로 만든 스타일 태그를 쉽게 제거할 수 있도록 각 스타일 태그에 임의 id 가 추가되어 식별할 수 있습니다.
(6) beforeDestroy 후크에서 extend 및 CSS 로 만든 인스턴스를 수동으로 삭제합니다.
이 동적으로 렌더링 된 디스플레이 구성 요소를 사용하여 무엇을 할 수 있습니까?
예를 들어, vue 구성 요소 라이브러리 문서를 작성하는 일반적인 방법은 개발 환경에. Vue 파일을 작성한 다음 패키지를 컴파일하고, 리소스를 업로드하고, 온라인으로 접속하는 것입니다. 만약 네가 문장 부호라도 수정하고 싶다면, 너는 반드시 다시 인터넷을 해야 한다. 그러나 표시 구성 요소의 경우 수정할 서비스를 하나만 제공하면 됩니다. Vue 의 파일은 온라인이며 패키지화, 업로드 및 온라인 없이 실시간으로 업데이트할 수 있습니다.
웹 사이트로, 온라인으로 예제를 쓰고 실시간으로 실행할 수도 있습니다.
넷째, 실전 2-명령을 통해 구성 요소를 호출하는 방법.
보완해야 한다 ...