vue.js에 구성 요소를 등록하는 방법

vue.js에 구성 요소를 등록하는 방법: 1. 확장을 사용합니다. 코드는 [var com1 = Vue.extend({template:'

This is the first way

'})]; . 페이지에서 외부 템플릿 요소를 정의합니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

vue.js 컴포넌트 등록 방법:

첫 번째 확장 방법:

vue.js 작성:

var com1 = Vue.extend({
   template:&#39;<h3>这是第一种方式</h3>&#39;
});
Vue.component("myCom1",com1);

참고: myCom1은 다음을 사용합니다. Camel Case 명명 방법이므로 html에서는 이렇게 작성합니다.

<my-com1></my-com1>

참고: Camel Case 명명 방법을 사용하지 않으면 js 및 html에서는 다음과 같이 작성됩니다.

vue.js는 다음과 같이 작성됩니다.

var com1 = Vue.extend({
    template:&#39;<h3>这是第一种方式</h3>&#39;
});
Vue.component("mycom1",com1);

html로 작성됨:

<mycom1></mycom1>

중간 변수를 사용하지 않고 위 작업을 수행할 수 있습니다. 즉, com1의 내용을 Vue.comComponent("mycom1", com1)에 직접 작성합니다. 예:

Vue.component("mycom1",Vue.extend({
    template:&#39;<h3>这是第一种方式</h3>&#39;
}));

두 번째 방법 : 확장할 필요 없음

vue.js 다음과 같이 작성하세요:

Vue.component("mycom1",{
    template:&#39;<div><h3>这是h3标签</h3><span>这是span标签</span></div>&#39;
});

참고: 구성 요소를 어떤 방식으로 생성하든 루트 요소는 하나만 있어야 합니다. 즉, html 요소가 여러 개 있는 경우 루트 요소는 반드시 있어야 합니다. div로 래핑됨

html은 다음과 같이 작성합니다.

<mycom1></mycom1>

세 번째 유형: 페이지에 외부 템플릿 요소를 정의합니다.

vue.js는 다음과 같이 작성합니다.

Vue.component("mycom1",{
    template:'#temp'
});

html로 템플릿 구조 작성:

<template id="temp">
    <h3>这是html中的temp</h3>
</template>

PS: 위는 글로벌 등록, 로컬 등록은 다음과 같습니다.

첫 번째 로컬 등록 유형:

js 파일 쓰기:

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: &#39;<div><h3>这是局部template</h3></div>&#39;
        }
    }
});

html 파일 쓰기:

<mycom1></mycom1>

두 번째 부분 등록 유형:

js 파일 쓰기 :

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '#temp'
        }
    }
});

html 파일 쓰기:

<template id="temp">
    <div><h3>这是局部template啦</h3></div>
</template>

관련 무료 학습 권장: JavaScript(동영상)

위 내용은 vue.js에 구성 요소를 등록하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!