VUE

针对javascript节点操作，进行封装，可以使用定义变量的方式来渲染页面数据：通过数据的绑定，来避免过多的节点操作。

vue的引入

<script src="/test1/js/vue.js"></script>，就可以使用vue的语法

<script src="/test1/js/1.js"></script>：
	在网页最下面引入自己的js：让body内的标签加载网页后，在自己的js文件中才能获得标签对象

创建对象

通过创建对象的语法给页面节点绑定数据：
var v1 = new Vue({
	el:"#app",  //创建网页上哪个节点对象：var obj = document.getElementById("app");
	data:{ 	//针对该对象，定义变量：渲染页面
		a:1,
		b:"abc",
		c:true,
		obj:{uname:"aaa",upwd:"bbb"}
	},      
	methods:{	//针对该对象，定义方法
		aaa(){
			
		},
		bbb(){
			
		}
	}
});

文本插入数据

在网页中双标签中间的内容可以插入变量：
<div id="app">
		<div id="app2">{{a}}</div>
		<font>{{obj.uname}}</font>
		<td v-text="it.gprice"></td>
</div>

事件

使用：v-on来给标签绑定事件，简写@
	<button v-on:click="aaa()">按钮1</button>
	<button @click="bbb()">按钮2</button>

@click,@change,@mouseover,@mouseout,@blur,@focus

属性绑定

针对标签的属性，可以绑定使用变量

单向绑定

v-bind:可以给标签的属性绑定一个变量，当变量发生变化，页面渲染也会发生变化；当页面发生变化，变量不会发生变化。简写就是    :
	<input type="text" v-bind:value="变量名">	针对value属性，绑定变量
	<input type="text" v-bind:value="obj.uname">
	<input type="text" :value="obj.uname">
	<input type="checkbox" :checked="c">

双向绑定

v-model:以给标签的属性绑定一个变量，当变量发生变化，页面渲染也会发生变化；当页面发生变化，变量也会发生变化。只能针对value属性。
	<input type="text" v-model="a"><br>
	<input type="text" v-model="obj.uacc">

判断指令

通过变量c与d的值为true，false，可以控制该节点是否显示

v-if
	<div v-if="c">{{a}}</div>
v-show
	<div v-show="d">{{obj.uacc}}</div>
	
区别：	
	v-if可以通过变量的值来决定在页面上是否创建该节点，不创建，则页面没有该节点
	v-show可以通过变量的值来决定是否添加css样式来显示该节点：<div style="display:none"></div>
		display:none:页面上隐藏该节点，不显示

循环指令

v-for
<tr v-for="(it,index) in objs">
				<td><input type="checkbox" name="gid" v-bind:value="it.gid" /></td>
				<td>{{it.gname}}+++{{index}}</td>
				<td>{{it.gprice}}+++{{index}}</td>
				<td>{{it.gnum}}+++{{index}}</td>
</tr>

vue生命周期(钩子函数)

钩子函数：vue定义了8个系统函数：定义页面节点对象从创建初始化，挂载数据，数据变化，到销毁的整个过程。
咱们通常只用created和beforeMount方法，因为

var v1 = new Vue({
			el:"#app",
			data:{
				msg1:"aaa",
				msg2:"bbb"
			},
			methods:{
				c1(){
					this.msg1 = "yyy";
				},
				c2(){
					this.$destroy();  //销毁当前对象
				}
			},
			beforeCreate(){
				console.log("在#app节点创建之前执行,当前对象创建成功，属性和方法初始化未完成，不能使用");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			},
			created(){
				console.log("在#app节点创建完毕，属性和方法初始化完成，但是还没有挂载到页面上，通常去服务器获取数据");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				this.msg1 = "ccc",
				console.log("====================================================");
			},
			beforeMount(){
				console.log("在数据挂载之前执行，在created方法之后执行，");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			},
			mounted(){
				console.log("数据挂载完成之后执行该方法。。。。。。");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			},
			beforeUpdate(){
				console.log("修改属性之前，且数据未重载挂载页面之前执行。。。");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			},
			updated(){
				console.log("修改属性之后且数据已经重载挂载页面之后执行");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			},
			beforeDestroy(){
				console.log("对象销毁之前执行........需要调用$destroy系统函数");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			},
			destroyed(){
				console.log("对象销毁之后执行，当前对象v1的属性和方法不可重新挂载到页面");
				var obj = document.getElementById("app");
				console.log(obj.innerHTML);
				console.log(this.msg1+"======="+this.msg2);
				this.msg1 = "哈哈";
				console.log(this.msg1+"======="+this.msg2);
				console.log("====================================================");
			}
		});

同步请求

<form action="xxx.do"><submit></submit></form>
<a href="xxx.do"></a>
location.href="xxx.do"
window.open("xxx.do");
转发、重定向

全部都是同步请求服务器方式：特点：服务器与客户端同步，当代码请求到服务器后，客户端页面全是白板

异步请求

客户端浏览器会开启子线程去访求服务器，当前线程等待不动(页面不动)：通常称之为页面局部刷新技术
axios({}):  该方法就是发起异步请求，子线程去请求服务器，当前页面不动：但是该方法需要引入一个js文件，就是该方法的源码。
	<script src="/test1/js/vue.js"></script>
	<script src="/test1/js/axios.js"></script>

axios({
	baseURL:"http://192.168.43.210:8080/demo",				请求地址
	url:"/test2.do",										请求方法
	method:"get/post",										请求方式
	headers: { 'X-Requested-With': 'XMLHttpRequest' },		//默认请求头，可以不写，上传修改
	params:{uid:1,uacc:"aaa",upwd:"bbb"},			//请求参数,以字符串格式拼接在url后传参
	timeout: 3000,									//限制请求时间
	withCredentials: true,				//默认false，请求时是否携带cookie数据，暂时不写
	responseType: 'json'				//请求服务器后，服务器返回数据的类型(text:字符串)
}).then(response=>{						//成功回调函数，response回调函数的参数：
	console.log(response.data);			//获得返回的数据
}).catch(err=>{							//异步请求发生异常执行的函数
	console.log(111111);
	console.log(err);					//err：异常信息
});


服务器返回字符串：
	public void test1(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException {
		String a = request.getParameter("uacc");
		String b = request.getParameter("upwd");
		System.out.println("11111111111"+a+b);
		response.getWriter().write("呵呵");
	}
	
	
服务器返回json数据：需要引入第三方jar包，将集合或者对象转换成json格式
	public void test2(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException {
		response.setContentType("json");
		
		String a = request.getParameter("uacc");
		String b = request.getParameter("upwd");
		System.out.println("通常该方法是查询数据时，需要将查询到的数据返回给页面：json对象或者json数组"+a+b);
		
		List<Userinfo> list = new ArrayList<Userinfo>();
		Userinfo u1 = new Userinfo();
		u1.setUid(1);
		u1.setUacc("aaa");
		u1.setUpwd("bbb");
		Userinfo u2 = new Userinfo();
		u2.setUid(2);
		u2.setUacc("aaa2");
		u2.setUpwd("bbb2");
		Userinfo u3 = new Userinfo();
		u3.setUid(3);
		u3.setUacc("aaa3");
		u3.setUpwd("bbb3");
		list.add(u1);
		list.add(u2);
		list.add(u3); //此时模拟当前list就是查询出来的集合。
		
		//将集合转成json对象数组
//		JSONArray array = JSONArray.fromObject(list);
//		response.getWriter().write(array.toString());
		
		//将实体类对象转成json对象
		JSONObject object = JSONObject.fromObject(u1);
		response.getWriter().write(object.toString());
	}	

异步上传

1：servlet上传代码与之前一致，需要jar包
2：上传域事件上，传递实参：就是当前上传域对象：document.getElementById("上传域");
	$event：vue的事件源对象：更改事件
	target：目标对象：当前上传域对象
	<input type="file" multiple="multiple" @change="upload($event.target)">
	
	
	upload(obj){
			//console.log(obj);  :上传域对象
			//console.log(obj.files); //:obj.files:就是上传的文件对象数组
			//console.log(obj.files[0].name);获得上传文件名
			if(obj.files.length == 1){
				if(obj.files[0].name.endsWith(".jpg") || obj.files[0].name.endsWith(".png")){
					
					var fd = new FormData();
					for(var i=0;i<obj.files.length;i++){
						fd.append("f"+i,obj.files[i]);//将文件存储在该对象中，会将文件序列化,每个文件都对应一个名字(键)
					}
					axios({
						baseURL:"http://localhost:8080/test1",
						url:"/upload.do",
						method:"post",
						headers: {'contentType': 'multipart/form-data'},
						params:{},			//请求参数,以字符串格式拼接在url后传参,现在上传文件，文件不能拼接在url后面
						data:fd,			//会将参数以对象的方式传递给服务器servlet，需要将文件对象封装在FormData对象中，会将文件序列化
						responseType: 'text'
					}).then(response=>{	
						console.log(response.data);	
					});
				}else{
					alert("只能上传jpg和png格式");
				}
				
				
			}else{
				alert("上传只能选择一个文件");
			}

		}

过滤器

主要就是针对数据的格式化

定义全局过滤器：
	Vue.filter("过滤器名字",方法体);
	
	
	//定义全局过滤器
    Vue.filter("ff",function(obj){
        console.log(obj);
    });
	页面加载数据之前调用该过滤器
	//调用当前全局过滤器ff2
	this.$options.filters["ff2"](this.obj.ubir);   注意：双向绑定不能使用|的语法调用过滤器
	<input type="text" v-model="obj.ubir | ff2">		没有这样的语法
	
	//调用当前全局过滤器ff2
	{{r.rdate | ff2 }}