Vue组件

Vue有两大特性
1. 指令 – 用来操作dom
2. 组件 – 组件是html css js 等的一个聚合体
3. 为什么要使用组件？

	1. 组件化

		1. 将一个具备完整功能的项目的一部分进行多处使用
		2. 加快项目的进度
		3. 可以进行项目的复用
	2. 要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件
	3. 插件： index.html img css js
	4. 如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）
4. 基础的组件创建

	1. 全局注册
	2. 局部注册
	3. 命名：

		1.       一个单词的大写： 注意不要和原生的h5标签重名，比如  header   footer   Header Footer
		2.       小写带- ， 比如   header-title
		3.       大驼峰：  GabrielYan   使用 ：   gabriel-yan
		4.   局部注册： 在组件中用一个components的配置项目来表示只能在注册的范围内使用，其他地方是不能使用的
	4. 简写:

		1. Vue.component('Father',{
		2.     template: '<div> 这里是全局注册 </div>'
		3.   })
		4. new Vue({
		5.     el: '#app',
		6.     components: {
		7.       'GabrielYan': {
		8.         template: '<div> 这里是局部注册 </div>'
		9.       }
		10.     }
		11.   })
	5.  嵌套

		1.   组件的嵌套

			1.     父组件里面放子组件 ----》 类似于dom结构的父子级结构


		1.       将子组件以标签的形式放在父组件的模板中使用



			1.       切记，不要放在父组件的内容中
	1. 案例:

		1.       <div id="app">
		2.     <!-- 下面这种写法是错误的 -->
		3.     <Father>
		4.       <Son></Son>
		5.     </Father>
		6.     <!-- 正确的应该是 -->
		7.     <Father></Father>
		8.   </div>
		9. Vue.component('Father',{
		10.     template: '<div> Father <Son></Son></div>'
		11.   })
		12. 
		13.   Vue.component('Son',{
		14.     template: '<div> son </div>'
		15.   })
		16. 
		17.   
		18. 
		19.   new Vue({
		20.     el: '#app',
		21.   })
5. 组件的一些特殊使用规则 【 is 规则】

	1. is规则

		1.       ul>li  ol>li   table>tr>td      select>option
		2. 如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug
		3.    解决： 使用is规则: 通过is属性来绑定一个组件   (<tr is = "Hello"></tr>)
6. 组件的template

	1. template使用：

		1. 实例范围内使用

			1.   template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
		2.  实例范围外使用

			1.  实例范围外template标签是不会被直接解析的
	2. 组件要想使用template使用，我们采用第二种
	3.  但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

 解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件