DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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:'我是标题3
'
});
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>Documenttitle>
<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:'我是标题3
'
});
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>Documenttitle>
<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:'{
{msg}}
'
});
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>Documenttitle>
<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:'{
{msg}}
'
});
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>Documenttitle>
<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:'{
{msg}}
',
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>Documenttitle>
<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:'{
{msg}}
',
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>Documenttitle>
<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:'好'
});
var vm=new Vue({
el:'#box'
});
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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:'标题2->{
{msg}}
'
}
}
});
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>标题1h1>
<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>Documenttitle>
<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:'我是aaa组件
'
},
'bbb':{
template:'我是bbb组件
'
}
}
});
script>
body>
html>
