vue2.x学习笔记(二十四)
2024-09-07 11:07:11
接着前面的内容:https://www.cnblogs.com/yanggb/p/12663909.html。
插件
插件通常是用来为vue添加全局功能的。
插件的功能范围
插件的功能范围没有严格的限制,一般有以下几种:
1.添加全局方法或属性。比如vue-custom-element。
2.添加全局资源:指令/过滤器/过渡等。比如vue-touch。
3.通过全局混入来添加一些组件选项,比如vue-router。
4.添加vue实例方法,通过把它们添加到Vue.prototype上来实现。
5.一个库,提供自己的api,同时提供上面提到的一个或多个功能。比如vue-router。
插件的使用
通过全局方法【Vue.use()】使用插件。它需要在你调用【new Vue()】启动应用之前完成:
// 调用MyPlugin.install(Vue)
Vue.use(MyPlugin) new Vue({
// ...组件选项
})
也可以传入一个可选的现象对象:
Vue.use(MyPlugin, { someOption: true })
【Vue.use】会自动阻止多次注册相同的插件,届时即使多次调用也只会注册一次该插件。
虽然vue官方提供的一些插件(例如vue-router)在检测到vue是可访问的全局变量时,就会自动调用【Vue.use()】。然而在像CommonJS这样的模块环境中,你应该始终显式地调用【Vue.use】。
// 用Browserify或webpack提供的CommonJS模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router') // 不要忘了调用此方法
Vue.use(VueRouter)
插件的开发
vue的插件开发应该暴露一个【install】方法,这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象。
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
} // 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
}) // 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
}) // 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
从上面的代码很容易知道,vue中插件的机制就是通过对函数中的传入的第一参数(Vue)进行拓展,然后通过函数作为整体输出的途径,以达到封装的效果。
"我还是很喜欢你,像萋萋野草生故里,荒芜四季。"
最新文章
- ASP.NET MVC使用Areas后怎样获取Area(区域)的名称
- 七牛图片上传JSSDK
- 第 15 章 CSS 文本样式[下]
- Python 之 MySQL 操作库 lazy_mysql
- JSP中Session的使用
- CATransition的动画效果类型及实现方法--老代码备用参考
- Jersey的异常处理
- IOS设计模式学习(11)中介者
- MySql全国省市区SQL语句
- Java 多线程并发编程之 Synchronized 关键字
- iOS开发支付集成之支付宝支付
- typora画图
- 7、vue-awesome-swiper页面跳转
- javascript面向对象学习
- node-log4js3.0.6配置
- Java内部类的介绍
- RabbitMq简单应用
- VS2010 lib和dll导出路径设置
- poj_3261 后缀数组
- iconv用法解读
热门文章
- 感染(low)bfs 、感染(mid) 二分、感染(high) 二分 + 维护单调 队列去除无用的点
- EF 太重,MyBatis 太轻,ORM 框架到底怎么选 ?
- 记一次JAVA进程导致Kubernetes节点CPU飙高的排查与解决
- eclipse导入项目乱码问题及快键键收集
- Android Studio使用butterknife库绑定控件ID注解
- Node.js快速创建一个Express应用的几个步骤
- HAproxy shell脚本安装
- spark模型error java.lang.IllegalArgumentException: Row length is 0
- SolrCloud(solr集群+zookeeper集群)
- 浏览器中 JS 的事件循环机制