JavaWeb从入门到进阶（vue与Ajax Axios）

什么是Vue: Vue是一套前端框架，免除原生javaScript中的DOM操作，简化书写。 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

本质区别：

• 原生JS：你要告诉浏览器每一步怎么做
• Vue：你告诉Vue你想要什么效果，Vue帮你处理DOM操作
• Vue指令就像是预置的、智能的JS函数，让你用更少的代码完成更复杂的交互，把从"数据变化"到"视图更新"的过程自动化了。

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

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

插值表达式 形式:{{表达式))。 内容可以是: 变量 三元运算符 函数调用 算术运算

Vue的常用指令

指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如:v-if，v-for... 常用指令 v-bind  为HTML标签绑定属性值,如设置href,css样式等 v-model在表单元素上创建双向数据绑定

通过v-bind v-modle 绑定的变量，必须在数据模型中声明

v-On为HTML标签绑定事件

v-if v-else-if     条件性的渲染某元素，判定为true时渲染，否则不渲染 v-else    

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

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

生命周期

生命周期:指一个对象从创建到销毁的整个过程。 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

 Ajax

概念:Asynchronous JavaScript And XML，异步的JavaScript和XML。 作用: 数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。

原生Ajax 1.准备数据地址:htp://yapi.smart-xwork.cn/mock/169327/emp/list 2.创建XMLHttpRequest对象:用于和服务器交换数据 3.向服务器发送请求 4.获取服务器响应数据

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