vue生命周期+过滤器+拦截器作业

作业：自行配置请求数据需求说明1、可以通过向 axios 传递相关配置来创建请求2、参考配置数据，自行配置 get 方法请求数据以及包括传递参数的方式3、点击按钮之后，可以请求到相应数据，效果如下图所示：<!DOCTYPE html><html lang="en"><head>&lt

jinqianwang

2663人浏览 · 2018-09-22 11:18:59

jinqianwang · 2018-09-22 11:18:59 发布

作业：自行配置请求数据
需求说明
1、可以通过向 axios 传递相关配置来创建请求
2、参考配置数据，自行配置 get 方法请求数据以及包括传递参数的方式
3、点击按钮之后，可以请求到相应数据，效果如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拦截器demo</title>
    <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
    {{msg}}
    <button @click="load()">链接测试</button>
</div>

<script>
    let vm = new Vue({
        el:'#box',
        data:{
            msg:"jin",
        },
        mounted:function(){
            axios.interceptors.request.use(
                function(config){
                    console.log("请求拦截成功！")
                    return config;
                },
                function(eror){
                    console.log()
                    return Promise.reject(error);
                });
            axios.interceptors.response.use(
                function(config){
                    console.log("响应拦截成功！")
                    return config;
                },
                function(error){
                    return Promise.reject(error);
                });
        },
        methods:{
            load:function(){
                axios.get("http://localhost:8080/servlet/TestServlet").then(
                    value=>{
                    alert(value.data);
                    this.msg = value.data;
            }).catch(
                    error=>{
                    alert(error.status);
            });
            },
        }
    });
</script>

</body>
</html>

作业：时间格式化
需求说明
1、格式化的规则是当月份、日期、小时等小于 10 的时候，前面补上 0
2、对需要过滤的数据调用定义的规则进行处理，并返回处理之后的结果
3、使用 mounted 生命周期函数，每隔 1s 更新一下时间
4、使用 beforeDestroy 生命周期函数，在组件销毁前清除定时器，效果如
下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时间格式</title>
	 <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
    {{msg | Change}}
</div>
<script>
		let vm = new Vue({
        el:'#box',
        data:{
            msg:null,
            sss:null,
        },
        mounted:function(){
        	this.fn3();
        },
        beforeDestroy:function(){
        	console.log("jin")
        	clearInterval(this.sss);
        },
        methods:{
        		fn2(){
					this.msg=new Date();
					// this.time=this.fn1(this.time);
					},
				fn3(){
					this.sss = setInterval(this.fn2,1000);
					}	
        	},
        	filters:{
        		Change:function(date){
				// alert(value)
				// value = value.substring(0,19);    
				// value = value.replace(/-/g,'/'); 
				// var timestamp = new Date(value).getTime();
				// var date = new Date(timestamp);

 				var year = (date.getFullYear()).toString(); 
 				var month =(date.getMonth() + 1).toString(); 
 				var day = (date.getDate()).toString();  
 				var hours = (date.getHours()).toString();
 				var minute = (date.getMinutes()).toString();
  				var second = (date.getSeconds()).toString();
  				if (month.length == 1) { 
  				    month = "0" + month; 
  				} 
  				if (day.length == 1) { 
  				    day = "0" + day; 
  				}
  				if (hours.length == 1) {
  						hours = "0" + hours;
  				}
  				if (minute.length == 1) {
  						minute = "0" + minute;
  				}
  				if (second.length == 1) {
  						second = "0" + second;
  				}
  				var dateTime = year + "-" + month + "-" + day +" "+hours+":"+minute+":"+second;
  				// return dateTime; 
  				// this.msg = dateTime;
        			return dateTime;
        		}
        		,
        			

        	}

    	});
</script>
</body>
</html>

《交互与实例的生命周期》上机作业
业作业：彩妆热卖产品列表
需求说明
1、布局完成彩妆热卖产品列表样式
2、利用生命周期函数，模拟在组件挂载之后利用得到的后台数据去渲染列
表，这里的后台数据会提供，效果如下图所示：

[{
num: 1,
name: 'Za姬芮新能真皙美白隔离霜 35g',
imgUrl: "image/icon-1.jpg",
desc:"￥59.90 最近13403人购买"
}, {
num: 2,
name: '美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml',
imgUrl: "image/icon-2.jpg",
desc:"￥89.00 最近13610人购买"
}, {
num: 3,
name: '菲奥娜水漾CC霜40g',
imgUrl: "image/icon-3.jpg",
desc:"￥59.90 最近13403人购买"
}, {
num: 4,
name: 'HC 蝶翠诗橄榄卸妆油 200ml',
imgUrl: "image/icon-4.jpg",
desc:"￥169.00 最近16757人购买"
}]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>

    <div id="box">
    	<ul>
    		<li v-for="(item,index) in arr">
    			<h3>{{item.num}}--{{item.name}}</h3><br>
    			<img v-bind:src="item.imgUrl" alt="0"><br>
    			<span><em>{{item.desc}}</em></span>


    		</li>
    	</ul>
    </div>

    <script>
    	let vm = new Vue({
    		el:'#box',
    		data:{
    			arr:[],
    			msg:"j9in",
    		},
    		mounted:function(){
    			this.load();
    		},
    		methods:{
    			load:function(){
    				axios.get("http://localhost:8080/servlet/TestServlet").then(
    					value=>{
    						// alert(value.data)
    						// this.msg=value.data;
    						this.arr = value.data;	
    					}).catch(
    						error=>{
    							alert(error.status)
    						})
    			}//load
    		}
    	})
    </script>
</body>
</html>

《交互与实例的生命周期》上机作业
业作业：自动筛选案例
需求说明
1、布局完成自动筛选案例样式，上方为输入框，下面为表格布局
2、表格数据利用 v-for 指令遍历数据生成
3、自定义过滤器实现首字母大写的功能
4、在计算属性中实现动态过滤 data 中的数据项，效果如下图所示：

name   Gender   Age
rick   male   21
demen   male   26
Jack   male   26
John   female   20
Lucy   female   16

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		#box{
			width: 400px;
			height: 400px;
			margin: auto;
		}
	</style>
</head>
<body>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>

    <div id="box">
    	
    	<div><span>搜索名称：</span><input type="text" v-model="msg" @blur="find()"><!-- {{msg}} --></div>
    	<div>
    		<table v-if="arr2.length>0" border="1">
    			<tr>
    				<td>Name</td>
    				<td>Gender</td>
    				<td>Age</td>
    			</tr>
    			<tr v-for="item in arr2">
    				<td>{{item.Name | big}}</td>
    				<td>{{item.Gender}}</td>
    				<td>{{item.Age}}</td>
    			</tr>
    		</table>
    	</div>
    </div>

    <script>
    	let vm = new Vue({
    		el:'#box',
    		data:{
    			arr:[{Name:"rick",Gender:"male",Age:"21"},
    			{Name:"demen",Gender:"male",Age:"21"},
    			{Name:"Jack",Gender:"male",Age:"26"},
    			{Name:"John",Gender:"female",Age:"20"},
    			{Name:"Lucy",Gender:"female",Age:"16"}],
    			msg:"",
    			arr2:[]
    		},
    		methods:{
    			find:function(){
    				let str = this.msg;
    				let arr3 = [];
    				this.arr.forEach(function(item){
    					if (str.toLowerCase()==((item.Name).slice(0,str.length)).toLowerCase()) {
    						arr3.push(item);
    					}
    				})
    				this.arr2 = arr3;
    			}
    		},
    		filters:{
    			big:function(value){
    				result = value.slice(0,1).toUpperCase()+value.slice(1,value.length);
    				return result;
    			},

    		}
    	})//alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn"
    </script>
   
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^