Vue进阶之路二

1.绑定事件

<!DOCTYPE html>
<html>
	<head>
		<!-- 绑定事件 -->
		<meta charset="utf-8">
		<title></title>
		<!-- 第一步,引入vue.js -->
		<script src="../vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<button type="button"  v-on:click="test1()">按一按直接起飞</button>
		<hr />
		<button type="button" @click="test2()" >芜湖起飞</button>
		</div>
		<script type="text/javascript">
			//3.创建vue对象
			new Vue({
				"el":"#app",
				"methods":{
					//4.方式一绑定:
					test1:function(){
						console.log(1111);
						alert("起飞");
					},
					//5.方式二绑定
					test2(){
						console.log(2222);
					},
				},
			});
		</script>
	</body>
</html>

2.循环for指令: v-for

语法: v-for = "每个元素 in 数组名称"

java中的高效for循环的语法: for(类型 每个元素: 数组(集合)){ }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
				<title></title>
				<!-- 第一步,引入vue.js -->
				<script src="../vue/vue.js"></script>
			</head>
			<body>
				<!-- 2.指定作用范围 -->
				<div id="app">
				<ul>
					<li v-for="ele in names">{{ele}}</li>
				</ul>
				</div>
				<!-- 创建vue对象 -->
				<script type="text/javascript">
					new Vue({
						"el":"#app",
						"data":{
							"names":["小猫","等等","好好学","共同进步"],
						},
					})
				</script>
			</body>
		</html>

3.双向绑定指令:v-model(难点,需要重点理解下)

vue中data的数据 ----> html网页中输入框的值

vue中data的数据 <---- html网页中输入框的值

注意:通常作用于form表单

案例:简单模仿电商网站,动态实现商品购买的加减

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模仿订单加减</title>
		<script src="../vue/vue.js"></script>
	</head>
	<body>
		<div id="a">
			<!-- 方式1: -->
			<!-- <button v-on:click="count++">+</button>
			<input type="text" name="count"  v-model="count" />
			<button v-on:click="count--">-</button> -->
			
			<!-- 方式2: -->
			<button @click="multiProduct()">+</button>
			<input type="number" name="count"  v-model="count"  />
			<button @click="subProduct()">-</button>
		</div>
		<!-- 案例:
		模仿电商网站,动态实现购买商品个数的加减
		分析思路:
		 1.使用双向绑定指令:v-model 
		 2.给+号按钮添加点击事件:+1
		 3.给-号按钮添加单击事件:-1-->
		<script type="text/javascript">
			new Vue({
				"el":"#a",
				"data":{
					"count":1,
				},
				"methods":{
					//this表示vue对象
					//获取data选项中的数据
					//方式一:this.$data.count(可理解为链式加载点)
					//方式二:this.count
					//1.增加购买数量
					multiProduct(){
					this.count = parseInt(this.count)+1;	
						
						if(this.count>10){
							this.count=10
						}
				},
					//2.减少购买数量
					subProduct(){
						this.count--;
						if(this.count<1){
							this.count=1
						}
						
					}
				}
			});
		</script>
	</body>
</html>

4.Vue的生命周期方法(了解流程即可)

1.自动执行的方法

beforeCreate( ), created( ), beforeMounte( ), mounted( )

  1. 当data中的数据发生改变时,执行的数据

    beforeUpdate( ), updated( );

  2. 当vue对象销毁时,执行的方法

beforeDestory( ) destoryed( )

特点:

1.生命周期函数会自动执行

2.应用场景:想要自动执行我们的方法,我们就把定义的方法放到生命周期函数

 

 

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script type="text/javascript">
			//访问网页时:访问到网页,就需要看到网页中的数据
			//自定义的查询数据方法,需要自动执行
			//实际运用:访问电商网站时,首页分类数据需要立即展示
			//自定义查询分类数据的方法让自动执行
			new Vue({
				"el":"#app",
				"methods":{
					//1.查询分类数据的方法
					finCategory(){
						alert("查询分类方法");
					}
				},
				mounted:function(){
					//利用生命周期函数自动执行的特点:调用分类方法
					//实现效果,自动弹出
					this.finCategory();
				},
			});
		</script>
	</body>
</html>

5.异步

1.同步的特点:

指的我们在向后台提交数据时,提交整个网页. client客户端(浏览器)----->server后台(java程序) 前台提交数据到后台? client----提交数据–>server 后台响应数据到前台? client<----响应数据–server 同步缺点: 当后台响应慢,用户看到的"留白" 同步优点: 向后台提交的 次数少(因为需要等后台响应完以后), 后台的访问压力比较轻

2.异步特点:

指的我们在后台提交数据时,提交网页的一部分. client客户端(浏览器)----->server后台(java程序) 异步优点: 当后台响应慢,用户依然可以看到网页,不会有"留白" 异步缺点: 向后台提交数据的次数(异步提交的是网页一部分,不需要等后台响应) 后台访问压力大.

实际生活运用:例如在请求登录界面时的验证码

3.原始的异步请求:

分为四步,非常麻烦,在实际开发中不使用

4.使用异步框架的优点:

*原始使用异步请求代码实现分为四步开发麻烦

*原始的异步请求代码封装成异步请求框架:axios.js

简单入门案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios.js入門</title>
		<!-- 1.引入vue.js和axios.js -->
		<script src="../vue/axios-0.18.0.js" ></script>
			<script src="../vue/vue.js" ></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 定义一个buttno标签,点击事件发送异步请求 -->
			<button @click="test1()">点击发送异步请求</button>
			<button @click="test2()">点击发送post异步请求</button>
		</div>
		<!-- 創vue對象,在methods定義異步請求方法
			步驟一:在HTML引入axios.js-->
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				"methods":{
					//1.定義異步請求方法
					test1(){
						//2.发送异步请求:get
						//get方法:指定后台发送的请求地址:,参数是一个字符串
						//then方法:接收后台响应的数据,参数是一个函数
						//catch方法:处理前台和后台代码的异常,参数是一个函数
						//细节:axios名称,get名称,then名称,catch名称都是固定的
						//定义一个json文件:模拟后台地址
						//get方法的参数:json文件的地址
						var url = "server.json";
						axios.get(url).then(
						function(resp){
							//用来接收后台响应的数据
							var user = resp.data;
							//测试数据
							console.log(user.id+":"+user.name);
						}
						).catch();
					},
					
					//定义异步请求方法test2
					
					test2(){
						//当代码出现问题时,执行catch方法
						axios.post("server.json").then(function(resp){
							//响应对象接收后台的数据:data属性是固定的
							var u = resp.data;
							//测试数据
							console.log(u.id);
						}).catch(
						function(){
							window.alert("代码出问题了!!!!");
							});					
						},
					
				},
			});
		</script>
	</body>
</html>

axios.js怎么使用?

axios.js异步请求框架(掌握,代码必须会敲) 步骤一: 在html引入axios.js,也需要引入vue.js 步骤二: 在html网页里面指定vue的作用范围 步骤三: 在script标签里面创建vue对象 步骤四: 在methods选项里面,定义异步请求方法 注意: axios异步请求框架中,使用response(resp)来接收后台响应的数据 前台(response来接收后台响应的数据)<---------后台

 

get的异步请求:

axios.get(url).then(function(resp){ }).catch(function( ) )

post的异步请求:

axios.get(url).then(function(resp){ }).catch(function( ) )

区别:

1.get的请求的请求数据都在地址栏,请求的数据大小是有限的

比如:IE8浏览器,get请求提交数据,最大提交200KB

实际开发中:提交的数据比较少,使用get

2.post的请求的请求数据不在地址栏,请求的数据大小是无限的

实际开发中:提交的数据比较大,使用post,比如:提供一个视频到后台

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值