vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件一、定义一个组件定义一个组件:1. 全局组件var Aaa=Vue.extend({template:'<h3>我是标题3</h3>'});Vue.component('aaa',Aaa);*组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)2. 局部组件放到某个组件内部var vm=new Vue({el:'#box',data:{bSign:true},components:{ //局部组件aaa:Aaa}});1. 全局组件<!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);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"><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></head><body><div id="box"><aaa></aaa></div><script>var Aaa=Vue.extend({//组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)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> 2. 局部组件放到某个组件内部<!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><br/><br/><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:{ //局部组件aaa:Aaa,'my-aaa':Aaa//这里的my-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 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> 二、配合模板配合模板:1. template:'<h2 @click="change">标题2->{{msg}}</h2>'2. 单独放到某个地方a). <script type="x-template" id="aaa"><h2 @click="change">标题2->{{msg}}</h2></script>b). <template id="aaa"><h1>标题1</h1><ul><li v-for="val in arr">{{val}}</li></ul></template>方法一：<!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>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 @click="change">{{msg}}</h1><ul><li v-for="val in arr">{{val}}</li></ul></template><script>var vm=new Vue({el:'#box',com
