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样式