vue.js에 구성 요소를 등록하는 방법: 1. 확장을 사용합니다. 코드는 [var com1 = Vue.extend({template:'684271ed9684bde649abda8831d4d355This is the first way39528cedfa926ea0c01e69ef5b2ea9b0'})]; . 페이지에서 외부 템플릿 요소를 정의합니다.
이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.
【추천 관련 글: vue.js】
vue.js 컴포넌트 등록 방법:
첫 번째 확장 방법:
vue.js 작성:
var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>' }); Vue.component("myCom1",com1);
참고: myCom1은 다음을 사용합니다. Camel Case 명명 방법이므로 html에서는 이렇게 작성합니다.
<my-com1></my-com1>
참고: Camel Case 명명 방법을 사용하지 않으면 js 및 html에서는 다음과 같이 작성됩니다.
vue.js는 다음과 같이 작성됩니다.
var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>' }); Vue.component("mycom1",com1);
html로 작성됨:
<mycom1></mycom1>
중간 변수를 사용하지 않고 위 작업을 수행할 수 있습니다. 즉, com1의 내용을 Vue.comComponent("mycom1", com1)에 직접 작성합니다. 예:
Vue.component("mycom1",Vue.extend({ template:'<h3>这是第一种方式</h3>' }));
두 번째 방법 : 확장할 필요 없음
vue.js 다음과 같이 작성하세요:
Vue.component("mycom1",{ template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>' });
참고: 구성 요소를 어떤 방식으로 생성하든 루트 요소는 하나만 있어야 합니다. 즉, 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: '<div><h3>这是局部template</h3></div>' } } });
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!