# Vue 简介

# Vue 介绍

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架

# Vue 特性

# 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构

# 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中

# MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

Model 表示当前页面渲染时所依赖的数据源

View 表示当前页面所渲染的 DOM 结构

ViewModel 表示 vue 的实例，它是 MVVM 的核心

# MVVM 工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

# Vue 的基本使用

# 基本使用步骤

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

# 代码与 MVVM 对应关系

# Vue 测试工具

# 安装 vue-devtools 测试工具

# 使用 vue-devtools 测试工具

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板

# Vue 指令与过滤器

# 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

① 内容渲染指令

② 属性绑定指令

③ 事件绑定指令

④ 双向绑定指令

⑤ 条件渲染指令

⑥ 列表渲染指令

# 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

# v-text

会覆盖元素内的默认值

# 双大括号语法

vue 提供的双大括号语法语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种双大括号语法的专业名称是插值表达式（英文名为：Mustache）

还可以使用 JavaScript 表达式

# v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令

# 属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令

# 事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

# 事件简写方式

由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）

# 事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event

# 绑定事件并且传参

在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参

# $event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event

# 事件修饰符

在事件处理函数中调用 event.preventDefault () 或 event.stopPropagation () 是非常常见的需求，因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制

事件修饰符	说明
.prevent	阻止默认行为（例如阻止 a 连接的自动跳转，阻止 form 默认提交等等）
.stop	阻止冒泡事件
.capture	以捕获模式触发当前事件处理函数
.once	绑定事件只触发一次
.self	只有在 event.target 是当前元素自身时触发事件处理函数

# 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

# 双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

# v-model 指令修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符

修饰符	作用	示例
.number	自动将用户输入值的类型转换为数值类型	<input v-model.number="age">
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg">
.lazy	在 "change" 时而非 "input" 时更新	<input v-model.lazy="msg">

# 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏

• v-if
• v-show

# v-if 和 v-show 的区别

# 实现原理不同

• v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏
• v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏

# 性能消耗不同

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

# v-else

v-if 可以单独使用，或配合 v-else 指令一起使用

# v-else-if

v-else-if 指令，顾名思义，充当 v-if 的 “else-if 块”

# 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构

# v-for 中的索引

# 使用 key 维护列表状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性

# key 的注意事项

• key 的值只能是字符串或数字类型
• key 的值必须具有唯一性（即：key 的值不能重复）
• 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
• 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
• 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

# 过滤器

# 过滤器概念

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化

过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道符” 进行调用

# 定义过滤器

# 所有过滤器喝全局过滤器

在 filters 节点下定义的过滤器，称为 “私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用，如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

# 连续调用多个过滤器

# 8.5 过滤器传参

# 过滤器兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能

如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

# 侦听器

# watch 侦听器介绍

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

# 使用 watch 用户名是否可用

# immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项

# deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选

# 监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器

# 计算属性

# 计算属性的介绍

计算属性指的是通过一系列运算之后，最终得到一个属性值，这个动态计算出来的属性值可以被模板结构或 methods 方法使用

# 计算机属性的特点

• ① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
• ② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

# vue-cli

# 单页面应用程序介绍

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成

# vue-cli 介绍

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程

# 安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上： npm install -g @vue/cli

# 步骤

# vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中

• App.vue 用来编写待渲染的模板结构
• index.html 中需要预留一个 el 区域
• main.js 把 App.vue 渲染到了 index.html 所预留的区域中

# vue 组件

# 组件化开发介绍

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护

# vue 中的组件化开发

vue 是一个支持组件化开发的前端框架

vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件

# vue 组件的三个组成部分

• template -> 组件的模板结构
• script -> 组件的 JavaScript 行为
• style -> 组件的样式

# template

• template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
• template 中只能包含唯一的根节点

# script

vue 规定：开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑

# .vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象

# style

vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构

# 让 style 中支持 less 语法

在 <style> 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式

# 组件之间的父子关系

# 使用组件得三个步骤

# 使用 import 语法导入需要得组件

# 使用 components 节点注册组件

# 以标签形式使用刚才注册的组件

# 通过 components 注册私有子组件

在组件 A 的 components 节点下，注册了组件 F，则组件 F 只能用在组件 A 中；不能被用在组件 C 中

# 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component () 方法，可以注册全局组件

# 组件得 props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性

# props 是只读得

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值

要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的

# props 的默认值 default

在声明自定义属性时，可以通过 default 来定义属性的默认值

# props 的 type 值得类型

在声明自定义属性时，可以通过 type 来定义属性的值类型

# props 得 required 必填项

# 解决组件之间样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题

原因

• 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
• 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

# 如何解决组件样式得冲突问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域

# style 节点得 scorped 属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性

# /deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的