私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为”私有过滤器“，因为它它只能在当前VM实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>message的值是：{{message | capi}}</p>
</div>
<div id="app2">
<p>message的值是：{{message | capi}}</p>
</div>
<script src="lib/vue-2.6.12.js"></script>
<script>
// 使用Vue.filter()定义全局过滤器
Vue.filter('capi', (str) => {
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other + '~~~'
});
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// 过滤器函数，必须被定义到filters节点之下
// 过滤器本质上是函数
filters: {
// 注意：过滤器函数中形参中的val，永远都是”管道符“前面的那个值
capi(val) {
//字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
const first = val.charAt(0).toUpperCase()
//字符串的slice方法，可以截取字符串，从指定索引往后截取
const other = val.slice(1)
// 强调：过滤器中，一定要由一个返回值
return first + other
}
}
})
const vm1 = new Vue({
el: '#app2',
data: {
message: 'heima'
}
})
</script>
</body>
</html>