vue3---组件基础(上)保姆级篇

前言

vue3---组件基础(上)保姆级篇_第1张图片

关于 vue3 基础学习,前面两篇博客讲了单页面应用程序、vite 的基本使用  。

这期就来一篇多一点的吧!这期主要内容有:组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例

看完这些,砸门也就详细了解什么是组件了。废话不多说,直接上刺刀!!

目录

前言

组件化开发思想

1. 什么是组件化开发

2. 组件化开发的好处

3. vue 中的组件化开发

vue 组件的构成

1. vue 组件组成结构

2. 组件的 template 节点

2.1 在 template 中使用指令

2.2 在 template 中定义根节点

3. 组件的 script 节点

3.1 script 中的 name 节点

3.2 script 中的 data 节点

3.3 script 中的 methods 节点

4. 组件的 style 节点

4.1 让 style 中支持 less 语法

组件的基本使用

1. 组件的注册

1.1 注册组件的两种方式

1.2 全局注册组件

1.3 使用全局注册组件

1.4 局部注册组件

1.5 全局注册和局部注册的区别

1.6 组件注册时名称的大小写

1.7 通过 name 属性注册组件

2. 组件之间的样式冲突问题

2.1 思考:如何解决组件样式冲突的问题

2.2 style 节点的 scoped 属性

2.3 /deep/ 样式穿透

3. 组件的 props

3.1 什么是组件的 props

3.2 在组件中声明 props

3.3 无法使用未声明的 props

3.4 动态绑定 props 的值

3.5 props 的大小写命名

4. Class 与 Style 绑定

4.1 动态绑定 HTML 的 class

4.2 以数组语法绑定 HTML 的 class

4.3 以对象语法绑定 HTML 的 class

4.4 以对象语法绑定内联的 style

封装组件的案例

1. 案例效果

2. 用到的知识点

3. 整体实现步骤

写在最后

组件化开发思想

1. 什么是组件化开发

组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。例如:ibootstrap - Bootstrap可视化布局系统 所展示的效果,就契合了组件化开发的思想。用户可以通过拖拽组件的方式,快速生成一个页面的布局结构。

vue3---组件基础(上)保姆级篇_第2张图片

2. 组件化开发的好处

前端组件化开发的好处主要体现在以下两方面:

  • 提高了前端代码的复用性和灵活性

  • 提升了开发效率和后期的可维护性

3. vue 中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

vue 组件的构成

1. vue 组件组成结构

每个 .vue 组件都由 3 部分构成,分别是:

  • template -> 组件的模板结构

  • script -> 组件的 JavaScript 行为

  • style -> 组件的样式

其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。

2. 组件的 template 节点

vue 规定:每个组件对应的模板结构,需要定义到