一：步骤

• 创建 vue的初期模板

  <div id="app"><mycom></mycom></div>        
  

• 绑定事件

    var app = new Vue({
    		el:"#app",
    		data:{
    		}
    	})
  

• 创建组件步骤

---

• 组件创建对象

  • // 调用vue全局方法生成组件对象 var comObj = Vue.extend({ template:"
    这是一个新创建的组件对象
    " })

• 组件对象与组件名称连接起来 //调用vue的全局component方法将组件名称和新建的组件对象绑定在一起

    	Vue.component("mycom",comObj)
  

组件创建的公有方法，可以服用，以上时全局的

1.1 简写 创建组件对象并将组件名称与组件联系到一起（注意大小写，尽量大写，不用驼峰）

下面大写，命名就是-小写 //如果使用西班牙命名法,必须把首字母大写的单词变成全小写,并用-分割开

    <my-com2></my-com2>
    Vue.component("myCom2",Vue.extend({
			 template:"<h3>这是一个新创建的组件对象</h3>"
		}))

1.2 简写 // 创建组件简化方式:直接将组件名称,和组件对象直接绑定,不适用Vue.enxtend()====>函数返回的是组件对象

    Vue.component("mycom3",{
			template:"<a href=''>这是一个新创建的组件对象</a>"
		})

1.3 简写 只适用于一个标签不使用多个

此处报错

 //组件的根元素只能是一个
 
		var comObj =  Vue.extend({
			template:"<div>这是一个新创建的组件对象</div><span>你好</span>"
		})
        

此处不报错，放在里面

        var comObj =  Vue.extend({
			template:"<div>这是一个新创建的组件对象<span>你好</span></div>"
		})

1.4 简写 （最常用的方式） 3步

 	<div id="app"> 
		<mycom4></mycom4> 
	</div>
    
   <template id="mycm4">
		<p style="color: #7FFFD4;">这是一个新创建的组件对象</p>
   </template>
   
   //最常用的创建组件的方法
		Vue.component("mycom4",{
			template:"#mycm4"
		})

私有组件有s(私有组件mycom5时app对象的私有组件在别的对象中创建会报错)

   私有组件创建步骤


<div id="app"> 
      <mycom5></mycom5>
 </div>
 var app = new Vue({
			el:"#app",
			data:{
			},
			components:{
				mycom5:{
					template:"<p style='color:yellow'>这是私有组件</p>"
				}
			}
		})

组件结构

   * 创建私有组件=》组件名称=》创建组件模板=》写组件名称
   * components=》comp1:=>template:"#tmp1",=》<template id="tmp1">=》<comp1></comp1>
   * #### // 组件有自己的数据信息,数据信息0必须是一个函数,并且返回一个对象组件对象的数据 
   * 组件的方法要在组件中使用，组件相当于另一个页面
<div id="app">
		<comp1></comp1>
	</div>
	<template id="tmp1">
		<div>
			<input type="button" value="修改当前组件对象的数据"  @click="changeMsg"/>
			这是一个组件,显示的信息为{{msg}}
		</div>
	</template>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"我是vue对象的数据"
			},
			methods:{
				changeMsg(){
					this.msg="修改后的vue对象数据"
				}
			},
			components:{
				// 组件有自己的数据信息,数据信息0必须是一个函数,并且返回一个对象
				comp1:{
					template:"#tmp1",
					data:function(){
						return {
							msg:"我是组件对象的数据"
						}
					},
					methods:{
						changeMsg(){
							this.msg = "修改后的组件对象的数据"
						}
					}
				}
			}
			
		})
	</script>

组件中的data是函数的原因(必须是函数并返回一个对象)

• 由于组件是为了能够复用,那么在复用过程中,数据需要独立,就要求组件的数据必须使用函数, 为了在复用每一个组件的数据都有函数重新创建，分配空间

当复用函数时直接返回同一个地址的数据 return{count:0} 可以分开同一点击事件而形成不同结果

    <div id="app">
		<comp01></comp01>
		<hr />
		<comp01></comp01>
		<hr />
		<comp01></comp01>
	</div>
	<template id="tmp1">
		<div>
			<input type="button"  value="+1" @click="increment" />
			{{count}}
		</div>
	</template>
	<script type="text/javascript">
		// var dataObj = {count:0}
		var vm = new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				
			},
			components:{
				comp01:{
					template:"#tmp1",
					// 组件的data属性必须是函数,并且返回一个对象
					data:function(){
						// return dataObj
						/*
						*由于组件是为了能够复用,那么在复用过程中,数据需要独立,就要求组件的数据必须使用函数,
						*为了在复用每一个组件的数据都有函数重新创建，分配空间
						*/
						return {count:0}
					},
					methods:{
						increment(){
							this.count++
						}
					}
				}
			}
		})
	</script>