1.Vue3

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

基于数据渲染出用户看到的界面

框架：就是一套完整的项目解决方案，用于快速构建项目 。

优点：大大提升前端项目的开发效率 。

缺点：需要理解记忆框架的使用规则 。

2.Vue快速入门

准备：

  引入Vue模块（官方提供）

  创建Vue程序的应用实例，控制视图的元素

  准备元素(div)，被Vue控制

数据驱动视图：

  准备数据

  通过插值表达式渲染页面

3.Vue常用指令

HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

例子：<pv-xxx="..."> ...</p>

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：

参数说明：

items为遍历的数组

item为遍历出来的元素

index为索引/下标，从0开始 ；可以省略，省略index语法：v-for="item in items

key：

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能

推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

注：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令。

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值"

<imgv-bind:src="item.image" width="30px">

简化：:属性名="属性值"

<img:src="item.image" width="30px">

注：动态的为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if

语法：v-if="表达式"，表达式值为true，显示；false，隐藏

场景：要么显示，要么不显示，不频繁切换的场景

其它：可以配合v-else-if / v-else进行链式调用条件判断

v-show

语法：v-show="表达式"，表达式值为true，显示；false，隐藏

场景：频繁切换显示隐藏的场景

注：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if/v-else-if之后。

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或 设置 表单项数据

语法：v-model="变量名"

注：v-model中绑定的变量，必须在data中定义。

v-on

作用：为html标签绑定事件（添加事件监听）

语法：v-on:事件名="方法名"

简写为@事件名="…"

Methods方法与data()同级

4.Ajax

异步的JavaScripthe xml

作用

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

5.Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。

步骤：

引入Axios的js文件（参照官网）；

<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

使用Axios发送请求，并获取响应结果

method：请求方式，GET/POST

url：请求路径

data：请求数据(POST)

params：发送请求时携带的url参数 如：...?key=val

请求方式别名格式：  axios.请求方式(url [, data [, config]])

Axios发送异步请求

GET:  axios.get(url).then((res)=>{…}).catch((err)=>{…})

POST:  axios.post(url).then((res)=>{…}).catch((err)=>{…})

6.async & await

可以通过async、await可以让异步变为同步操作。

async就是来声明一个异步方法，await是用来等待异步任务执行

注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值 。

7.Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

Vue生命周期典型的应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面。