目录
单页面应用程序
1. 什么是单页面应用程序
- 单页应用的内容的改变不需要重新加载整个页面
- 获取数据也是通过 Ajax 异步获取
- 没有页面之间的跳转,不会出现“白屏现象”
- 后端专注于提供 API 接口,更易实现 API 接口的复用
- 前端专注于页面的渲染,更利于前端工程化的发展
- 路由懒加载
- 代码压缩
- CDN 加速
- 网络传输压缩
- ① 基于 vite 创建 SPA 项目
- ② 基于 vue-cli 创建 SPA 项目
vite 的基本使用
1. 创建 vite 的项目
按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目:
2. 梳理项目的结构
3. vite 项目的运行流程
在工程化的项目中 vue 要做的事情很单纯 通过 main.js 把 App.vue 渲染到 index.html 的指定区域
- ① App.vue 用来编写待渲染的模板结构
- ② index.html 中需要预留一个 el 区域
- ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
3.1 在 App.vue 中编写模板结构
清空 App.vue 的默认内容,并书写如下的模板结构:
3.2 在 index.html 中预留 el 区域
打开 index.html 页面,确认预留了 el 区域:
3.3 在 main.js 中进行渲染
按照 vue 3.x 的标准用法,把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中:
组件化开发思想
1. 什么是组件化开发
2. 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
3. vue 中的组件化开发
vue 组件的构成
1. vue 组件组成结构
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
2. 组件的 template 节点
vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中
注意:<template> 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
2.1 在 template 中使用指令
2.2 在 template 中定义根节点
在 vue 2.x 的版本中,<template> 节点内的 DOM 结构仅支持单个
但是,在 vue 3.x 的版本中,<template> 中支持定义多个根节点
3. 组件的 script 节点
3.1 script 中的 name 节点
可以通过 name 节点为当前组件定义一个名称
在使用 vue-devtools 进行项目调试的时候,自定义的组件名称可以清晰的区分每个组件
3.2 script 中的 data 节点
组件中的 data 必须是函数
vue 组件渲染期间需要用到的数据,可以定义在 data 节点中:
组件中的 data 必须是函数
3.3 script 中的 methods 节点
组件中的事件处理函数,必须定义到 methods 节点中,示例代码如下:
4. 组件的 style 节点
- ① 运行 npm install less -D 命令安装依赖包,从而提供 less 语法的编译支持
- ② 在 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式
组件的基本使用
1.1 注册组件的两种方式
vue 中注册组件的方式分为“全局注册”和“局部注册”两种,其中:
- 被全局注册的组件,可以在全局任何一个组件内使用
- 被局部注册的组件,只能在当前注册的范围内使用
1.2 全局注册组件
1.3 使用全局注册组件
使用 app.component() 方法注册的全局组件,直接以标签的形式进行使用即可,例如:
1.4 局部注册组件
1.5 全局注册和局部注册的区别
- ① 使用 kebab-case 命名法(俗称短横线命名法,例如 my-swiper 和 my-search)
- ② 使用 PascalCase 命名法(俗称帕斯卡命名法或大驼峰命名法,例如 MySwiper 和 MySearch)
2. 组件之间的样式冲突问题
- ① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
- ② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素
2.1 思考:如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,
2.2 style 节点的 scoped 属性
为了提高开发效率和开发体验 vue 为 style 节点提供了 scoped 属性从而防止组件之间的样式冲突
2.3 /deep/ 样式穿透
注意:/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。
3. 组件的 props
- 组件的 DOM 结构、Style 样式要尽量复用
- 组件中要展示的数据,尽量由组件的使用者提供
为了方便使用者为组件提供要展示的数据,vue 组件提供了 props 的概念。
3.1 什么是组件的 props
3.3 无法使用未声明的 props
如果父组件给子组件传递了未声明的 props 属性,则这些属性会被忽略,无法被子组件使用,
3.4 动态绑定 props 的值
可以使用 v-bind 属性绑定的形式,为组件动态绑定 props 的值,示例代码如下
3.5 props 的大小写命名
组件中如果使用“camelCase (驼峰命名法)”声明了 props 属性的名称,则有两种方式为其绑定属性
4. Class 与 Style 绑定
4.3 以对象语法绑定 HTML 的 class
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化
4.4 以对象语法绑定内联的 style
封装组件的案例
1. 案例效果
2. 用到的知识点
- ⚫ 组件的封装与注册
- ⚫ props
- ⚫ 样式绑定
3. 整体实现步骤
- 创建 MyHeader 组件
- 渲染 MyHeader 组件的基本结构
- 在 App 组件中注册并使用 MyHeader 组件
- 通过 props 为组件传递数据