day02-vuejs的过滤器与生命周期
2019-01-15 本文已影响6人
东邪_黄药师
过滤器:
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
过滤器调用时候的格式:
{{ name | 过滤器的名称 }}
过滤器的定义语法:
Vue.filter('过滤器的名称', function (data) { return data + '123' })
[过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据]
过滤器的基本使用（demo）：
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
})
//可多次调用
Vue.filter('test', function (msg) {
return msg + '========'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
输出结果：
曾经，我也是一个疯狂+1123的少年，疯狂+1123的我，傻傻的问，谁是世界上最疯狂+1123的男人========
全局过滤器与全局私有过滤器:
全局过滤器(demo)：
// 全局的过滤器， 进行时间的格式化
// 所谓的全局过滤器，就是所有的VM实例都共享的
Vue.filter('dataFormat', function (dateStr, pattern = "") {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
调用：
<td>{{ item.ctime | dataFormat }}</td>
注意：
当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
私有过滤器:
image.png
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；调用：
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
