一、模块与组件、模块化与组件化
(1) 模块
定义: 向外提供特定功能的js程序,一般就是一个js文件
原因: js文件很多很复杂
作用: 复用js,简化js的编写,提高js运行效率
(2) 组件
定义: 用来实现局部/特定功能效果的代码集合(html/css/js/image等等)
原因: 一个界面的功能很复杂
作用: 复用编码,简化项目编码,提高运行效率
(3) 模块化
定义: 当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用
(4) 组件化
定义: 当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用
二、 非单文件组件
(1) 基本步骤
定义组件(创建组件) ------> 注册组件 ------> 使用组件(写组件标签)
(2) 定义组件
定义: 使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一致,但也有区别: a、el不写,最终所有的组件都要经过一个vm管理,由vm中的el决定服务哪个容器; b、data必须写成函数,避免组件被复用时,数据存在引用关系
备注: 使用template可以配置组件结构
(3)注册组件
局部注册: 由new Vue的时候传入components选项
全局注册: 由Vue.component('组件名', 组件)
(4) 编写组件标签
<组件名></组件名>
(5) 注意点
关于组件名:
a、一个单词组成: 第一种写法(首字母小写): school; 第二种写法(首字母大写): School
b、多个单词组成: 第一种写法(kebab-case命名): my-school; 第二种写法(CamelCase命名): MySchool(需要Vue脚手架支持)
c、备注: 组件名尽可能回避HTML中已有的元素名称(例如: h2、div、span); 可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签:
a、第一种写法(双标签): <school></school>
b、第二种写法(单标签): <school />
c、备注: 不用使用脚手架时,单标签写法会导致后续组件不能渲染
一个简写方式:
const school = Vue.extend(options) 可简写成: const school = options // 省略Vue.extend()
(6) 关于VueComponent
1、组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
2、我们只需要写<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行 new VueComponent(options)
3、特别注意: 每次调用Vue.extend,返回的都是一个全新的VueComponent
4、关于this的指向:
(1) 组件配置中: data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是[VueComponent实例对象]
(2) new Vue(options)配置中: data函数、methods中的函数、watch中的函数、computed中的函数,它们的this均是[Vue实例对象]
5、VueComponent的实例对象,以后简称为vc;Vue的实例对象,简称为vm
(7) 重要的内置关系
1、一个重要的内置关系: VueComponent.prototype.proto === Vue.prototype
2、原理: 让组件实例对象(vc)可以访问到Vue原型上的属性、方法
