Vue组件的使用：
全局组件注册语法：
Vue.component(组件名称，{data:组件数据，template:组件的模板内容})
定义了一个组件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!--使用组件--> <button-counter></button-counter> </div> <script type="text/javascript"src="js/vue.js"></script> <script type="text/javascript"> /*注册全局组件*/ Vue.component('button-counter',{ /*data一定要使用函数返回数据，不然调用多个相同的组件时候，会共用一份数据*/ data:function(){ return{ count:0 } }, /*template实际就是一个字符串*/ // template:'<button @click="count++">点击了{{count}}次</button>', template:'<button @click="handle">点击了{{count}}次</button>', /*也可以使用methods*/ methods:{ handle:function(){ //this指的是该组件，不能少 this.count+=2; } } }) var vm=new Vue({ el:'#app', data:{ } }) </script> </body> </html>
全部组件注册的注意事项：
1，data必须是一个函数
2，组件模板内容必须是单个的根元素
3，组件模板内容可以是模板字符串
局部组件的使用：
在Vue实例中使用components属性，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!--使用组件--> <hello-world1></hello-world1> <hello-world2></hello-world2> <hello-world3></hello-world3> </div> <script type="text/javascript"src="js/vue.js"></script> <script type="text/javascript"> /*创建局部组件*/ var HelloWorldA={ data:function(){ return{ msg:"helloworld1", } }, template:"<div>{{msg}}</div>" }; var HelloWorldB={ data:function(){ return{ msg:"helloworld2", } }, template:"<div>{{msg}}</div>" }; var HelloWorldC={ data:function(){ return{ msg:"helloworld3", } }, template:"<div>{{msg}}</div>" }; var vm=new Vue({ el:'#app', data:{ }, /*使用局部组件*/ components:{ 'hello-world1':HelloWorldA, 'hello-world2':HelloWorldB, 'hello-world3':HelloWorldC } }) </script> </body> </html>
局部组件注意事项：
1，局部组件只能在父组件中使用，全局组件中是不可以使用局部组件的