Web前端快速入门（Vue&Ajax，前端与服务器的交互）
目录
Vue
Ajax
Vue
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
官方文档：安装 — Vue.js
Vue快速入门
一、新建HTML页面，引入Vue.js文件
二、在JS代码区域，创建Vue核心对象，定义数据模型
e1:代表Vue要控制哪个区域 #为id选择器（类似于css）
data：数据模型（双向绑定）
三、编写视图
{{ message }}
插值表达式：
形式：{{表达式}}。
内容可以是：变量、三元运算符、函数调用、算数运算
v-model在view中叫做指令
常用指令
v-bind
哈哈哈
简化写法
哈哈哈
v-model
注意：通过v-bind 或者v-model绑定的变量，必须在数据模型中声明。
Vue-快速入门
v-if
年龄{{age}}，经判定为：
年轻人
中年人
老年人
和java中的if语句相同，如果第一条if判断为true则执行第一条，进行渲染，否则不断往后判断
v-show
年龄{{age}}，经判定为：
年轻人
只要条件判断成立则渲染
v-for
Vue-快速入门
{{addr}}
{{index}}{{addr}}
示例
Document
编号
姓名
年龄
性别
成绩
等级
{{index+1}}
{{user.name}}
{{user.age}}
男
女
{{user.score}}
优秀
及格
不及格
生命周期
生命周期：一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期的事件，会自动执行一个生命周期的方法（钩子）
可以与methods方法平级定义一个钩子方法，一旦触发了这个生命周期的事件，就会自动触发生命周期的方法。
mounted：Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
Ajax
概念：异步的JavaScript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不加载整个页面的情况下，与服务器交换数据并更新部分网页的技术， 如：搜索联想、用户名是否可用的校验等。
步骤：
1.准备数据地址
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
Axios
介绍：Axios对原生的Ajax进行封装，简化书写，快速开发
官网：Axios中文文档 | Axios中文网
Axios入门：
1.引入Axios的js文件
2.使用Axios发送请求，并获取数据结果
Ajax-Axios
method:"get"为请求方式
url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"为服务器路径
.then(result=>{
console.log(result.data);为得到服务器响应后结果
简化方式：
发送GET请求
axios.get("url:"http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
console.log(result.data);
});
发送POST请求
axios.post("url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById"，"id=1").then((result)=>{
console.log(result.data);
});
