The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/"></script>
<style>
</style>
</head>
<body>
<div >
</div>
<script>
var Aaa=({//Inherit a Vue class Aaa template:'<h3>I am title 3</h3>'
});
var a=new Aaa();//a is the same as vm (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/"></script>
<style>
</style>
</head>
<body>
<div >
<aaa></aaa>
</div>
<script>
var Aaa=({
template:'<h3>I am title 3</h3>'
});
('aaa',Aaa);//aaa is a component of the component 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/"></script>
<style>
</style>
</head>
<body>
<div >
<aaa></aaa>
</div>
<script>
var Aaa=({
data(){
return {
msg:'I'm the title^^'
};
},
template:'<h3>{{msg}}</h3>'
});
('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/"></script>
<style>
</style>
</head>
<body>
<div >
<aaa></aaa>
</div>
<script>
var Aaa=({
data(){
return {
msg:'I'm the title^^'
};
},
methods:{
change(){
='changed'
}
},
template:'<h3 @click="change">{{msg}}</h3>'
});
('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/"></script>
<style>
</style>
</head>
<body>
<div >
<aaa></aaa>
</div>
<script>
var Aaa=({
template:'<h3>{{msg}}</h3>',
data(){// es6 syntax, function does not write:, put data in the component: data must be in the form of a function, function must return an object (json) return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //Part component, put inside a 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/"></script>
<style>
</style>
</head>
<body>
<div >
<my-aaa></my-aaa>
</div>
<script>
var Aaa=({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //Local 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/"></script>
<style>
</style>
</head>
<body>
<div >
<my-aaa></my-aaa>
</div>
<script>
('my-aaa',{//Global, public proposal template:'<strong>good</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/"></script>
<style>
</style>
</head>
<body>
<div >
<my-aaa></my-aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
components:{ //Parent 'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
='changed';
}
},
template:'<h2 @click="change">title2->{{msg}}</h2>'
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/"></script>
<style>
</style>
</head>
<body>
<div >
<my-aaa></my-aaa>
</div>
<template >
<h1>title1</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(){
='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/"></script>
<style>
</style>
</head>
<body>
<div >
<my-aaa></my-aaa>
</div>
<script type="x-template" >
<h2 @click="change">title2->{{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(){
='changed';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Components</title>
<script src="bower_components/vue/dist/"></script>
<style>
</style>
</head>
<body>
<div >
<input type="button" @click="a='aaa'" value="aaa component">
<input type="button" @click="a='bbb'" value="bbb component">
<component :is="a"></component> <!-- Dynamic Components-->
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>I am aaa component</h2>'
},
'bbb':{
template:'<h2>I am a bbb component</h2>'
}
}
});
</script>
</body>
</html>
Let's take a look at the dynamic component of vue component
Dynamic Components
Component switching is through the is attribute of the component tag
The property value of is determines the component to be displayed, so set the property value of is to the value in data to facilitate dynamic changes.
<template>
<div class="app">
<component :is="Component Name">
</component>
</div>
</template>
Summarize
The above is the example code for vue19 to form component, component templates, and dynamic components introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!