第二章：Vue组件化编程

第二章：Vue组件化编程

2.1：模块与组件、模块化与组件化

• 模块

  1. 理解：向外提供特定功能的js程序，一般就是一个js文件。
  2. 为什么：js文件很多很复杂。
  3. 作用：复用js，简化js的编写，提高js运行效率。

• 组件

  1. 理解：用来实现局部(特定)功能效果的代码集合(html/css/js/images)
  2. 为什么：一个界面的功能很复杂
  3. 作用：复用编码，简单项目编码，提高运行效率。

• 模块化

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

• 组件化

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

2.2：非单文件组件

• 基本使用

  1. Vue中使用组件的三大步骤：定义组件(创建组件)、注册组件、使用组件(写组件标签)

  2. 如何定义一个组件？

     使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有一些区别：

     • el不要写：———— 最终所有的组件都要经过一个vm的管理，有vm中的el决定服务那个容器。
     • data必须写成函数式：———— 避免组件被复用时，数据存在引用关系。

     注意：使用template可以配置组件结构。

  3. 如何注册组件？

     • 局部注册：靠new Vue的时候传入components选项。
     • 全局注册：靠Vue.component('组件名', 组价)。

  4. 编写组件标签：<组件名></组件名>

• 几个注意点

  1. 关于组件名：
     • 一个单词组成：
       1. 第一种写法(首字母小写)：school
       2. 第二种写法(首字母大写)：School
     • 多个单词组成：
       1. 第一种写法(kebab-case命名)：my-school
       2. 第二种写法(CamelCase命名)：MySchool(需要Vue脚手架)
     • 备注：
       1. 组件名尽可能回避HTML中已有元素名称，例如：h2、H2都不行。
       2. 可以使用name配置项指定组件在开发者工具中呈现的名字。
  2. 关于组件标签
     • 第一种写法：<school></school>
     • 第二种写法：<school />
     • 备注：不不用脚手架时，<school />会导致后续组件不能渲染。
  3. 一个简写方式：const school = Vue.extend(options)可简写为const school = options

• 关于VueComponent

  1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
  2. 我们只需要写<school />或<school></school> ，Vue解析时会帮我们创建schoo组件的实例对象。即Vue帮我们执行的：new VueComponent(options)
  3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
  4. 关于this指向：
     • 组件配置中：data函数、methods中的函数、watch中的函数、complated中的函数，他们的this均是【VueComponent实例对象】
     • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、complated中的函数，他们的this均是【Vue实例对象】

• 重要的内置关系

  1. VueComponent.prototype.__proto__ === Vue.prototype
  2. 让组件实例对象(vc)可以访问到Vue原型上的属性、方法。
     

2.3：单文件组件

单文件组件就是一个以.vue为后缀名的组件。

• 一个vue文件的组成

  // 页面模板
  <template></template>
  // js模块对象
  <style></style>
  // 页面样式
  <script></script>
  

• 基本使用

  1. 引入组件
  2. 映射成标签
  3. 使用组件标签