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)
