Vue 0809 lecture notes
1, an event modifier
.stop: to prevent bubbling
.prevent: cancel the default event.
Filter function filters
Example 1:
<div>{{time | date }</div>
filters :{
// defines a local filter (Filter Register)
// The first parameter is received that is ultimately you want to filter content
currency(v){
// returns the filtered content is what you want to filter content
return ——
}
}
Example 2:
<div id="myApp">
{{price | currency}}
<p>{{a | currency(3)}}</p>
<p>{{b | currency(4)}}</p>
</div>
</body>
<script>
new view ({
el:"#myApp",
data:{
price:1,
a:2,
b:3
},
filters:{
// The first parameter is the value you want to filter, followed by the parameters that you received parameters
currency(v,n=2){
console.log(v,n)
return "$"+v.toFixed(n);
}
}
})
</script>
The introduction of local external filter
<div id="myApp">
<p>价格：{{price | currency}}</p>
<P> Time: {{time | date}} </ p>
</div>
</body>
<script>
new view ({
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");
}
}
Global Filters
<body>
<div id="one">
<p>价格：{{price | currency}}</p>
<P> Time: {{time | date}} </ p>
</div>
<hr>
<div id="two">
<p>价格：{{price | currency(3)}}</p>
<P> Time: {{time | date}} </ p>
</div>
</body>
<script>
// define global filters, filter first parameter is the name of the filter,
// The second parameter is a method (first argument is the data to be filtered you, you back the received parameter value)
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 view ({
el:"#one",
data:{
price:100000,
time:Date.now()
}
})
new view ({
el:"#two",
data:{
price:20000,
time:Date.now()
}
})
</script>
External introduced Global Tracker
<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: {{time | date}} </ p>
</div>
<hr>
<div id="two">
<p>价格：{{price | currency(3)}}</p>
<P> Time: {{time | date}} </ p>
</div>
</body>
<script>
for(let key in filters){
// key filters[key]
Vue.filter(key,filters[key]);
}
new view ({
el:"#one",
data:{
price:100000,
time:Date.now()
}
})
new view ({
el:"#two",
data:{
price:20000,
time:Date.now()
}
})
</script>
Outer package is introduced:
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");
}
}