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:id="数据属性名称 | 过滤器名称"></div> <div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>
Demo
<!DOCTYPE html> <html lang="en"> <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 id="app"> <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 id="app"> <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>