vue框架基础知识

官网：:https://cn.vuejs.org/v2/guide/
Vue的目的就是为了更容易的拼接字符串，把HTML中的数据改为一个变量，在Vue.js中为这个变量赋值，Vue可以自动把变量替换为赋的值
插值表达式的基本使用：

例：

		<div id="app">
			<div>{{msg}}</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
			//el:元素的挂载位置 data对象中存放的是模型数据
			//vue中{{}}可以支持一些简单的计算和字符串的拼接
		</script>

模板语法：

指令：
自定义属性，指令的格式：以v-开始

v-cloak指令用法：
在这里插入图片描述

插值表达式存在闪动的问题，解决原理：先隐藏，替换好值之后再显示最终的值

		<div id="app">
			<div v-cloak>{{msg}}</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			/*
			v-cloak指令的用法：
			1.提供样式
			[v-cloak]{
				display:none;
			}
			
			*/
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
			//el:元素的挂载位置 data对象中存放的是模型数据
			//vue中{{}}可以支持一些简单的计算和字符串的拼接
		</script>

数据绑定指令：
v-text:填充纯文本:相比插值表达式更加简洁

		<div id="app">
			<div v-text='msg'></div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
		</script>

v-html 填充HTML片段：可以解析HTML的代码，存在安全隐患
v-pre 填充原始信息

数据响应式：
html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）

数据绑定：
将数据填充到标签中

v-once:
只编译一次，显示内容之后不再具有响应式功能，显示的信息后续不需要再更改，加入v-once可以提高性能

双向数据绑定：
v-model指令用法：
修改表单内的内容，同时被绑定的元素的内容也会修改

	<div id="app">
			<div v-text='msg'></div>
			<input type='text' v-model='msg'/>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'helloWorld'
				}
			})
		</script>

事件绑定：
v-on指令用法：

1.<input type='button' v-on:click='num++'/>
2.<input type='button' @click='num++'/>

事件函数的调用方式:
在Vue中，数据写在data对象中，函数都写在methods中,如果想要在函数当中控制data当中的变量数据时，需要使用this.变量名的形式

1.直接绑定函数名称:
<button v-on:click='say'>Hello</button>
2.调用函数
<button v-on:click='say()'>Say hi</button>

事件函数参数传递

普通参数和事件对象
//可以传递多个参数
<button v-on:click='say("参数",$event)'>Say hi</button>

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event，事件对象是触发事件的那个元素标签

	<div id="app">
			<div v-text='num'></div>
			<div>
				<button v-on:click='handle(123,456,$event)'>点击</button>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					num:0
				},
				methods:{
					handle:function(p1,p2,event){
						console.log(p1);
						console.log(p2);
						//p1为123，p2为456，一次可以传递多个参数
						console.log(event);
						this.num++;
					}
				}
			})
		</script>

事件修饰符：

.stop阻止冒泡
<a v-on:click.stop="handle">跳转</a>
//原生js想要阻止冒泡必须使用事件对象.stopPropagation();
.prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
//原生js想要阻止默认行为必须使用事件对象.preventDefault();

按键修饰符：

.enter 回车键
<input v-on:keyup.enter='submit'>
.delete删除键
<input v-on:keyup.delete='handle'>
//submit为自定义的函数

自定义按键修饰符：
自定义按键修饰符名字是自定义的，，但是对应的值必须是按键对应event.keyCode值，keyup事件是按下任意一个按键都会触发事件，事件参数即为event

全局config.keyCodes对象
Vue.config.keyCodes.f1 = 112
//每一个按键都有一个数字代表的唯一标识

把变量赋值给属性的时候用bind，元素的内容用{{}}

v-bind指令用法
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>

	<div id="app">
			<div v-text='num'></div>
			<div>
				<a v-bind:href="url">百度</a>
				<button v-on:lick='handle'>切换</button>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					url:'http://www.baidu.com'
				},
				methods:{
					handle:function(){
						this.url='http://www.taobao.com'
					}
				}
			})
		</script>

样式绑定：
class样式处理：

对象语法：
<div v-bind:class="{ active:isActive}"></div>
数组语法
<div v-bind:class="[ activeClass,errorClass]"></div>
对象语法的值是true或者false，数组语法的值为css选择器，可以在数组中增加对象的用法

v-bind指令用法
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>

	.active{
		width:100px;
		height:100px;
	}
	<div id="app">
			<div v-text='num'></div>
			<div>
				<div v-bind:class="{ active:isActive }"></div>
				<div v-bind:class="[activeClass,errorClass]"></div>
				<button v-on:lick='handle'>切换</button>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					isActive:true,
					activeClass:'',
					errorClass:''				},
				methods:{
					handle:function(){
						//控制isActive的值在true和false之间进行切换可以使用取反
						this.isActive = !this.isActive;
					}
				}
			})
		</script>

style样式处理：

对象语法：
<div v-bind:style="{ color:actieColor,fontsize：fontSize}"></div>
数组语法：
<div v-bind:style="[baseStyles,overridingStyles]"></div>

分支循环结构：
v-if
v-else
v-else-if
v-show:控制元素样式是否显示display

		<div id="app">
			<div v-if='score>=90'>优秀</div>
			<div v-else-if='score<90&&score>=80'>良好</div>
			<div v-else-if='score<80&&score>60'>一般</div>
			<div v-else>比较差</div>
			<div v-show='flag'>测试v-show</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					score=90,
					flag=true
				},
				methods:{
					
				}
			})
		</script>

v-if与v-show的区别：
v-if控制元素是否渲染到页面当中，v-show已经渲染完成，但是用display控制是否显示

分支循环结构：

v-for遍历数组，如果数组里面的元素是对象的形式，使用元素.属性可以获取到值
//item为自定义的名称，index为数组的索引
<li v-for='item in list'>{{}}</li>
<li v-for='(item,index) in list'>{{item}}+'-----'+{{index}}</li>

key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}}+'-----'+{{index}}</li>

v-for遍历对象
//value是值，key是键，index是索引，可以自定义名称
<div v-for='(value,key,index) in object'></div>
v-if和v-for结合使用
<div v-if='value==12' v-for='(value,key,index) in object'></div>

		<div id="app">
			<div>水果列表</div>
			<ul>
				<li v-for='item in fruits'>{{item}}</li>
			</li>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					fruits:['apple','orange','banana'],
				},
				methods:{
					
				}
			})
		</script>

Vue遍历对象数组
<div id='app'>
		<li v-for='item in myFruits'>
			<span>{{item.ename}}</span>
			<span>{{item.cname}}</span>
		</li>
	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				myFruits:[{
					ename:'apple',
					cname:'苹果'
				},
				{
					ename:'banana',
					cname:'香蕉'
				}]
			}
		})
	</script>

表单操作：
表单一般都使用v-model双向绑定数据，这样就可以直接拿到表单当中输入的数据，传输给服务器端。如果表单是单选框或者是复选框的话，v-model中对应的值会默认选中对应的表单属性中value的值（v-model的值和value相互对应），复选框可以用数组表示，toString方法可以只输出字符

输入框：

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

复选框：

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

单选框：

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

select列表：

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

表单域修饰符：
v-model.number:转化为数值
v-model.trim:去掉开始和结尾空格
v-model.lazy:将input事件切换为change事件，input是输入内容就触发，change是失去焦点才触发

自定义指令：el指的是指定绑定的元素，可以用来直接操作DOM
inserted是固定的

bind和inserted的区别：
bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用

	<div id='app'>
			<input type="text" v-focus />
	</div>
	<script src="vue.js"></script>
	<script type="text/javascript">
		Vue.directive('focus',{
			inserted:function(el){
				//刷新页面时自动获取焦点
				el.focus();
			}
		});
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		})
	</script>

带参数的自定义指令：
binding代表传入的参数，这个参数可以写在data对象中，也可以直接跟在v-自定义名的后面

<div id='app'>
		<input type="text" v-color="{color:'red'}" />
	</div>
	
	<script type="text/javascript">
		Vue.directive('color',{
			inserted:function(el,binding){
				//更改输入框的背景颜色
				el.style.backgroundColor = binding.value.color;
			}
		});
		var vm = new Vue({
			el:'#app',
			data:{
				
			}
		})

计算属性：
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的，多次执行只会重复使用第一次的结果
方法不存在缓存，调用几次就执行几次

计算属性的用法：
computed:{

}

<div id='app'>
		<div>{{msg}}</div>
		<div>{{reverseString}}</div>
	</div>
	
	<script type="text/javascript">
		Vue.directive('color',{
			inserted:function(el,binding){
				el.style.backgroundColor = binding.value.color;
			}
		});
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'hello'
			},
			computed:{
				reverseString:function(){
					return this.msg.split('').reverse().join('');
				}
			}
		})

侦听器：数据一旦发生变化就通知监听器所绑定的方法
应用场景：数据变化时执行异步或开销较大的操作

<div id="app">
		<div>
			<span>名：</span>
			<span>
				<input type="text" v-model="firstName"/>
			</span>
		</div>
		<div>
			<span>姓：</span>
			<span>
				<input type="text" v-model="lastName"/>
			</span>
		</div>
		<div>{{fullName}}</div>
	</div>
	
	<script type="text/javascript">
	
		
		var vm = new Vue({
			el:'#app',
			data:{
				firstName:'Jim',
				lastName:'Green',
				fullName:'Jim Green'
			},
			watch:{
				//侦听器当中方法的名字就是要侦探的数据，val表示当前数据
				firstName:function(val){
					//val表示变化之后的值
					this.fullName = val +''+ this.lastName;
				},
				lastName:function(val){
					this.fullName = this.firstName +''+ val;
				}
			}
		})
	</script>

例：
侦听器判断用户名是否存在

<div id="app">
		<div>
			<span>用户名：</span>
			<span>
				<input type="text" v-model="uname">
			</span>
			<span>{{tip}}</span>
		</div>
	</div>
	
	<script type="text/javascript">
	
		
		var vm = new Vue({
			el:'#app',
			data:{
				uname:'',
				tip:''
			},
			methods:{
				checkName:function(uname){
					var that = this;
					setTimeout(function(){
						//模拟接口调用
						if(uname == 'admin'){
							that.tip = '用户名已经存在，请更换一个';
						}else{
							that.tip = '用户名可以使用';
						}
					},2000);
				}
			},
			watch:{
				uname:function(val){
					//检验用户名
					this.checkName(val);
					//修改提示信息
					this.tip='正在验证';
				}
			}
		})

过滤器：
作用：格式化数据

		//自定义过滤器
		Vue.filter('过滤器名称',function(value){
			//过滤器业务逻辑
		})

过滤器的使用方法：
upper和lower是过滤器名称，msg作为upper过滤器的输入值，过滤器可以多次使用

<div>{{msg | upper}}</div>
<div>{{msg | upper |lower}}</div>
<div v-bind:id="id | formatId"></div>

例：格式化字符串的首字母大写

<div id="app">
		<input type="text" v-model="msg"/>
		<div>{{msg | upper}}</div>
	</div>
	<script type="text/javascript">
		//自定义过滤器
		Vue.filter('upper',function(val){
			return val.charAt(0).toUpperCase()+val.slice(1);
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				msg:''
			},
			
		})
	</script>

		//带参数的过滤器
		Vue.filter('format',function(value,arg1){
			//value是要处理的数据，arg1是参数
		})

数据响应式：
在动态更新了数组当中的元素之后，页面也发生变化
给对象添加属性直接对象.新键=‘新值’就可以添加完成

<div id="app">
		<ul>
			<li v-for='item in list'>{{item}}</li>
		</ul>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				list:['apple','orange','banana']
			},
		})
		
		//vm.list[1]='lemon';页面不发生改变
		vm.$set(vm.list,2,'lemon');//页面发生改变
	</script>

在全是对象的数组中，最好给每一个对象添加一个id属性，这样就可以根据id对具体的对象进行操作
表单如果把disabled属性设置为true，则表示表单不能输入数据

组件化开发：组件可以扩展 HTML 元素，封装可重用的代码。
注册一个全局组件语法格式如下：
组件要放在new Vue对象的标签下才能正常使用

Vue.component(组件名称,{
			data:组件数据,
			template:组件模板内容
		});

Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

定义一个简单的全局组件：

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

组件的data是一个函数（可以没有data选项），组件模板内容必须是单个跟元素，new Vue的data是一个对象

	Vue.component(组件名称,{
				data:组件数据,
				template:组件模板内容
			});
		Vue.component('button-counter',{
			data:function(){
				return {
					count:0
				}
			},
			template:'<button v-on:click="count++">点击了{{count}}次</button>'
		})

组件用法

<div id="app">
		<button-counter></button-counter>
</div>

组件的名称可以作为body中的标签来使用，组件还可以调用方法

注：
组件模板内容必须是单个根元素
例：
template:‘点击了{{count}}次测试’
这样就会报错，但是如果在两个button标签外加div就能正常运行

组件化开发就是把一个功能封装成一个标签来使用，在template当中可以使用反引号来拼接字符串，可以使得代码的可观性增加

组件注册注意事项：
如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件
如果组件的内容太过复杂，可以用模板字符串``来拼接字符串
组件当中不能写封装后的css代码

例：

<div id="app">
		<hello-world></hello-world>
		<HelloWorld></HelloWorld>
	</div>
	<script type="text/javascript">
		Vue.component('HelloWorld',{
					data:function(){
						return {
							msg:'Helloworld'
						}
					},
					template:'<div>{{msg}}</div>',
					})
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
		})
		
	</script>

第二个会发生报错
效果如下：

组件间的数据交互：
组件通过props接收数据，props是一个数组，从标签中添加固定的字符串直接用propos当中的变量来接收，如果接收Vue当中data对象中的数据，则需要使用v-bind：变量名=‘变量名’，v-bind的缩写为：
例：

<div id="app">
		<div>{{pmsg}}</div>
		<menu-item title="外部传递值"></menu-item>
		<menu-item :title="ptitle"></menu-item>
	</div>
	<script type="text/javascript">
		Vue.component('menu-item',{
					props:['title'],
					data:function(){
						return {
							msg:'子组件本身的数据'
						}
					},
					template:'<div>{{msg+"---"+title}}</div>',
				})
		var vm = new Vue({
			el:'#app',
			data:{
				pmsg:'父组件中内容',
				ptitle:'从data对象中往子组件中动态绑定属性'
			},
		})
	</script>

props属性名规则：在JavaScript当中使用的驼峰命名法规则放在HTML标签中就必须使用短横线的命名规则

<div id="app">
		<div>{{msg}}</div>
		<menu-item menu-title="666"></menu-item>
	</div>
	
	<script type="text/javascript">
		/*
		props属性名规则
		在props中使用驼峰形式，模板中需要使用短横线的形式
		字符串形式的模板中没有这个限制
		*/
		Vue.component('menu-item',{
			//在JavaScript中驼峰式的
			props:['menuTitle'],
			template:'<div>{{menuTitle}}</div>'
		})
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'父组件中内容',
				ptitle:'动态绑定属性'
			}
		})
	</script>

同步：代码按上下行顺序执行
异步：代码按时间顺序执行，例：定时任务，ajax，事件函数

多次使用异步函数可能会因为每个函数的执行时间不同而导致代码执行顺序的错乱，如果需要明确的要求执行顺序必须使用方法当中嵌套方法，会导致代码难以维护，解决办法：promise

例：

$.ajax({
			url:'url1',
			success:function(data){
				console.log(data);
				$.ajax({
					url:'url2',
					success:function(data){
						console.log(data);
						$.ajax({
							url:'url3',
							success:function(data){
								console.log(data);
								
							}
						})
					}
				})
			}
		})

promise基本用法
实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

		var p =new Promise(function(resolve,reject){
			//成功时调用resolve，失败时调用reject
		})
		p.then(function(ret){
			//从resolve得到正常结果
		},function(ret){
			//从reject得到错误信息
		})

实例：

<script type="text/javascript">
		var p =new Promise(function(resolve,reject){
			//成功时调用resolve，失败时调用reject
			setTimeout(function(){
				var flag = true;
				if(flag){
					//正常情况
					resolve('hello');
				}else{
					reject('出错了');
				}
			},100);
		});
		p.then(function(data){
			console.log(data);
		},function(data){
			console.log(data);
		})
		
	</script>

使用promise解决回调地域的问题：
使用链式.then多次执行代码，因为promise对象中前一次的return返回值，会作为下一次调用then的调用者

p.then(function(data){
	console.log(data);
	return function1('666');
})
.then(function(data){
	console.log(data);
})

promise常用的api
1.p.then()得到异步任务的正确结果
2.p.catch()获取异常信息
3.p.finally()成功与否都会执行

function foo(){
			return new Promise(function(resolve,reject){
				setTimeout(function(){
					//resolve(123)
					reject('error');
				},100);
			});
		}
		foo()
		  .then(function(data){
			  console.log(data);
		  })
		  .catch(function(data){
			  console.log(data);
		  })
		  .finally(function(){
			  console.log('finished');
		  })

效果如下：

promise的对象方法：
Promise.all():并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.race():并发处理多个异步任务，只要有一个任务完成就能得到结果

		Promise.all([p1,p2,p3]).then((result)=>{
			console.log(result);
		})
		Promise.race([p1,p2,p3]).then((result)=>{
			console.log(result);
		})

接口调用fetch方法：
语法结构：

fetch(url).then(fn2)
				  .then(fn3)
				  .catch(fn)

例：

		fetch('http:localhost:3000/abc').then(data => {
			//text()方法属于fetch AIP的一部分，它返回一个promise实例对象，用于获取后台返回的数据
			return data.text();
		}).then(ret => {
			//这里得到的才是最终的数据
			console.log(ret);
		})

fetch请求参数:
1.常用配置选项
method(String):http请求方法,默认为get(get,post,put,delete)
body(String):http的请求参数,
headers(Object):http的请求头,默认为{}

get请求方式的参数传递

		fetch('http:localhost:3000/abc?id=123',{
			method:'get'
		}).then(data => {
					return data.text();
				}).then(ret => {
					console.log(ret);
				})

delete请求方式的参数传递：

fetch('http:localhost:3000/abc/789',{
			method:'delete'
		}).then(data => {
					return data.text();
				}).then(ret => {
					console.log(ret);
				})
		后端代码：
		app.delete('/books/:id',(req,res)=>{
			res.send('delete请求方式传递参数'+req.params.id);
		})

post请求方式的参数传递：
1.发送字符串格式的参数

		fetch('http:localhost:3000/books',{
			method:'post',
			body:'uname=lisi&pwd=123',
			headers:{
				'Content-Type':'application/x-www-form-urlencoded',
			}
		}).then(data => {
			return data.text();
		}).then(ret => {
			console.log(ret);
		})

2.发送json形式的参数

		fetch('http:localhost:3000/books',{
			method:'post',
			body:JSON.stringify({
				uname;'lisi',
				age:12
			}),
			headers:{
				'Content-Type':'application/json',
			}
		}).then(data => {
			return data.text();
		}).then(ret => {
			console.log(ret);
		})

put请求的参数传递：
put请求一般用于更改数据，在请求地址后面跟上id

fetch('http:localhost:3000/books/123',{
			method:'put',
			body:JSON.stringify({
				uname;'lisi',
				age:12
			}),
			headers:{
				'Content-Type':'application/json',
			}
		}).then(data => {
			return data.text();
		}).then(ret => {
			console.log(ret);
		})

后端代码：
		app.put('/books/:id',(req,res)=>{
			res.send('put请求传递参数'+req.params.id+req.body.uname+req.body.pwd);
		})		

fetch响应结果：
响应数据格式：
text():将返回值类型处理成字符串类型
json()：返回结果和JSON.parse(responseText一样)

fetch('http:localhost:3000/json'})
	.then(data => {
		return data.json();
	}).then(ret => {
		console.log(ret.uname);
	})
	app.get('/json',(req,res)=>{
		res.json({
			uname:'lisi',
			age:13,
			gender:'male'
		});
	})

在vue项目中使用axios
1.安装依赖
2.在项目的入口文件当中导入axios

import axios from 'axios'

3.挂载到vue上，使它全局都可以使用

Vue.prototype.$http = axios;

接口调用axios用法：
axios特征：
支持浏览器和node.js，支持promise，能拦截请求和响应，自动转换json数据

axios.get('http:localhost:3000/data').then(function(ret){
			//想要拿到后台返回的数据必须使用形式参数.data拿到
			console.log(ret.data);
		})

axios的常用API:
get:查询数据,
post:添加数据,
put:修改数据
delete:删除数据

1.get传递参数

通过url传递参数:
		//使用req.query获取数据
		axios.get('/adata?id=123')
			.then(ret => {
				console.log(ret.data);
			})
		//使用req.params获取数据
		axios.get('/adata/123')
			.then(ret => {
				console.log(ret.data);
			})

通过params传递参数：
注意：后台用req.query获取数据

axios.get('/adata',{
			params:{
				id:123
			}
		})
		.then(ret => {
			console.log(ret.data);
		})

如何判断使用req.query接收参数还是使用req.params接收参数：
如果请求地址后面带的参数以属性=值的方式传递，则使用req.query，请求地址后面带的参数以只有值的方式传递，则后台使用req.params，并且后台的请求地址后得加/:属性名。

axios的delete请求方式的参数传递与get请求方式相同

axios post请求方式：默认传递的是json格式的数据

axios.post('http://localhost:3000/axios',{
			//这里直接传值即可，不需要params
			uname:'lisi',
			pwd:123
		})
		.then(ret => {
			console.log(ret.data);
		})

axios post请求传递字符串格式的数据：

通过URLSearchParams传递参数(application/x-www-form-urlencoded)
		const params = new URLSearchParams();
		params.append('param1','value1');
		params.append('param2','value2');
		axios.post('http://localhost:3000/axios',params)
		.then(ret => {
			console.log(ret.data);
		})

put请求与post请求方式类似

对于axios请求，后台如果想要直接返回json格式的数据类型，可以直接使用res.json({ name:‘zhangsan’ })的形式;

axios的全局配置：
axios.defaults.timeout=3000; //超时时间
axios.defaults.baseURL=‘http://localhost:3000/’;//默认地址
axios.defaults.headers[‘mytoken’]=‘—’;//设置请求头信息

	//配置请求的基准URL地址
	//在发送请求时，请求地址会自动拼接上配置好的基准URL地址
	axios.defaults.baseURL='http://localhost:3000/';
	axios.get('axios-json').then(function(ret){
		console.log(ret.data.uname);
	})

axios拦截器：
1.请求拦截器：在发送请求之前设置一些信息

axios.interceptors.request.use(function(config){
	console.log(config.url);
	config.headers.mytoken='nihao';
},function(err){
	console.log(err);
})

2.响应拦截器：

axios.interceptors.response.use(function(config){
	console.log(config.url);
	config.headers.mytoken='nihao';
},function(err){
	console.log(err);
})

接口调用async/await用法
async关键字用于函数上(async的返回值是promise实例对象)
await关键字用于async函数当中(await可以得到异步的结果)

//async的返回值是promise实例对象，可以使用then来得到数据
async function queryData(id){
	//await可以得到异步的结果，就是res.send当中的数据
	const ret = await axios.get('/data');
	//ret就是以res.send为数据的promise实例对象
	return ret;
}
//promise实例对象可以使用then方法得到具体数据，then方法的目的是可以让异步代码按顺序执行，也可以使用对象.data的形式拿到数据
queryData.then(ret => {
	console.log(ret);
})