vue的组件化编程（2022-04-23学习笔记）

模块的含义

组件的含义

模块化

组件化

非单文件组件和单文件组件

一个.vue都是一个单文件组件，我们都使用单文件组件。

非单文件组件是，我们在一个html结构中有很多个组件。

创建组件

组件在创建的时候从来不说为谁服务。

在组件中，​

​data​

​只能写成函数的形式。

假如我们使用的是对象，指向很多不同的地方，每个地方修改所有地方都会修改。

我们写成函数的形式，每一次应用组件，都是给我们返回一个全新的对象，修改对象与别的组件互不影响。

使用组件：创建组件—》注册组件—》使用组件。

组件的属性名和属性值我们最好写成一样的。

有数据有结构的组件：

总结

组件命名

1. 纯小写的字母
2. 首字母大写，其余字母小写
3. 多个单词之间加‘ - ’，注意加引号
4. 多个单词每个单词的首字母都大写，其余字母小写，这只能在脚手架的环境中写，html中直接引入vue.js不支持

命名总结

有些时候，我们需要定义组件的时候就命名。大型项目中我们会命名。

如果只是创建一个对象，底层自己会调用​

​extend​

​。

组件的嵌套

两个组件形成父子关系。

注册给谁就在谁的结构里写。

vm只管理一个组件app。

容器里面干干净净，我们在注册组件​

​app​

​​的时候也写在​

​vm​

​的代码里面。

VueComponent

组件的本质就是一个构造函数。

​

​vm​

​​和​

​vc​

​是不一样的。

重要的内置关系

两者全部指向一个原型对象。

d：Demo的实例对象。有隐式原型属性。

Demo：构造函数是显示原型属性。

vue和VueComponent的关系

vue做了一件事，修改了原型对象的原型对象。

单文件组件

.vue文件。

我们要浏览器识别我们的.vue文件。

1. 使用webpack搭建一个工作流
2. 使用vue的脚手架（vue使用webpack搭建的环境）

.vue文件的命名方式

推荐使用两种。

.vue文件

使用插件高亮我们的代码。

组件需要引入，所以我们要将组件暴露出去。

分别暴露——

统一暴露——

默认暴露——

我们一般喜欢默认暴露，引入比较简单。

默认暴露的简写形式——

我们尽量给组件取一个名字——

快捷键直接调出来——

在App.vue中，ES6中的模块化的引入——

注册组件——

main.js

入口文件.

index.html

App的两种写法：