VUE 过滤器以及插件
过滤器
什么是过滤器
- 过滤器对将要显示的文本，先进行特定格式化处理，然后在进行显示。
- 注意：过滤器并没有改变原本的数据，只是产生新的对应的数据。
使用方式
定义过滤器
全局过滤器
Vue.filter( 过滤器名称 , function(value) ){
// 数据处理逻辑
})
局部过滤器
在 vue 实例中使用 filter 选项，当前实例范围可用。
new Vue({
filters : {
过滤器名称:function ( value ) {
// 数据处理逻辑
}
}
})
使用过滤器
过滤器可以用在两个地方：双花括号{{}} 和 v-bind 表达式
<div> {{ 数据属性名称 | 过滤器名称 }} </div>
<div> {{ 数据属性名称 | 过滤器名称 }} </div>
<div v-bind:id=" 数据属性名称 | 过滤器名称 "> </div>
<div v-bind:id=" 数据属性名称 | 过滤器名称( 参数值 ) "> </div>
演示一下
需求
实现过滤敏感字符，如当文本中有 tmd、sb 都进行过滤。
过滤器传入多个参数，实现求和运算。
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器和插件</title>
</head>
<body>
<div id="app">
<h3>测试过滤器单个参数</h3>
<p>{{ content | contentFilter }}</p>
<input type="text" :value=" content | contentFilter ">
<hr>
<h3>测试过滤器多个参数</h3>
<p>{{ javaScore | add(vueScore,pythonScore) }}</p>
<input type="text" :value="javaScore | add(vueScore,pythonScore)">
</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', '***').replace('SB', '**')
// })
new Vue({
el: '#app',
data: {
content: '小伙子，你TMD就是个大SB！！！',
javaScore: 99,
vueScore: 88,
pythonScore: 77
},
filters: {
// 定义局部过滤器
contentFilter(value) {
if (!value) {
return ''
}
return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**')
},
add(num1, num2, num3) {
// num1 其实就是 | 左边的数据
return num1 + num2 + num3;
}
}
})
</script>
</body>
</html>
自定义插件
插件的作用
- 插件通常会为Vue添加全局功能，一般是添加全局方法/全局指令/过滤器等。
- Vue插件有一个公开的方法 install ，通过 install 方法给 vue 添加全局功能。
- 通过全局方法 Vue.use() 使用插件，他需要在你调用 new Vue() 启动应用之前完成。
案例
创建插件
首先定义一个插件，创建js文件夹，在js文件夹中创建 plugins.js 文件
(function(){
// 声明 MyPlugin 插件对象
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
alert("MyPlugin.myGlobalMethod 全局方法被调用了")
}
// 2. 添加全局指令
Vue.directive('my-directive', {
inserted (el, binding) {
// 逻辑...
el.innerHTML = "MyPlugin.my-directive 指令被调用了" + binding.value
}
})
// 3. 注入组件选项
// Vue.mixin({
// created: function () {
// // 逻辑...
// }
// })
// 4. 添加实例方法
Vue.prototype.$myMethod = function (value) {
// 逻辑...
alert("Vue 实例方法myMethod被调用了:" + value)
}
}
// 将插件添加到window对象
window.MyPlugin = MyPlugin
})()
使用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义插件</title>
</head>
<body>
<div id="app">
<span v-my-directive='content'></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<!-- 引入插件一定一定要在引入vue下面！！！ -->
<script src="js/plugins.js"></script>
<script>
// 引入插件，其实就是安装插件
Vue.use(MyPlugin)
var vm = new Vue({
el: '#app',
data: {
content: 'hello,wjw'
}
})
// 调用插件中的实例，注意，是vm调用，不是Vue。
vm.$myMethod('王佳伟')
// 调用全局方法，注意是Vue调用，不是vm。
Vue.myGlobalMethod()
</script>
</body>
</html>
