vue生命周期+过滤器+拦截器作业
作业 ：自行配置请求数据
需求说明
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生命周期+过滤器+拦截器作业 的全部内容， 来源链接： utcz.com/z/377110.html
