Vue全家桶--07 Vue过滤器和插件
7.1 过滤器
7.1.1 什么是过滤器
过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示.
注意：过滤器并没有改变原本的数据，只是产生新的对应的数据
7.1.2 使用方式
**定义过滤器：
全局过滤器
Vue.filter(过滤器名称, function (value1[,value2,...] ) {
// 数据处理逻辑
})局部过滤器
new Vue({
filter:{
过滤器名称:function(value1,[,value2,...]){
}
}
})**过滤器可以用在两个地方：{{}}和v-bind表达式
<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind: 过滤器名称"></div>
<div v-bind: 过滤器名称(参数值)"></div>Demo
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div >
<h3>过滤器单个参数</h3>
<p>{{content | contentFilter}}</p>
<input type="text" :value="content | contentFilter">
<h3>过滤器多个参数</h3>
<p>{{ Net | add(Java,Vue) }}</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.filter('contentFilter', function (value) {
if (!value) {
return
}
return value.toString().toUpperCase().replace('TMD', 'XXX').replace('SB', 'XX');
})
new Vue({
el: '#app',
data: {
content: 'tmd是个sb',
Net:90,
Java:89,
Vue:85
},
filters: {
add (num1, num2, num3) {//add 过滤名，num1就是 | 左表的第一个参数
return num1 + num2 + num3;
}
}
});
</script>
</body>
</html>7.2 自定义插件
插件：1.插件通常会为Vue添加全局功能，一般是添加全局方法/全局指令/过滤器等
2.Vue插件有一个公开方法 install，通过 install方法给Vue添加全局功能
3.通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成。
plugins.js
(function(){
// 声明 MyPlugin 插件对象
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法
Vue.myGlobalMethod = function () {
alert('MyPlugin插件: 全局方法生效')
}
// 2. 添加全局指令
Vue.directive('my-directive', {
inserted: function (el, binding) {
el.innerHTML = "MyPlugin插件 my-directive:" + binding.value
}
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function (methodOption) {
alert('Vue 实例方法生效：' + methodOption)
}
}
// 将插件添加到 window 对象中
window.MyPlugin = MyPlugin
})() // 不要少了括号()，让它立即执行html页面
<body>
<div >
<span v-my-directive="content"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./js/plugins.js"></script>
<script>
// 1.引入自定义插件 MyPlugin
// 如果报错:Uncaught ReferenceError: MyPlugin is not defined
// 解决方法: 查看 plugins.js 是否引入，如果引入还是报错，检查 js 语法，特别是最后一行不要少了括号 ()
Vue.use(MyPlugin);
// 2. 创建 Vue 实例, 模板中使用引用全局指令 v-my-directive="content"
var vm = new Vue({
el: '#app',
data: {
content:'hello'
}
});
//3.调用自定义全局方法 Vue调用
Vue.myGlobalMethod();
//4.调用Vue实例方法 vm调用
vm.$myMethod('123');
</script>
</body>- 上一篇 »Vue.js中过滤器，filter的使用
- 下一篇 »vue过滤器