vue-组件详解

一.定义

	使开发者根据自己的需求,扩展 HTML 元素，封装可重用的代码。有利于修改代码,提高了代码的易用性

二.组件的使用

1.定义组件

	组件也是Vue实例,因此就有了data、method、computed、watch等属性。组件的命名通常是大驼峰（CaBa）或者是下划线(ca-ba)
的命名方式。
teplate属性是组件中至关重要的一环,它表示组件是以何种元素组成
例如:
	const  CommonHead={
		template:`
			<div>
				<h2>CommonHead组件</h2>
			</div>
		`
	}
	
	其中需要注意的是:由于组件复用的关系,导致每个组件的data必须保持各自独立,因此凭借闭包的原理我们可以得到的结果是data必须
是一个function函数。
例如:
	const  CommonHead={
		template:`
			<div>
				<h2>CommonHead组件</h2>
				word:{
  {word}}
			</div>
		`,
		data () {
			return{
				word:'a'
			}
		}
	}

2.组件的分类

	依据挂载位置的不同,组件的作用域也不同,因此就有了全局组件和局部组件之分。

全局组件

Vue.component('组件的名称',组件对象)

局部组件

const Logo={
	template:`
		<h3>我是logo组件</h3>
	`
}
const  CommonHead={
	template:`
		<div>
			<h2>CommonHead组件</h2>
			<logo><logo>
		</div>
	`,
	component:{
		Logo
	}
}

3.template的三种写法

-1.字符串模板写法

	直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.
<div id="app"></div>
new Vue({
       el: "#app",
       t