Vue----知识点练习

最新推荐文章于 2022-09-29 20:38:41 发布

哦?

最新推荐文章于 2022-09-29 20:38:41 发布

阅读量397

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_44241861/article/details/109270221

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、style属性的绑定
二、class属性的绑定
V-if 多重条件的渲染
v-for
学生信息添加删除修改的例子
搜索排序的例子
Vue发送Ajax请求
Vue的生命周期函数（面试）
过滤器

一、style属性的绑定

将style内的属性使用JSON字符串的格式书写
只要点击就让页面数字的颜色发生变化

f相当于一个开关，点击后令开关打开或者关闭，来改变a、b的值
Vue的思想：数据改变视图就改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- 绑定style属性 值就要写成json对象 让css样式的值为一个变量 -->
			<!-- f相当于一个开关，点击后令开关打开或者关闭，来改变a、b的值 -->
			<h1 :style="{'color':a,'background':b}" @click="change(f=!f)">2222222222</h1>			
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:'#box',
		data:{
			a:'blue',
			b:'pink',
			f:true
		},
		methods:{
			change(flag){
				if(flag){
					this.a='blue',
					this.b='pink'
				}else{
					this.a='black',
					this.b='yellow'
				}
			}
		}
	})
</script>

二、class属性的绑定

有2个class，只要点击，一个class属性显示，另一个不显示

给2个class设置变量f，true和false，只要点击，就将这个2个布尔值取反

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.aClass {
				color: red;
				font-size: 50px;
				background: blue;
			}

			.bClass {
				color: yellow;
				font-size: 50px;
				background: black;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<h1 :class="{'aClass':f1,'bClass':f2}" @click="change()">666666</h1>
		</div>
	</body>
</html>
<script type="text/javascript">
	//数据一改变，视图就会改变，忘记操作DOM
	new Vue({
		el: '#box',
		data: {
			f1: true,
			f2: false
		},
		methods: {
			change() {
				this.f1=!this.f1;
				this.f2=!this.f2;
			}
		}
	})
</script>

V-if 多重条件的渲染

V-show：改变css中display的样式，真正的条件渲染，频繁的切换使用
V-if：通过增加和删除元素来展示，初始条件为假不渲染元素只是删除，只有条件为真，才会修改渲染，因此运行时条件很少的进行切换使用
满足条件就展示此标签，不满足就不展示

用户输入成绩显示对应的等级
通过v-if判断是否满足条件，满足条件就显示所在的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<input type="text"  placeholder="请输入成绩 0---100" v-model="score"/>
			<h1 v-if="score>=0&&score<60">不及格</h1>
			<h1 v-else-if="score>=60&&score<70">差</h1>
			<h1 v-else-if="score>=70&&score<85">中等</h1>
			<h1 v-else-if="score>=85&&score<95">良好</h1>
			<h1 v-else-if="score>=95&&score<=99">优秀</h1>
			<h1 v-else-if="score==100">满分</h1>
			<h1 v-else>成绩不合法</h1>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:'#box',
		data:{
			score:0
		}
	})
</script>

通过v-if完成登录方式的切换
loginType一改，v-if和v-else条件发生变化就会来回切换，label标签就发生变化，但是input标签内输入的内容不发生变化，因为只修改了placeholder的内容而没有清除掉用户输入的内容，如果需要input标签内所有内容也随着改变需要加入key值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<template v-if="loginType === 'username'">
			  <label>Username用户名登录方式</label>
			  <input placeholder="Enter your username" key="one">
			</template>
			
			<template v-else>
			  <label>Email邮箱登录方式</label>
			  <input placeholder="Enter your email address" key="two">
			</template>
			<br>
			<button type="button" @click="change(flag=!flag)">切换登录方式</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:'#box',
		data:{
			msg:'Hello',
			flag:true,
			loginType:'username'
		},
		methods:{
			change(f){
				if(f){
	//loginType一改，v-if和v-else条件发生变化就会来回切换，label标签就发生变化，但是input标签内输入的内容不发生变化，因为只修改了placeholder的内容而没有清除掉用户输入的内容，如果需要input标签内所有内容也随着改变需要加入key的值。
					this.loginType='username'
				}else{
					//loginType不是username就会执行v-else所在的标签
					this.loginType='aa'
				}
			}
		}
	})
</script>

v-for

数组更新检测，变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

			 push()
			 pop()
			 shift()
			 unshift()
			 splice()
			 sort()
			 reverse()

如果没有使用以上方法进行数组的更新，数组内部也会发生更新，但是试图无法检测到，也就不能展示到前台

数组的更新案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box" align="center">
			<ul>
				<li v-for="(ele,index) in jsonArr" :key="index">
					{{ele.id}}---{{ele.name}}---{{ele.age}}--{{ele.sex}}-- <a href="#" @click="del(index,ele.name)">删除</a>---<a href="#" @click="update(index,{
				'id': 10,
				'name': '呵呵',
				'age': 25,
				'sex': '女'
			})">修改</a>
				</li>
			</ul>
			

		</div>
	</body>
</html>
<script type="text/javascript">
	//数据改变，视图就会更新，忘记操作DOM
	new Vue({
		el: '#box',
		data: {
			'jsonArr': [{
				'id': 1,
				'name': '赵六',
				'age': 26,
				'sex': '男'
			}, {
				'id': 2,
				'name': '王五',
				'age': 23,
				'sex': '男'
			}, {
				'id': 3,
				'name': '李四',
				'age': 24,
				'sex': '男'
			}]

		},
		methods:{
			//删除
			del(index,name){
				if(window.confirm("你要删除"+name+"吗?")){
					//根据索引来删除 splice() 删除1个元素，并向数组添加新元素。
					this.jsonArr.splice(index,1);
				}				
			},
			//修改
			update(index,obj){
				//根据索引修改				
			    // this.jsonArr[index]=obj;此处数组已经修改完毕，但需要方法来触发试图检测到
				// this.jsonArr.reverse().reverse();
				//根据索引index来删除 splice() 删除1个元素，并向数组添加新元素obj。
				this.jsonArr.splice(index,1,obj);							
			}
		}
	})
</script>

学生信息添加删除修改的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<center>
				<h1>添加学生信息</h1>
				姓名：<input type="text" id="" value="" v-model="name" />
				年龄：<input type="text" id="" value="" v-model="age" />
				<button type="button" @click="add()">添加学生</button>
				<table border="1" cellspacing="0" cellpadding="" width="60%">
					<caption>
						<h2>学生信息表</h2>
					</caption>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="(ele,index) in jsonArr" :key="index">
						<td>{{index+1}}</td>
						<td >{{ele.name}}<input v-if="flag=false" v-model="text"></input>  <a href="#" @click="update1(index,text)"> 修改</a></td>
						<td>{{ele.age}}  <a href="#" @click="update2(index,age)">修改</a></td>
						<td>
							<a href="#" @click="del(index,ele.name)">删除</a>
						</td>						
					</tr>
					<tr align="center">
						<td colspan="4"><a href="#" @click="delAll()" v-if="jsonArr.length!=0">全部删除</a><a href="#" v-if="jsonArr.length==0">请添加学生信息</a></td>
					</tr>
				</table>
			</center>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#box',
		data: {
			name: '',
			age: '',
			jsonArr: [],
			dellall:"请添加学生信息",
			flag=true;
			text='';
		},
		methods:{
			add:function(){
				var name=this.name.trim();
				var age=this.age.trim();
				if(!name||!age){
					alert("姓名和姓名不能为空");
					return;
				}
				
				var json={"name":name,"age":age};
				this.jsonArr.push(json);
				this.name='';
				this.age='';
			},
			delAll(){
				
					this.jsonArr=[];
				
				
			},
			del(index,name){
				//根据索引来删除 splice() 删除1个元素，并向数组添加新元素。
				this.jsonArr.splice(index,1)
			},	
			//修改
			update1(index,text){
				this.flag=false;
					this.jsonArr.index.name=text;
						
									
			},
			//修改
			update2(index,age){
				//弹窗				
				this.jsonArr.index.age=age;				
			}
		}
		
	})
</script>

搜索排序的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box" align="center">
			<input type="text" v-model="content" />
			<ul>
				<li v-for="(ele,index) in newArry" :key="index">
					{{index+1}}--{{ele.name}}---{{ele.age}}--{{ele.sex}}
				</li>
			</ul>
			<button type="button" @click="sortAge(1)">年龄升序</button>
			<button type="button" @click="sortAge(2)">年龄降序</button>
			<button type="button" @click="sortAge(3)">默认顺序</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#box',
		data: {
			content: '',
			jsonArray: [{
				'name': 'zhangsan',
				'age': 230,
				'sex': '男'
			}, {
				'name': 'lisi',
				'age': 24,
				'sex': '男'
			}, {
				'name': 'wangwu',
				'age': 25,
				'sex': '男'
			}, {
				'name': 'zhaoliu',
				'age': 26,
				'sex': '男'
			}]
		},
		computed: {
			newArry: function() {
				//console.log("newArry 调用了")
				//this 代表的是vue对象。
				var v = this.content.trim();
				//alert(this); this 指向的是vue对象
				//根据用户的输入，从jsonArray过滤出符合条件的元素，把他返回。
				//filter()	检测数值元素，并返回符合条件所有元素的数组。
				var arr = this.jsonArray.filter(function(ele) {
					/* if(ele.name.indexOf(v)!=-1){
						return true;
					}else{
						return false;
					} */
					//alert(this); 这里的this,不是vue对象。
					return ele.name.indexOf(v) != -1
				})


				//如果你使用箭头函数 那么这个this 指向的是vue对象。				
				//var arr=this.jsonArray.filter((ele)=>ele.name.indexOf(this.content)!=-1)

				return arr;
			}
		},
		methods:{
			sortAge(num){
				if(num==1){
					//升序排列
					this.jsonArray.sort(function(a,b){
						return a.age-b.age;
					});
					
				}else if(num==2){
					//降序排列
					this.jsonArray.sort(function(a,b){
						return -(a.age-b.age);
					});
					
				}else{
					//默认顺序 作业你来实现
				}
			}
		}
	})
</script>

Vue发送Ajax请求

jsonp使用vue-resource库发送ajax请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

		<!-- 使用vue-resource来发送Ajax请求 -->
		<script src="js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<button type="button" @click="sendAjax()">get异步请求</button>
			<button type="button" @click="sendAjaxPost()">post异步请求</button>
			<button type="button" @click="sendJSONP()">jsonp异步请求</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#box',
		data: {
			msg: 'Hello'
		},
		methods: {
			sendAjax() {
				//发送get请求
				/* 	this.$http.get('https://autumnfish.cn/api/joke/list?num=1').then(function(res) {
						document.write(res.body); //res.body 获取后台返回的JSON数据
						document.write(res.body.msg);
					}, function() {
						console.log('请求失败处理');
					}); */


				this.$http.get('https://autumnfish.cn/api/joke/list', {
					params: {
						num: 1
					}
				}).then(function(res) {
					document.write(res.body); //res.body 获取后台返回的JSON数据
					document.write(res.body.msg);
				}, function(res) {
					console.log(res.status);
				});

			},
			sendAjaxPost() {
				this.$http.post('http://localhost:8080/login', {
					username: "zhangsanwoaini",
					password: "http://www.runoob.com"
				}, {
					emulateJSON: true //声明后台返回的是json类型
				}).then(function(res) {
					//document.write(JSON.parse());
					var jsonObj = res.body;
					alert(jsonObj.username);
					alert(jsonObj.password);
				}, function(res) {
					console.log(res.status);
				});
			},
			sendJSONP() {
				this.$http.jsonp('https://tcc.taobao.com/cc/json/mobile_tel_segment.htm', {
					params: {
						tel:'13995865654'
					},
					jsonp: 'callback' //jsonp默认是callback,百度缩写成了cb，所以需要指定下                     }
				}).then(res => {
					alert(res.status);
					alert(res.body);
					alert(res.body.catName);
				});
			}

		}
	})
</script>

推荐使用qs库 qs库不可以发送jsonp请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- vue2.0 以后 推荐使用 axios 他 来发生Ajax
		axios 他 不支持jsonp
		
		-->
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/qs.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<button type="button" @click="sendAjax()">get异步请求</button>
			<button type="button" @click="sendAjaxPost()">post异步请求</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var qs=Qs;
	new Vue({
		el: '#box',
		data: {
			msg: 'Hello'
		},
		methods: {
			sendAjax() {

				axios.get('http://wthrcdn.etouch.cn/weather_mini', {
					params: {
						city: '西安'
					}
				}).then(function(res) {
					//请求成功的处理
					var jsonObj = res.data; //取出后台返回的json数据
					alert(jsonObj.desc);


				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			sendAjaxPost() {
				
				//使用 axios 进行post请求，如果是跨域请求，后台也设置了response.setHeader("Access-Control-Allow-Origin", "*"); 运行跨域，我们如果没有给后台传递参数，那跨域请求没有问题，但是 如果我们传递参数，
				//用{ username: 'zhangsan',password: '654321'}形式来传递，又不行了。
				//怎么解决，可以这么来传递参数,使用FormData来传递参数。
				/* var formData = new FormData();
				formData.append('username', 'zhaoliu');
				formData.append('password', '654321'); */
				//username=zhaoliu&password=654321
				var s = qs.stringify({
					"username": "lisi",
					"password": "88888"
				})
				axios.post('http://localhost:8080/login',s,{
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(res) {
						//console.log(response);
						var jsonObj = res.data; //取出后台返回的json数据
						alert(jsonObj.username);
						alert(jsonObj.password);
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		}
	})
</script>

Vue的生命周期函数（面试）

在这里插入图片描述

mounted（一进入页面要做的事情）与beforeDestory常用（销毁前要做的事情）
数据更新才会调用updated 与 beforeupdated

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box" style="color: aqua;">
			<h1 v-show="flag">一闪一闪亮晶晶</h1>
			<button type="button" @click="stop()">停止闪烁</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#box',
		data: {
			flag: true,
			timeID:0
		},
		mounted: function() {
			//alert("mounted生命周期函数调用了")
			this.timeID=setInterval(() => {
				console.log("定时器在执行");
				this.flag = !this.flag
			}, 1000)
		},
		beforeDestroy:function(){
			//alert("vue销毁之前调用beforeDestroy")
			//那这个生命周期方法里面可以做一些善后收尾的工作。
			//善后工作，应该把定时器也停了
			clearInterval(this.timeID);
			
		},
		methods: {
			stop() {
				//停止闪烁，销毁Vue
				this.$destroy();
				//善后工作，应该把定时器也停了。

			}
		}
	})
</script>

过滤器

复杂逻辑写到过滤器中对展示的结果做处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			{{msg|change|reverse}}
			
			<h1>{{time|formatTime}}</h1>
			<h1>{{time|formatTime('YYYY-MM-DD HH:mm:ss')}}</h1>
			<h1>{{time|formatTime('YYYY-MM-DD')}}</h1>
			<h1>{{time|formatTime('HH:mm:ss')}}</h1>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:'#box',
		data:{
			msg:'heLLO',
			time:new Date()
		},
		//定义过滤器
		filters:{
			change(v){
				var one=v.substring(0,1).toUpperCase();
				var two=v.substring(1).toLowerCase();
				//alert(two);
				return one+two;
			},
			reverse(v){
				return v.split('').reverse().join('');
			},
			//e6的语法：形参默认值
			formatTime(time,str='YYYY-MM-DD HH:mm:ss'){
				var dateStr2=moment(time).format(str);
				
				return dateStr2;
			}
		}
	})
</script>

哦?

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue----知识点练习

文章目录一、style属性的绑定二、class属性的绑定V-if 多重条件的渲染v-for一、style属性的绑定将style内的属性使用JSON字符串的格式书写只要点击就让页面数字的颜色发生变化f相当于一个开关，点击后令开关打开或者关闭，来改变a、b的值Vue的思想：数据改变视图就改变<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></ti
复制链接

扫一扫

专栏目录