一、简介

用于构建用户界面的前端框架

 

1.1特性

①数据驱动视图

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

当页面数据发生变化时，页面会自动重新渲染

 

注：数据驱动视图是单向的数据绑定

 

②双向数据绑定

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

开发者不再需要手动操作DOM元素，来获取表单元素最新的值

 

1.2 MVVM（Model、View、ViewModel）

是vue实现数据驱动视图和双向数据绑定的核心原理

 

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

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

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

 

1.3 MVVM的工作原理

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

 

 

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

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

 

二、基本使用

步骤：

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

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

3. 创建VM实例对象

 

2.1指令

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

 

按不同的用户可以分为6大类：

①内容渲染指令

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

（1）v-text

注：v-text指令会覆盖元素内默认的值

 

（2）{ { } }

专业名称叫插值表达式，专门用来解决v-text会覆盖默认文本内容的问题

 

（3）v-html

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

 

②属性绑定指令

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

可以简写为  ：

 

 Javascript表达式

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript表达式的运算

 

 

③事件绑定指令

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

 

注：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后分别为：v-on：click、v-on：input、v-on:keyup

 

 

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

 

 

简写：@

 

在v-n指令所绑定的事件处理函数中，同样可以接收到事件参数对象vent

 

使用v-on指令绑定事件，可以使用（）进行传参

 

$event是vue提供的特殊变量，用来表示原生事件参数对象event。可以解决事件参数对象event被覆盖的问题

 

事件修饰符

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

 

常用的5个事件修饰符：

 

按键修饰符

在监听键盘事件时，需要判断详细的按键，可以为键盘相关的事件添加按钮修饰符

 

 

 

④双向绑定指令

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

 

v-model指令的修饰符

 

 

⑤条件渲染指令

用来辅助按需控制DOM的显示与隐藏

 

条件渲染指令有2个：

v-if

每次动态创建或移除元素，来实现元素的显示和隐藏

如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时，v-if性能更好

 

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

注：v-else指令必须配合v-if指令一起使用，否则无效

 

v-else-if指令，充当v-if的“else-if块”可以连续使用

注：v-else-if指令必须配合v-if指令一起使用，否则无效

v-show

动态为元素添加或移除display：none样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用v-show性能会更好

 

 

⑥列表渲染指令

vue提供了v-for列表渲染指令，用来辅助基于一个数组来循环渲染一个列表结构，v-for指令需要使用item in items形式的特殊语法

items是待循环的数组

Item是被循环的每一项

 

v-for中的索引

v-for指令还支持一个可选的第二个参数，即当前项的索引

语法：

（item，index）in items

注：v-for指令中的item项和index索引都是形参，可以根据需要进行重命名

 

使用key维护列表的状态

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

 

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

Key注意事项：

1. key的值只能是字符串或数字类型

2. Key的值必须具有唯一性

3. 建议把数据项id属性的值作为key的值

4. 使用index的值当作key的值没有意义

5. 建议使用v-for指令时一定要指定key的值

 

2.2过滤器

是vue提供的功能，常用于文本的格式化，可以用在插值表达式和v-bind属性绑定

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

 

定义过滤器：

在创建vue实例期间，可以在filters节点中定义过滤器

 

2.2.1私有过滤器

在filters节点下定义的过滤器，因为只能在当前vm实例所控制的el区域内使用

 

2.2.2全局过滤器

在多个vue实例之间共享过滤器，可以定义全局过滤器

 

2.2.3连续调用多个过滤器

可以串联调用

 

过滤器本质是JavaScript函数，可以接收参数

 

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

在企业项目开发中，如果使用的是3.X版本的vue，建议使用计算属性或方法代替过滤器

 

v3.vuejs.org/guide/migra…

 

三、watch侦听器

允许监听数据的变化，从而针对数据的变化做特定的操作

语法：

 

3.1侦听器格式

1. 方法格式的侦听器：

缺点：无法在刚进入页面的时候自动触发

2. 对象格式的侦听器：

好处：可以通过immediate选项，让侦听器自动触发

 

3.2  watch

监听username值的变化，并使用axios发起ajax请求，检测当前输入的用户名是否可用

 

3.3 immediate

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

 

3.4 deep

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

 

如果只监听对象中的单个属性的变化

 

四、计算属性

是通过一系列运算之后，最终得到一个属性值

这个动态计算出来的属性值可以被模板结构或methods方法使用

 

特点：

1. 虽然计算属性在声明的时候被定义为方法，但是计算属性本质是一个属性

2. 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

 

五、生命周期

是指一个组件从创建到运行到销毁的整个阶段，强调的是一个时间段

 

生命周期函数：是由vue框架提供的内置函数，会伴随组件的生命周期，自动按次序执行，强调的是时间点

 

 

5.1组件生命周期函数的分类

 

生命周期图示cn.vuejs.org/v2/guide/in…

 

六、组件之间的数据共享

6.1组件之间的关系

①父子关系

②兄弟关系

 

父子组件之间的数据共享又分为

①父子共享数据

②子父共享数据

 

6.2父组件向子组件共享数据

需要使用自定义属性

 

6.3子组件向父组件共享数据

使用自定义事件

 

6.4兄弟组件之间的数据共享

使用EventBus

使用步骤：

1. 创建eventBus.js模块，并向外共享一个vue实例对象

2. 在数据发送，调用bus.$emit（‘ 事件名称 ’ ，要发送的数据）方法触发自定义事件

3. 在数据接收方，调用bus.$on（‘ 事件名称 ’ ，事件处理函数）方法注册一个自定义事件

 

七、ref引用

用来辅助开发者在不依赖jQuery的情况下，获取DOM元素或组件的引用

每个vue组件实例上，都包含一个$refs对象，里面储存对应DOM元素或组件的引用，默认情况下，组件的$refs指向一个空对象

 

7.1引用DOM元素

 

7.2引用组件实例

![image.png](p3-juejin.byteimg.com/tos-cn-i-

 

7.3 this.$nextTick（cb）方法

组件的$nextTick（cb）方法会把cb回调推迟到下一个DOM更新周期之后执行

等DOM更新完成之后，再执行cb回调函数，从而保证cb回调函数可以操作到最新的DOM元素

 

八、动态组件

可以改变的组件，解决多组件同一位置，切换显示的需求

语法：

component 组件（位置） +is属性（哪个组件）

修改is属性绑定的值就可以切换组件

 

 

8.1后备内容（默认内容）

封装组件时，可以为预留的< slot >< /slot >插槽提供后备内容（默认内容）

语法：在< slot >标签内放置内容，作为默认内容

 

外部使用组件时，不传东西，则slot显示后备内容（slot标签内部的结构）

外部使用组件时，传了东西，则整个slot会被替换掉

 

 

8.2具名插槽

一个组件内有多处需要外部传入标签，进行定制

语法：< slot name= ’ 自定义的名字’ >< /slot >

 

多个slot使用name属性区分 自定义的名字

template配合v-slot：自定义的名字 来分发对应标签

v-slot可以简写为#

 

 

8.3作用域插槽

定义slot插槽的同时，是可以传值的，给插槽上绑定数据，使用插槽的时候可以用到传过去的数据

步骤：

1. 给slot标签以添加属性的方式传值

2. 所有添加的属性，都会被收集到一个对象中

3. 在template中，通过v-slot：插槽名= ’ 变量（obj）’接收

 

九、自定义指令

9.1私有自定义指令

在vue组件中，可以在dirctives节点下声明私有自定义指令

在使用自定义指令时，需要加上v-前缀

 

在template（html）结构使用自定义指令时，可以通过 = 号的方式为当前指令动态绑定参数值

 

在声明自定义指令时，可以通过形参中的第二个参数来接收指令的参数值

 

bind函数只调用1次，当指令第一次绑定到元素时调用，当DOM更新时，bind函数不会被触发，update函数会在每次DOM更新时被调用

 

9.2全局自定义指令

需要通过vue.directive（）进行声明

 

如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式

 

十、路由

即对应关系

 

SPA是指一个web网站只有唯一的一个html页面，所有的组件的展示和切换都在这唯一的一个页面内完成，此时，不同组件之间的切换需要通过前端路由来实现

 

在SPA项目中，不同功能之间的切换，要依赖前端路由来完成

 

10.1前端路由

Hash地址与组件之间的对应关系

 

工作方式：

1. 用户单击了页面上的路由链接

2. 导致了URL地址栏中Hon到Hash值发生变化，

3. 前端路由监听到了Hash地址的变化

4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

 

10.2 vue-router

是vue.js官方给出的路由解决方案，只能在vue中使用，能够轻松管理SPA项目中组件的切换

 

官方文档地址：router.vuejs.org/zh/

 

安装配置步骤：

1. 安装vue-router包

 

2. 创建路由模块

在src源代码目录下，新建router/index.js路由块，并初始化

 

3. 导入并挂载路由块

在src/main.js入口文件中，导入并挂载路由模块

 

4. 声明路由链接和占位符

在src/App.vue组件中，使用vue-router提供的和声明路由链接和占位符

 

声明路由的匹配规则

在src/router/index.js路由模块中，通过routes数组声明路由的匹配规则

 

10.3路由重定向

用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

 

10.4嵌套路由

通过路由实现组件的嵌套展示

 

声明子路由链接和子路由占位符

 

通过children属性声明子路由规则

在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则

 

10.5动态路由

把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性

在vue-router中使用英文的冒号（：）来定义路由的参数项

 

在动态路由渲染出来的组件中，可以使用this.$route.params对象访问到动态匹配的参数值

 

为了简化路由参数的获取形式，vue-router允许路由规则中开启props传参

10.6声明式导航

点击链接实现导航的方式

例如：

普通网页中点击< a >链接、vue项目中点击< router-link >

 

10.7编程式导航

调用API方法实现导航的方式

例如：

普通网页中调用location.herf跳转到新页面的方式

 

10.7.1 $router.push

可以跳转到指定的hash地址，从而展示对应的组件页面

 

10.7.2 $router.replace

可以跳转到指定的hash地址，从而展示对应的组件页面

 

push和replace的区别：

Push会增加一条历史记录

replace不会增加历史记录，而是替换掉当前的历史记录

 

10.7.3 $router.go

可以在浏览历史中前进和后退

 

在实际开发中，一般只会前进和后退一层页面，因此vue-router提供了简写

$router.back（）

在历史记录中，后退到上一个页面

 

$router.forward（）

在历史记录中，前进到下一个页面

 

10.8导航守卫

可以控制路由的访问权限

![image.png](p9-juejin.byteimg.com/tos-cn-i-

 

10.8.1全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫

可以对每个路由进行访问权限的控制

 

回调函数中接收3个形参

 

next函数的3种调用方式：

当前用户拥有后台主页的访问权限，直接放行：next（）

当前用户没有后台主页的访问权限，强制其跳转到登录页面：next（‘ /login ’）

当前用户没有后台主页的访问权限，不允许跳转到后台主页：next（false）

 

控制后台主页的访问权限