web前端学习|18.Vue组件化编程 javascript|前端|vue.js

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个部分）