Vue

一、Vue概述

1.Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

2.基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

3.官网：https://v2.cn.vuejs.org/

4.框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

二、插值表达式

1.形式

​ {{表达式}}

2.内容

（1）变量

（2）三元运算符

（3）函数调用

（4）算术运算

三、Vue指令

1.指令

HTML标签上带有 v-前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for...

2.常用指令

（1）v-bind：为HTML标签绑定属性值，如设置href，css样式等；

​

​ 简化：

（2）v-model：在表单上创建双向数据绑定；

​ <input type="text" v-model="url">

（3）v-on：为HTML标签绑定事件；

​

简化：

（4）v-if：条件 性的渲染某元素，判定为true时渲染，否则不渲染；

​ v-else-if：同上；

​ v-else：同上；

（5）v-show：根据条件展示某元素，区别在于切换的是display属性的值；

（6）v-for：列表渲染，遍历容器的的元素或者对象的属性。

四、Vue生命周期

1.生命周期

指一个对象从创建到销毁的整个过程。

2.生命周期的八个阶段

每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

（1）beforeCreate：创建前；

（2）created：创建后；

（3）beforeMount：挂载前；

（4）mounted：挂载完成；

（5）beforeUpdate：更新前；

（6）updated：更新后；

（7）beforeDestroy：销毁前；

（8）destroyed：销毁后。

五、Vue路由（Vue Router）

1.介绍

Vue Router是Vue的官方路由。

2.组成

（1）VueRouter:路由器类，根据路由请求在路由视图中动态渲染选中的组件；

（2）<router-link>:请求链接组件，浏览器会解析成<a>；

（3）<router-view>:动态视图组件，用来渲染展示与路由路径对应的组件。

3.步骤

（1）安装（创建Vue项目时可选择）：

​ npm install vue-router@3.5.1

（2）定义路由