面向后端人员，旨在快速熟悉Vue+Element框架以及Vue+Axios前后联调，更详细的以后再总结。

1.Vue的特性： （1）JavaScript框架

（2）简化Dom操作

（3）响应式数据驱动

2.在html文件中引用vue.js和直接创建.vue文件有什么差别？

本文主要针对第一种的vue.js形式，当然平时也会看到直接的.vue文件。

两者的区别在于引用Vue.js后可以在 浏览器上直接使用Vue的实例。而创建.vue只能通过编译后，才可在浏览器上运行查看效果。 具体可参考：https://blog.csdn.net/weixin_43529465/article/details/122412481

第一个案例： 先导入开发版本的Vue.js，然后创建Vue实例对象, 设置el属性和data属性

关键代码：

{{}} 在 Vue 里称之为插值表达式，用来绑定 data 方法返回的对象属性，绑定的含义是数据发生变化时，页面显示会同步变化

（1）el是用来设置Vue实例挂载(管理)的元素

（2）Vue会管理el选项命中的元素及其内部的后代元素

（3）可以使用其他的选择器,但是建议使用ID选择器

（4）可以使用其他的双标签,不能使用HTML和BODY

（1）Vue中用到的数据定义在data中

（2）data中可以写复杂类型的数据

（3）渲染复杂类型数据时,遵守js的语法即可

e.g.

1.v-text 设置标签的文本值(textContent)

对比于上面提到的插值表达式，v-text是全部替换，使用插值表达式{{}}可以替换指定内容；可以看下面的例子：

2.v-html

v-html指令的作用是：设置元素的innerHTML，内容中有html结构会被解析成标签

3.v-on 为元素绑定事件，click单击，dbclick双击……

(1) 语法

（2）特性 传递自定义参数；事件修饰符

e.g.

4.v-show 根据表达值的真假,切换元素的显示和隐藏

（1）原理是修改元素的display,实现显示或隐藏

（2）指令后面的内容,最终都会解析为布尔值，值为true元素显示,值为false元素隐藏

（3）数据改变之后,对应元素的显示状态会同步更新

e.g.

5.v-if 根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

（1）本质是通过操纵dom元素来切换显示状态

（2）表达式的值为true,元素存在于dom树中,为false,从dom树中移除（与v-if的区别）

（3）频繁的切换v-show,反之使用v-if,前者的切换消耗小

6.v-bind

设置元素的属性(比如:src,title,class)

v-bind:属性名=表达式

完整写法是 v-bind:属性名；简写的话可以直接省略v-bind，只保留 :属性名

7.v-for 根据数据生成列表结构

e.g.

8.v-model

获取和设置表单元素的值（双向数据绑定）

（1）v-model指令的作用是便捷的设置和获取表单元素的值

（2）绑定的数据会和表单元素值相关联

（3）绑定的数据←→表单元素的值

e.g.

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

最常用的是create与mounted

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

官网：https://element.eleme.cn/#/zh-CN

需要什么组件就去官网找，使用方法就是复制+修改！

比如需要按钮组件，打开官网查找，可以看到下面的图示

然后查看它提供的代码：

使用type、plain、round和circle属性来定义 Button 的样式

功能强大的网络请求库

首先需要导入：

常见的发送两种请求： （1）get请求 .then方法，有两个参数，第一个回调函数会在请求成功时触发，第二个回调函数会在请求失败时触发

如果地址需要带参数，则可以写成

也可以写成下面这个式子：

（2）post请求

也可以写成下式：

（1）axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关参数：

（2）then() 需要传递一个匿名函数。将 then()中传递的匿名函数称为 回调函数

axios回调函数中的this已经改变，无法访问到data中数据，vue使用axios的回调函数中this不指向vue实例，为undefined

这是因为在外边的 this 表示的是 Vue 对象，而回调函数中的 this 表示的不是 vue 对象。

解决方法1：把this保存起来,回调函数中直接使用保存的this即可

但是这种方法看起来比较繁琐，所以采用——箭头函数（ECMAScript6新语法）

(参数) => { 逻辑代码 }