前言
因为过滤器和混入这两个在Vue基础学习中（局部使用）已经有过接触，所以在这里就把这两个（全局使用）再讲解一下，加深一下大家的印象。
Vue.filter 的全局使用
注册或获取全局过滤器。
模版代码：
1
2
3
4
| // 注册
Vue.filter('toUpperCase', function(val) {
return val.toUpperCase();
})
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>filters 过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>{{ msg | toUpperCase }}</div>
</div>
<script type="text/javascript">
Vue.filter('toUpperCase', function(val) {
return val.toUpperCase();
})
new Vue({
el: '#app',
data() {
return {
msg: 'abcdefg'
}
}
});
</script>
</body>
</html>
|
Vue.mixin 的全局使用
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
模版代码：
1
2
3
4
5
6
7
8
| Vue.mixin({
data() {
return {
name: '张三',
sex: '男'
}
}
})
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mixin 混入</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>姓名：{{ name }}，性别：{{ sex }}</div>
</div>
<script type="text/javascript">
Vue.mixin({
data() {
return {
name: '张三',
sex: '男'
}
}
})
new Vue({
el: '#app'
});
</script>
</body>
</html>
|