vue与Ajax_vue ajax

1.VUE

以前说过了vue的安装配置以及基本结构，今天来说一下它的基本操作

1.1 MVVM思想

首先要说的就是它的一个重要思想MVVM的思想

M: model 数据层
V: view 视图层
VM: 视图数据的控制层

流程:
1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化.
2. View变化, 虚拟DOM操作内存数据变化, 数据变化.

 1.2 var/let/const

1. var 没有作用域的概念 容易出现安全性问题. 成员变量
2. let 作用于var类似, 有作用域的概念 局部变量
3. const 定义常量

1.3v-text/v-html

1. {{msg}} 当页面没有渲染成功时.以原标签展现.
2. v-text 当页面没有渲染完成,则不予展现.
3. v-html 将html代码片段 渲染展现

v-html操作如下：当作html来解析，否则就是字符串

div: "<h3>我是一个标题标签</h3>"
<div v-html="div"></div>

1.4 v-model双向绑定

遇到文本框可以获取信息的就进行双向绑定

范围：1.文本框 2.单选框 3.多选框 4.下拉框 5.文本域

用户输入变化，则data数据区变化，数据区变化则文本框展现变化

1.5 @click事件绑定

遇到按钮进行事件绑定执行所绑定的方法

1.6分支结构

v-if=”条件“

v-else-if=”条件“

v-else（最后执行）

1.7for循环

v-for=”每个数据的名称   in    要循环遍历的数据名称“

v-for=”每个数据的名称，i   in    要循环遍历的数据名称“ -----i是循环的下标，标识第几次循环

1.8输入框常用功能标签

            v-model.trim  去空格（只能去除头和尾，不能去除中间的空格）
            v-model.number 变数字（1+1=2，不加会变成1+1=11）
            v-model.lazy   懒加载（校验时使用，全部加载完成进行校验，不会写一个字母校验一次）

            @click.prevent取消默认行为

2.VUE的生命周期

2.1概念

         VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点 有特殊的需求,可以对VUE对象进行扩展!        

2.2流程

 2.3流程说明

1.生命周期函数的方法名称 必须固定.
2.生命周期函数是VUE对象特有的函数.应该放到根目录下.
3.当页面渲染成功之后, 一共执行了4个生命周期方法.
                第一类: VUE对象的创建.
                    beforeCreate:对象创建前调用
                    created: VUE对象已经创建完成之后调用    
                第二类: VUE对象的挂载(渲染)
                    beforeMount:  el : "#app",VUE对象在找到@APP标签之前先执行该函数.
                    mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数            
4. 用户修改阶段:
                第三类:
                    beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数
                    过渡: 数据已经被修改
                    updated: 数据已经被修改之后调用该函数
5. 销毁阶段:
                 销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
                 beforeDestroy: 在销毁方法执行前
                 destroyed:     标志着VUE对象已经销毁.（此时页面看到的只剩躯壳了，无法操作）

3.Ajax

前后调用流程图：ajax的使用区域

 3.1Ajax概念

        使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

3.2特点 

局部刷新,异步访问

3.3异步原理

中间有ajax引擎，否则用户和服务器就时同步的，如果服务器忙用户只能等待

原理图：

 3.4Ajax请求步骤

1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的 回调函数, 将服务器数据 交还给用户.
5. 用户在请求的过程中,可以完成自己的任务.

注意事项: 多个Ajax的请求 不关注顺序.

3.5Ajax语法

以get为例：

axios.get("http://localhost:8090/axios/getUser",{params : user})
			     .then(promise => {
					 
				 })

注意区分请求的方式：1.get 2.delete 3.post 4.put

两个参数分别是：url地址和对象，get和delete传对象需要加{params : 对象名}，而post和put直接写对象名即可，用普通get和rsetFul的形式传参则不写参数。