1.事件对象
谁触发这个事件,事件对象就指向谁
$event
2.事件修饰符
语法:@事件.按键修饰符="函数()"
按键修饰符
.up .down .ctrl .enter .space
事件修饰符
<input type="text" @keydown.ctrl="fun()">
methods:{
fun(){
console.log("aaa")
}
}
3.ajax发送请求
$.ajax({
//请求地址
url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
type:"GET",
dataType:"json",//预计返回类型
success(ok){
console.log(ok);
}
})
注意: dataType:"json", //预计返回类型
4.过滤器
4.1全局过滤器 必须写在vue实例之前
(1)定义过滤器
Vue.filter("你过滤器的名字",(你要过滤的数据)=>{
必须有 return 过滤数据的逻辑
})
(2)使用过滤器
{{数据|过滤器的名字}} // 管道符|
实际应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">
<h1>全局过滤器</h1>
<!-- 使用过滤器{{数据|过滤器的名字}} -->
<h1>{{num|filter}}</h1>
</div>
<div id="demodivb">
<!-- 全局过滤器
{{数据|变量名}} -->
<h1>{{num|filter}}</h1>
</div>
<script>
// 全局过滤器
// Vue.filter("你过滤器的名字",(你要过滤的数据)=>{
// 必须有 return 过滤数据的逻辑
// })
Vue.filter("filter",(data)=>{
return data.substr(0,10)
})
new Vue({
el:"#demodiv",
data:{
num:"2022-07-16 10:25"
},
methods:{
}
})
new Vue({
el:"#demodivb",
data:{
num:"2022-07-17 10:30"
},
methods:{
}
})
</script>
</body>
</html>
4.2局部过滤器 写在vue实例中,等同于el,methods,data等同级的位置
语法:
filters:{
过滤器的名字(过滤的数据){
return 你过滤的逻辑
}
}
使用
{{数据|过滤器的名字}} // 管道符|
实际应用:
<!DOCTYPE html>
<html>
<head>
<title>宝剑锋从磨砺出,梅花香自苦寒来</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">
<h1>{{num|filters}}</h1>
</div>
<div id="demodivb">
<h1>{{num}}</h1>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
num:"2022-07-17 12:34:35"
},
filters:{
filters(data){
return data.substr(0,10)
}
}
})
new Vue({
el:"#demodivb",
data:{
num:"2022-07-17 12:34:59"
}
})
</script>
</body>
</html>