Web学习——vue的基本使用（3）

Geek Li

已于 2022-03-31 17:40:51 修改

阅读量360

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-02-14 21:55:52 首次发布

本文链接：https://blog.csdn.net/weixin_43496491/article/details/122922113

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1.过滤搜索案例

<!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>
				<input type="text" name="" id="" value="" v-model="content" placeholder="请输入索引的关键字" />
				<ul>
					<li v-for="(ele,index) in newArr" :key="index">
						{{index}}----{{ele.name}}---{{ele.age}}---{{ele.sex}}
					</li>
				</ul>
				<button type="button" @click="mySort(1)">升序</button>
				<button type="button" @click="mySort(2)">降序</button>
				<button type="button" @click="mySort(3)">默认顺序</button>
			</center>

		</div>
	</body>
	<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': '男'
				}]
			},
			methods:{
				mySort(type){
					if(type==1){
						//按照年龄升序
						this.jsonArray.sort(function(a,b){
							return a.age-b.age;
						})
					}else if(type==2){
						//按照年龄降序
						this.jsonArray.sort(function(a,b){
							return b.age-a.age;
						})
					}else{
					}
				}
			},
			computed: {
				//通过用户输入框中输入的内容，从jsonArray中过滤出来，放到一个新数组中，遍历新数组。
				newArr: function() {
					//过滤jsonArray 中元素中姓名包含z的
					/* var text=this.content; //获取用户输入的内容 this代表的是vue对象
					var arr=this.jsonArray.filter(function(obj){
						//alert(this); filter方法里面传入的匿名函数的this代表的是window对象，不在是vue对象
						return obj.name.indexOf(text)!=-1; //返回true，表示符号条件， 返回false表示不符合
					}) */
					//es6的新语法，匿名函数可以写成箭头函数，类似于java中的 Lambda表达式
					//这个时候，箭头函数中的this代表的vue对象
					var arr = this.jsonArray.filter(obj => obj.name.indexOf(this.content) != -1)
					return arr;
				}
			}
		})
	</script>
</html>

2.收集表单中的数据

<!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>
				<h2>注册用户</h2>
				<!-- @submit.prevent 阻止表单的默认同步提交行为 -->
				<form action="123.html" method="get" @submit.prevent="ajaxSend()">
					用户名：<input type="text" v-model="username" name="username" value="" placeholder="请输入用户名"
						maxlength="6" required="required" />
					<br>
					密码：<input type="password" v-model="password" name="password" value="" placeholder="请输入密码"
						required="required" />
					<br>
					<br>
					<!-- checked="checked"  默认选中 -->
					性别：<input type="radio" v-model="sex" name="sex" value="1" />男
					<input type="radio" name="sex" v-model="sex" value="0" />女
					<input type="radio" name="sex" v-model="sex" id="yao" value="3" />
					<label for="yao">妖</label>
					<br>
					<!-- checked="checked"  默认选中 -->
					爱好：<input type="checkbox" name="hobby" v-model="hobby" value="yiyue" />音乐
					<input type="checkbox" name="hobby" v-model="hobby" value="wudao" />舞蹈
					<input type="checkbox" name="hobby" v-model="hobby" value="huihua" />绘画
					<input type="checkbox" name="hobby" v-model="hobby" id="ws" value="ws" /><label for="ws">武术</label>
					<br>
					<!-- selected="selected" 默认选择项 -->
					<select name="xuexli" v-model="xuexli">
						<option value="">请选择学历</option>
						<option value="xiaoxue">小学</option>
						<option value="zhongxue">中学</option>
						<option value="daxue">大学</option>
					</select>
					<br>
					生日：<input type="date" id="" name="birthday" value="" v-model="birthday" />
					<br>
					备注：
					<textarea rows="10" cols="20" name="desc" v-model="desc">
					</textarea>
					<br>
					<input type="submit" value="注册" />
				</form>
			</center>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				username: '',
				password: '',
				sex: '0',
				hobby: ['yiyue','wudao'],
				xuexli:'daxue',
				birthday:'',
				desc:'请输入你描述'
			},
			methods:{
				ajaxSend(){
					//username=zhangsan&password=12346&sex=1 
					//用json字符串的格式提交
					var jsonObj={"username":this.username,"password":this.password,"sex":this.sex,"hobby":this.hobby,"xuexli":this.xuexli,"birthday":this.birthday,"desc":this.desc};
					//把json对象，转换成json字符串
					var jsonStr=JSON.stringify(jsonObj);
					alert("提交表单数据给后台"+jsonStr)
				}
			}
		})
	</script>
</html>

3.把表单数据收集到json中

<!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>
				<h2>注册用户</h2>
				<!-- @submit.prevent 阻止表单的默认同步提交行为 -->
				<form action="123.html" method="get" @submit.prevent="ajaxSend()">
					用户名：<input type="text" v-model="jsonData.username" name="username" value="" placeholder="请输入用户名"
						maxlength="6" required="required" />
					<br>
					密码：<input type="password" v-model="jsonData.password" name="password" value="" placeholder="请输入密码"
						required="required" />
					<br>
					<br>
					<!-- checked="checked"  默认选中 -->
					性别：<input type="radio" v-model="jsonData.sex" name="sex" value="1" />男
					<input type="radio" name="sex" v-model="jsonData.sex" value="0" />女
					<input type="radio" name="sex" v-model="jsonData.sex" id="yao" value="3" />
					<label for="yao">妖</label>
					<input type="submit" value="注册" />
				</form>
			</center>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				jsonData:{
					username:'',
					password:'',
					sex:'1'
				}
			},
			methods: {
				ajaxSend() {
					var jsonStr=JSON.stringify(this.jsonData);
					alert("提交表单数据给后台"+jsonStr)
				}
			}
		})
	</script>
</html>

4.vue发送ajax请求（vue-resource 库）

<!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/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- Vue.js Ajax(vue-resource)，Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 -->
			<button type="button" @click="sendAjax()">发送Ajax请求</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'hello'
			},
			methods: {
				sendAjax() {
					//发送get请求
					//then(请求成功的回调函数，请求失败的处理函数)
					this.$http.get('https://autumnfish.cn/api/joke/list?num=1').then(function(res) {
						console.log(res);
						console.log(res.status)
						console.log(res.ok);
						console.log(res.url);
						//res.body 获取后台返回的json数据，已经帮你转成json对象了
						console.log(res.body);
						document.write(res.body.jokes[0]);
					}, function() {
						console.log('请求失败处理');
					});
				}
			}
		})
	</script>
</html>

5.vue发送jsonp请求

<!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/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- Vue.js Ajax(vue-resource)，Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 -->
			<button type="button" @click="sendAjax()">发送jsonp请求</button>
			<h1>{{isp}}</h1>
			<h2>{{cityName}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				cityName: '',
				isp: ''
			},
			methods: {
				sendAjax() {
					//发送jsnop请求
					let url = 'https://tool.bitefu.net/shouji/';
					this.$http.jsonp(url, {
						params: {
							mobile: '13259141515'
						},
						jsonp: 'callback' //jsonp默认是callback,百度缩写成了cb，所以需要指定下
					}).then(res => {
						console.log(res);
						console.log(res.body);
						this.cityName = res.body.city;
						this.isp = res.body.isp;
					});
				}
			}
		})
	</script>
</html>

6.ES6的一个新语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		//https://www.runoob.com/w3cnote/es6-tutorial.html  es6新增的语法概念
			var username="zhangsan";
			var password="abcdef"
			var age=23;
			var sex="男";
			//var jsonObj={"username":username,"password":password,"age":age,"sex":sex};
			//新语法：如果你json对象的中属性，键的名字和值的名字一致，可以如下简写
			var jsonObj={username,password,age,sex};
			var jsonStr=JSON.stringify(jsonObj);
			alert(jsonStr);
			var str="姓名="+username+"密码="+password+"年龄="+age+"性别="+sex+"";
			alert(str);
			//es6好用的语法，定义字符串 可以这么定义
			var str2=`es6好用的语法，定义字符串 可以这么定义`;
			alert(str2);
			//s6好用的语法，定义字符串 可以这么定义,拼接变量的语法
			var str3=`姓名:${username}密码:${password}年龄:${age}性别：${sex}`;
			alert(str3);
			//es6形参默认值
			function show(a=100,b=200){
				alert(a)
				alert(b)
			}
			show(10);
		</script>
	</body>
</html>

7.vue中发送ajax请求（axios）

<!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/axios.min.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- Vue.js Ajax(vue-resource)Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 -->
			<button type="button" @click="sendAjax()">发送Ajax请求</button>
			<ul>
				<li v-for="(ele,index) in arr" :key="index">
					{{ele}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				arr: []
			},
			methods: {
				sendAjax() {
					axios.get('https://autumnfish.cn/api/joke/list?num=10')
						.then(res => {
							console.log(res);
							//res.data 获取后台返回的json数据
							console.log(res.data);
							//箭头函数中 this 指向的是vue实例
							this.arr = res.data.jokes;
						})
						.catch(function(error) {
							// 请求失败处理
							console.log(error);
						});
				}
			}
		})
	</script>
</html>

8.vue的生命周期函数

生命周期：一个事物从生到死所经历的不同阶，
vue的生命周期：从vue实例创建出来到vue实例销毁，所经历的不同阶段。
vue的生命周期方法：从vue实例创建出来到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">
			<h1 v-show="flag">一闪一闪亮晶晶</h1>
			<button type="button" @click="stop()">停止闪烁</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				flag:true,
				timerID:''
			},
			生命周期函数
			beforeCreate:function(){
				console.log("beforeCreate生命周期函数执行了"+this.flag)
				//this.stop();
			},
			//生命周期函数
			created:function(){
				console.log("created生命周期函数执行了"+this.flag)
				//this.stop();
			},
			//生命周期函数
			mounted:function(){
				console.log("mounted生命周期函数执行了"+this.flag)
				this.timerID=setInterval(()=>{
					this.flag=!this.flag
					console.log("定时器还在执行吗？")
				},1000)
			},
			beforeDestroy:function(){
				console.log("vue实例销毁之前调用beforeDestroy生命周期函数")
				//做善后工作，把定时器销毁掉
				clearInterval(this.timerID);
			},
			methods:{
				stop(){
					//我们可以销毁vue实例，我们还有善后工作要做，把定时器也销毁掉。
					this.$destroy(); 
				}
			}
		})
	</script>
</html>

9.vue所有的生命周期函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="box">
			{{data}}
			<button type="button" @click="xiaohui()">销毁</button>
		</div>
		<!-- 
		 8个生命周期函数，这两个 beforeUpdate updated 生命周期函数会多次调用。
		  其余的只调用一次。
		 beforeDestroy和destroyed 是你在销毁vue对象时候调用。
		 -->
		<script type="text/javascript">
			var vm = new Vue({
				el: "#box",
				data: {
					data: "这是一个数据",
					info: "这是另一个数据数据"
				},
				methods:{
					xiaohui(){
						this.$destroy();
					}
				},
				beforeCreate: function() {
					console.log("beforeCreate（）创建前========")
					console.log("数据："+this.data)
					console.log("模板："+this.$el)
				},
				created: function() {
					console.log("created（）已创建========")
					console.log("数据："+this.data)
					console.log("模板："+this.$el)
					
					//发送AJax请求，请求一些后台数据
				},
				beforeMount: function() {
					console.log("beforeMount（）mount之前========")
					console.log("数据："+this.data)
					console.log("模板："+this.$el)
				},
				mounted: function() { //一次
					console.log("mounted（）mounted========")
					console.log("数据："+this.data)
					console.log("模板："+this.$el)
				},
				//多次调用
				beforeUpdate: function() {
					console.log("beforeUpdate（）更新前========");
				},
				//多次调用
				updated: function() {
					console.log("updated（）更新完成========");
				},
				//销毁之前调用
				beforeDestroy: function() {
					console.log("beforeDestroy（）销毁前========")
					console.log("数据："+this.data)
					console.log("模板："+this.$el)
				},
				//已经销毁调用
				destroyed: function() {
					console.log("destroyed（）已销毁========")
					console.log("数据："+this.data)
					console.log("模板："+this.$el)
				}
			})
		</script>
	</body>
</html>

10.在vue生命周期函数中发送ajax请求

<!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/axios.min.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- Vue.js Ajax(vue-resource)Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 -->
			<ul>
				<li v-for="(ele,index) in arr" :key="index">
					{{ele}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				arr: []
			},
			//在生命周期函数中发送Ajax请求，请求后台数据，展示到页面上
			mounted: function() {
				axios.get('https://autumnfish.cn/api/joke/list?num=10')
					.then(res => {
						console.log(res);
						//res.data 获取后台返回的json数据
						console.log(res.data);
						//箭头函数中 this 指向的是vue实例
						this.arr = res.data.jokes;
					})
					.catch(function(error) {
						// 请求失败处理
						console.log(error);
					});
			}
		})
	</script>
</html>

11.更新数据时调用的生命周期函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入vue.js 库文件 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<input type="text" name="" id="" value="" v-model="msg"/>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'Hello'
			},
			//更新的生命周期函数多次调用
			beforeUpdate: function() {
				console.log("beforeUpdate（）更新前========");		
			},
			//多次调用
			updated: function() {
				console.log("updated（）更新完成========");
			}
		})
	</script>
</html>

12.过滤器

<!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">
			<h1>{{msg}}</h1>
			<h1>{{msg.toUpperCase()}}</h1>
			<h1>{{msg.substring(0,1).toUpperCase().concat(msg.substring(1))}}</h1>
			<!-- 使用过虑器 -->
			<h1>{{msg|daxie}}</h1>
			<h1>{{msg|myDaxie}}</h1>
			<!-- 同时使用多个过滤器 -->
			<h1>{{msg|daxie|fanzhuan}}</h1>
			<!-- 使用过滤器时可以传参数 -->
			<h1>{{msg|daxie|myFilter('ABC')}}</h1>
			<h1>{{birthday}}</h1>
			<h1>{{birthday|myDate}}</h1>
			<h1>{{birthday|myDate2}}</h1>
			<h1>{{birthday|myDate3('YYYY-MM-DD')}}</h1>
			<h1>{{birthday|myDate3('HH:mm:ss')}}</h1>
			<h1>{{birthday|myDate3}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				msg: 'hello',
				birthday: new Date()
			},
			//局部过滤器
			filters: {
				daxie(text) {
					return text.toUpperCase();
				},
				fanzhuan(text) {
					return text.split('').reverse().join("");
				},
				myDaxie(text) {
					return text.substring(0, 1).toUpperCase().concat(text.substring(1))
				},
				myFilter(text, str) {
					console.log(str)
					return text.concat(str);
				},
				myDate(date) {
					return date.toLocaleString();
				},
				myDate2(date) {
					var dateStr2 = moment(date).format('YYYY-MM-DD HH:mm:ss');
					//var dateStr2 = moment(time).format(geshi);
					return dateStr2;
				},
				//es6 形参默认值
				myDate3(time, geshi='YYYY-MM-DD HH:mm:ss') {
					var dateStr2 = moment(time).format(geshi);
					return dateStr2;
				}
			}
		})
	</script>
</html>

13.全局过滤器

<!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">
			<h1>{{birthday|quanju}}</h1>
		</div>
		<div id="app">
			<h1>{{mytime|quanju}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		//全局过滤器，那个每个vue实例所控制的模板区域都可以用
		Vue.filter('quanju', function(date) {
			var dateStr2 = moment(date).format('YYYY-MM-DD HH:mm:ss');
			return dateStr2;
		})
		new Vue({
			el: '#box',
			data: {
				birthday: new Date()
			}
		})
		new Vue({
			el: '#app',
			data: {
				mytime: new Date()
			}
		})
	</script>
</html>

Geek Li

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web学习——vue的基本使用（3）

1.过滤搜索案例<!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"&gt
复制链接

扫一扫