18.Vue组件化编程

1.模块

1.理解：向外提供特定功能的JS程序，一般就是一个JS文件

2.做什么：js文件很多很复杂

3.作用：复用js，简化js的编写，提高js运行效率

2.组件

1.理解：用来实现局部（特定）功能效果的代码集合

2.为什么：一个界面的功能很复杂

3.作用：复用编码，简化项目编码，提高运行效率

3.模块化

当应用中js都以模块来编写，那这个应用就是一个模块化的应用

4.组件化

当应用中的功能都是以多组件的方式来编写的，那这个应用就是一个组件化的应用

5.非单文件组件

1. 模板编写没有提示

2. 没有构建过程，无法将ES6转成ES5

3. 不支持组件的CSS

4.真正开发中几乎不用

5.1 非单文件组件的基本使用

Vue中使用组件的三个步骤：

（1）定义组件（创建组件）

（2）注册组件

（3）使用组件标签

①如何定义一个组件？

        使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options

        几乎一样（创建VueComponent和创建Vue实例对象时传入的配置项几乎一样）

区别：

        1. VueComponent中el不要写——最终的所有组件都是通过vm的管理，由vm中的el决定

        服务哪一个容器

        2.data必须写成函数（不管是vue2还是vue3）——避免组件被复用时，数据存在引用

        关系；

        备注：在Vue2中创建vue的实例对象时，所传入的配置项data可以写成对象的形式，

        但是在Vue3中，不管是创建vue的实例对象还是创建组件，所传入的配置项data都必须

        写成函数的形式

②如何注册组件？

        1. 局部注册：通过 new Vue的时候传入components选项进行注册

        2.全局注册：通过Vue.component('组件名',组件)进行注册

	
		
		
		
	
	
		
		
		

			
			

			
{{msg}}
			

			
			
			

			
			
		

		

			
		
	

	

5.2 非单文件组件使用的注意事项

1.关于组件名：

        一个单词组成：

                写法1：首写字母小写：school

                写法2：首写字母大写：School

        多个单词组成：

                写法1：使用kebab-case命名：my-school

                写法2：使用CamelCase命名：MySchool（需要Vue脚手架的支持）

        备注：

                (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行

                (2).可以使用name配置项指定组件在开发者工具vueDetools中呈现的名字

2.关于组件标签：

        写法1：

        写法2：

        备注：不适用脚手架时，会导致后续组件不能渲染

3.一个简写方式：

        const school = Vue.extend(options) 可简写为：const school = options

 6.单文件组件

6.1 一个.vue文件的组成（3个部分）

（1）模板页面     

（2）JS模块对象 

（3）CSS样式