目录

1.Vue概述

2.创建模板

准备

数据

3.Vue常用指令

v-for

v-bind

v-if/show

v-model​

v-on

4.Ajax

介绍​编辑​

异步请求模板

​编辑

请求方式别名

案例​

同步操作async/await 

5.Vue生命周期​

---

1.Vue概述

2.创建模板

准备

通过 <script> 标签将Vue的库文件引入到你的HTML页面中

创建div元素给定id值，div内所有html内容都将被Vue控制

创建Vue程序的应用实例，控制视图的元素,mount指定控制范围为id=app包含的所有元素。

数据

data(){   }中return返回的就是一个对象。

message只需要管理数据，<h1>会自动更新。

3.Vue常用指令

v-for

让tr循环展示，由于empList数组中的元素为一个对象，用e遍历数组，index为遍历元素的索引，然后通过插值表达式渲染从对象取出的各数据。

v-bind

 

上面img渲染失败由于插值表达式不能定义在标签内部，此时如果要动态为标签绑定属性值就要使用v-bind指定。

v-if/show

v-if：不满足条件的元素不渲染。

v-show：所有元素都会渲染，满足条件才会显示，不满足则将display=none隐藏

v-model

在return（）{ }中创建新的数据模型searchForm

在姓名文本框中通过v-model绑定searchForm.name数据模型对应内容。

通过v-model实现双向绑定。

v-on

methods方法与data同级定义在creatApp中。

在调用当前应用实例的数据时要用this指定。

4.Ajax

介绍

异步请求模板

先引入Axios的js文件

通过Axios封装的Ajax框架，指定请求方式method和请求路径url。
由于该访问是异步执行，成功时通过then获取的result结果集参数console.log返回数据result.data。
请求失败则通过catch获取的err返回错A误err。

请求方式别名

案例

由于表单中的文本框以及通过v-model与searchFor中的数据模型对应项绑定，用户在浏览器中填入数据会同步至数据模型，再通过get请求满足用户输入的数据返回。

由于表单中是遍历的semList数组，通过result请求的满足用户输入的结果集通过

result.data.data获得data[ ]中的所有满足要求的对象返回。

同步操作async/await 

5.Vue生命周期

常用钩子函数 mounted，在Vue挂载完成之后自动调用。  与data（）平级。