自定义插件

babywenever

已于 2023-12-02 13:44:31 修改

阅读量17

点赞数

文章标签： vue.js javascript 前端

于 2023-11-30 15:16:56 首次发布

本文链接：https://blog.csdn.net/babywenever/article/details/134713284

版权

1.定义插件对象

        let MyPlugin = {}

2.插件对象进行安装方法的处理

        Vue.js 的插件应该暴露一个 install 方法。

        这个方法的第一个参数是 Vue 构造器，不是实例，是Vue对象，第二个参数是一个可选的选项对象
MyPlugin.install=function(Vue,options){
// 1. 添加全局方法,他是一个普通函数
 Vue.myGlobalMethod=function(){
     console.log("这是全局方法")
 }
// 2.添加全局指令
Vue.directive("upper",function(el,binding){
      el.textContent=binding.value.toUpperCase()
})
// 3.添加全局过滤器
Vue.filter("toUpper",function(value){
      return value.toUpperCase()
})
// 4.添加一个实例方法
 Vue.prototype.$myMethod=function(){
       console.log("这是实例方法")
     }
}
3.使用插件

Vue.use(MyPlugin)

4.调用全局方法,使用全局指令,使用全局过滤器,实例方法调用

Vue.myGlobalMethod()
<p v-upper="msg"></p>
{{ msg | toUpper }}

vm.$myMethod()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>01.custom-plugin</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- 使用全局指令 -->
            <p v-upper="msg"></p>
            <!-- 使用全局过滤器 -->
            {{ msg | toUpper }}
        </div>
        <script type="text/javascript">
            // TODO:定义与使用插件，理解插件中可以包含的内容

            // 1.定义插件对象
            let MyPlugin = {}
            // 2.插件对象进行安装方法的处理
            // Vue.js 的插件应该暴露一个 install 方法。
            // 这个方法的第一个参数是 Vue 构造器，不是实例，是Vue对象，第二个参数是一个可选的选项对象
            MyPlugin.install=function(Vue,options){
                // 1. 添加全局方法,他是一个普通函数
                Vue.myGlobalMethod=function(){
                    console.log("这是全局方法")
                }
                // 2.添加全局指令
                Vue.directive("upper",function(el,binding){
                    el.textContent=binding.value.toUpperCase()
                })
                // 3.添加全局过滤器
                Vue.filter("toUpper",function(value){
                    return value.toUpperCase()
                })
                // 4.添加一个实例方法
                Vue.prototype.$myMethod=function(){
                    console.log("这是实例方法")
                }
            }

            window.MyPlugin=MyPlugin
            console.log(window)

            // 3.使用插件
            Vue.use(MyPlugin)
            // 可以调用全局方法
            Vue.myGlobalMethod()

            let vm = new Vue({
                el: '#app',
                data: {
                    msg: 'baidu',
                },
            });

            // 实例方法调用
            vm.$myMethod()
        </script>
    </body>
</html>