前端培训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>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)