Vue.extend 구조기

2941 단어 Vue.js

1. 간단한 소개

Vue.extend(options)
매개 변수:객체
사용법: Vue 구조기를 사용하여 하위 클래스를 만듭니다. 매개 변수는 구성 요소 옵션을 포함하는 대상입니다. 여기서 data 옵션에는 함수가 있어야 합니다.
설명: Vue.extend는'확장 실례 구조기'를 되돌려줍니다. 즉, 일부 옵션이 설정된 Vue의 실례 구조기입니다. 이것은 Vue.component에서 구성 요소를 생성하는 데 자주 사용됩니다. 템플릿에서 이 구성 요소가 라벨로 된 사용자 정의 요소를 만났을 때'확장 실례 구조기'를 자동으로 호출하여 구성 요소의 실례를 생산하고 사용자 정의 요소에 걸어놓는 것으로 간단하게 이해할 수 있습니다.

2. 간단한 예

매개 변수 없는 태그 사용자 정의

다음 코드의 author는 되돌아오는 '확장 실례 구조기' 입니다.

var author = Vue.extend({
  template: "{{author}}
",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  }
});

해당되는 html은 다음과 같습니다.

<author>author>

이 페이지는 반드시 아무런 효과가 없습니다. 왜냐하면 확장 실례 구조기는 마운트해야 하기 때문입니다. 아래와 같습니다.

new author().$mount('author');

propsData 사용

var author = Vue.extend({
  template: "{{author}} & {{name}}",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  },
  props : ['name']
});

new author({propsData: {name : 'dear_mr'}}).$mount('#author');

propsData로 매개 변수 전달 가능

일반 탭에 마운트

되돌아오는 확장 실례 구조기의 방식은 위와 똑같다. 다만 html에서는 사용자 정의 라벨이 아니라 일반 라벨이다. 예를 들어div

<div id="author">div>

 new author().$mount('author');

사실 같은 확장 구조기에 대해 말하자면, 그것의 모든 실례는 사실은 다른 탭에 마운트할 수 있다. 예를 들어 나는 이렇게 할 수 있다

new author().$mount('#author');
new author().$mount('author');

이 두 탭의 내용은 함께 표시되며 결과는 같다
Vue 공식 문서:https://cn.vuejs.org/v2/api/#Vue-extend

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

LaravelAPI + Nuxt로 MultiAuth 구현

현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다