VUE 过滤器以及插件

测试过滤器单个参数

{{ content | contentFilter }}

测试过滤器多个参数

{{ javaScore | add(vueScore,pythonScore) }}

自定义插件

插件的作用

• 插件通常会为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

})()

使用插件