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你需要知道这些
下一篇: Java培训课程svn之查看工作副本信息
