vue 19 Vue.extend component,구성 요소 모드,동적 구성 요소 의 인 스 턴 스 코드 구성
11866 단어 Vue.extendcomponentvue동적 구성 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
</div>
<script>
var Aaa=Vue.extend({// Vue Aaa
template:'<h3> 3</h3>'
});
var a=new Aaa();//a vm
console.log(a);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3> 3</h3>'
});
Vue.component('aaa',Aaa);//aaa ，
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
data(){
return {
msg:' ^^'
};
},
template:'<h3>{{msg}}</h3>'
});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
data(){
return {
msg:' ^^'
};
},
methods:{
change(){
this.msg='changed'
}
},
template:'<h3 @click="change">{{msg}}</h3>'
});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){// es6 ， ：， : data ， (json)
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ // ， ，Vue.component('aaa',Aaa);
aaa:Aaa
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //
'my-aaa':Aaa
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
Vue.component('my-aaa',{// ，
template:'<strong> </strong>'
});
var vm=new Vue({
el:'#box'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
components:{ //
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h2 @click="change"> 2->{{msg}}</h2>'
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h1> 1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
<h2 @click="change"> 2->{{msg}}</h2>
<ul>
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>1111</li>
</ul>
</script>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<input type="button" @click="a='aaa'" value="aaa ">
<input type="button" @click="a='bbb'" value="bbb ">
<component :is="a"></component> <!-- -->
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2> aaa </h2>'
},
'bbb':{
template:'<h2> bbb </h2>'
}
}
});
</script>
</body>
</html>동적 구성 요소
component 태그 의 is 속성 을 통 해 구성 요소 전환
is 의 속성 값 은 표시 할 구성 요 소 를 결정 하기 때문에 is 의 속성 값 을 data 의 값 으로 설정 하여 동적 변화 에 편리 하도록 합 니 다.
<template>
<div class="app">
<component :is=" ">
</component>
</div>
</template>위 에서 말 한 것 은 소 편 이 소개 한 vue 19 구성 Vue.extend component,구성 요소 모드,동적 구성 요소 의 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
vue 19 Vue.extend component,구성 요소 모드,동적 구성 요소 의 인 스 턴 스 코드 구성구체 적 인 코드 는 다음 과 같다. vue component 동적 구성 요소 보기 동적 구성 요소 component 태그 의 is 속성 을 통 해 구성 요소 전환 is 의 속성 값 은 표시 할 구성 요 소 를 결정...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
