Vue插件语法入门

    <div id="app">
        <p v-my-directive="msg"></p>
    </div>
    <script>
        Vue.config.devtools = true;
        Vue.use(MyPlugin, { m: 1 });
        Vue.myGlobalMethod();
        var app = new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            }
        })
        app.$myMethod();
    </script>

(function (window) {
    //定义插件对象
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或 property
        console.log("install()", options);
        Vue.myGlobalMethod = function () {
            console.log("myGlobalMethod方法");
        }

        // 2. 添加全局资源
        Vue.directive('my-directive', {
            bind(el, binding) {
                el.textContent = "----" + binding.value
            }
        }),

            // 4. 添加实例方法
            Vue.prototype.$myMethod = function (methodOptions) {
                console.log("vm.myMethods()");
            }
    }
    //暴露插件对象
    window.MyPlugin = MyPlugin;
})(window)