0809 课堂笔记 Vue
1、事件修改符
.stop:用于阻止冒泡
.prevent:取消默认事件。
过滤器 filters 函数
实例1：
<div>{{time | date }</div>
filters :{
//定义了一个局部过滤器 （注册过滤器）
//接收的第一个参数即是你要最终过滤的内容
currency(v){
//过滤返回的内容就是你要过滤的内容
return ——
}
}
实例2：
<div id="myApp">
{{price | currency}}
<p>{{a | currency(3)}}</p>
<p>{{b | currency(4)}}</p>
</div>
</body>
<script>
new Vue({
el:"#myApp",
data:{
price:1,
a:2,
b:3
},
filters:{
// 第一个参数是你要过滤的值，后面的参数是你接收的参数
currency(v,n=2){
console.log(v,n)
return "$"+v.toFixed(n);
}
}
})
</script>
外部引入局部过滤器
<div id="myApp">
<p>价格：{{price | currency}}</p>
<p>时间：{{time | date}}</p>
</div>
</body>
<script>
new Vue({
el:"#myApp",
data:{
price:12.456,
time:Date.now()
},
filters
// filters:filters
filters:{
currency(v,n=2){
return "$"+v.toFixed(n);
},
date(v){
const time = new Date(v);
return time.getFullYear()+"-"+
(time.getMonth()+1).toString().padStart(2,"0")+"-"+
(time.getDate()).toString().padStart(2,"0")+" "+
(time.getHours()).toString().padStart(2,"0")+":"+
(time.getMinutes()).toString().padStart(2,"0")+":"+
(time.getSeconds()).toString().padStart(2,"0");
}
}
全局过滤器
<body>
<div id="one">
<p>价格：{{price | currency}}</p>
<p>时间：{{time | date}}</p>
</div>
<hr>
<div id="two">
<p>价格：{{price | currency(3)}}</p>
<p>时间：{{time | date}}</p>
</div>
</body>
<script>
// 全局过滤器定义,filter第一个参数是过滤器的名字，
// 第二个参数是一个方法(第一个参数是你要过滤的数据，后面的参数是你接收的值)
Vue.filter("currency",function (v,n=2) {
return v.toFixed(n);
})
Vue.filter("date",function (v) {
const time = new Date(v);
return time.getFullYear()+"-"+
(time.getMonth()+1).toString().padStart(2,"0")+"-"+
(time.getDate()).toString().padStart(2,"0")+" "+
(time.getHours()).toString().padStart(2,"0")+":"+
(time.getMinutes()).toString().padStart(2,"0")+":"+
(time.getSeconds()).toString().padStart(2,"0");
})
new Vue({
el:"#one",
data:{
price:100000,
time:Date.now()
}
})
new Vue({
el:"#two",
data:{
price:20000,
time:Date.now()
}
})
</script>
外部引入全局追踪器
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
<script src="lib/vue-filters.js"></script>
</head>
<body>
<div id="one">
<p>价格：{{price | currency}}</p>
<p>时间：{{time | date}}</p>
</div>
<hr>
<div id="two">
<p>价格：{{price | currency(3)}}</p>
<p>时间：{{time | date}}</p>
</div>
</body>
<script>
for(let key in filters){
// key filters[key]
Vue.filter(key,filters[key]);
}
new Vue({
el:"#one",
data:{
price:100000,
time:Date.now()
}
})
new Vue({
el:"#two",
data:{
price:20000,
time:Date.now()
}
})
</script>
外部封装引入：
let filters = {
currency(v,n=2){
return "$"+v.toFixed(n);
},
date(v){
const time = new Date(v);
return time.getFullYear()+"-"+
(time.getMonth()+1).toString().padStart(2,"0")+"-"+
(time.getDate()).toString().padStart(2,"0")+" "+
(time.getHours()).toString().padStart(2,"0")+":"+
(time.getMinutes()).toString().padStart(2,"0")+":"+
(time.getSeconds()).toString().padStart(2,"0");
}
}