html2canvas vue 为定义_前端VUE自定义插件

4. 自定义插件

4.1. 效果 (13_插件/test.html)

13_插件.gif

4.2. 说明

1) Vue 插件是一个包含 install 方法的对象 2) 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

4.3. 编码

1) 插件 JS /** * 自 定 义 Vue

插 件

*/ (function () { const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添 加 全 局 方 法 或 属 性 Vue.myGlobalMethod = function () { alert(‘Vue 函数对象方法执行’) } // 2. 添 加 全 局 资 源 Vue.directive(‘my-directive’, function (el, binding) { el.innerHTML = “MyPlugin my-directive ” + binding.value }) // 3. 添 加 实 例 方 法 Vue.prototype.$myMethod = function () { alert(‘vue 实例对象方法执行’) } }

window.MyPlugin = MyPlugin })() 2) 页面使用插件 <div id=”demo”> <!-使 用 自 定 义 指 令 –> <p v-my-directive=”msg”></p> </div>

<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript” src=”vue-myPlugin.js”></script> <script type=”text/javascript”>

// 使 用 自 定 义 插 件 Vue.use(MyPlugin)

var vm = new Vue({ el: ‘#demo’, data: { msg: ‘atguigu’ } }) // 调 用 自 定 义 的 静 态 方 法 Vue.myGlobalMethod() // 调 用 自 定 义 的 对 象 方 法 vm.$myMethod() </script>

文章来源：尚硅谷

尚硅谷【官网】谷粉与老学员为你推荐的Java培训|大数据培训|前端培训|Python培训​www.atguigu.com