Vue.js基础_自定义插件
2019-08-07 15:53
1131 查看
自定义插件
vue-mycj.js
[code](function () { //需要向外暴露的插件对象 const MyPlugin={} //插件对象必须有一个Install() MyPlugin.install=function (Vue,options) { //1.添加全局方法或属性 Vue.myGlobalMethod=function () { console.log('Vue函数对象的方法myGlobalMethod()') } //添加全局资源 Vue.directive('my-directive',function (el,binding) { el.textContent=binding.value.toUpperCase() }) //添加实例方法 Vue.prototype.$myMethod=function () { console.log('Vue实例对象的方法$myMethod()') } //向外暴露 } window.MyPlugin=MyPlugin })()
html代码
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vue-mycj.js"></script> </head> <body> <div id="demo"> <p v-my-directive="msg"></p> </div> </body> <script> //声明使用插件 Vue.use(MyPlugin)//内部会执行MyPlugin.install(Vue) //使用全局方法 Vue.myGlobalMethod() const vm=new Vue({ el:'#demo', data:{ msg:'i love you!' } }) //使用实例方法 vm.$myMethod() </script> </html>
相关文章推荐
- vue插件(自定义组件或js文件使用),vue.extend(),vue.component()注册组件
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
- vue加载自定义的js文件方法
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
- vue.js 基础知识看点
- Vue.js 使用cordova camera插件调取相机
- vue.js(基础篇1)
- Vue.js 插件开发详解
- vue.js基础(2)
- knockoutjs + easyui.treegrid 可编辑的自定义绑定插件
- 基于Vuejs+Element的注册插件的编写
- jQuery自定义插件开发基础1——jQuery实用函数的实现
- Vue.js 插件开发:透明提示框插件、倒计时返回首页插件
- 一个好用精简的vuejs轮播插件——vue-swiper
- Vue.js基础指令、基本介绍
- Vue.js基础拾遗
- 基于vue.js的分页插件
- vue-cli中的check-versions.js配置文件包括semver,chalk,shell插件的解释
- 自己写个vue.js插件(3):插件里面包含子组件
- [js框架]Vue框架的基础学习 三、列表渲染