vue2.x学习笔记(二十四)
接着前面的内容: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)进行拓展,然后通过函数作为整体输出的途径,以达到封装的效果。
"我还是很喜欢你,像萋萋野草生故里,荒芜四季。"
vue2.x学习笔记(二十四)的更多相关文章
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
- (C/C++学习笔记) 二十四. 知识补充
二十四. 知识补充 ● 子类调用父类构造函数 ※ 为什么子类要调用父类的构造函数? 因为子类继承父类,会继承到父类中的数据,所以子类在进行对象初始化时,先调用父类的构造函数,这就是子类的实例化过程. ...
- Java基础学习笔记二十四 MySQL安装图解
.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Compl ...
- Java学习笔记二十四:Java中的Object类
Java中的Object类 一:什么是Object类: Object类是所有类的父类,相当于所有类的老祖宗,如果一个类没有使用extends关键字明确标识继承另外一个类,那么这个类默认继承Object ...
- PHP学习笔记二十四【Get Set】
<?php Class Person{ private $n1; private $n2; private $n3; //使用__set方法来管理所有的属性 public function __ ...
- angular学习笔记(二十四)-$http(2)-设置http请求头
1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain ...
- vue2.x学习笔记(十四)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12602256.html. 组件的Prop Prop是组件之间通信的一个重要途径,了解其知识十分重要. Prop的大 ...
- python3.4学习笔记(二十五) Python 调用mysql redis实例代码
python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...
- 学习笔记:CentOS7学习之二十四:expect-正则表达式-sed-cut的使用
目录 学习笔记:CentOS7学习之二十四:expect-正则表达式-sed-cut的使用 24.1 expect实现无交互登录 24.1.1 安装和使用expect 24.2 正则表达式的使用 24 ...
- VSTO学习笔记(十四)Excel数据透视表与PowerPivot
原文:VSTO学习笔记(十四)Excel数据透视表与PowerPivot 近期公司内部在做一种通用查询报表,方便人力资源分析.统计数据.由于之前公司系统中有一个类似的查询使用Excel数据透视表完成的 ...
随机推荐
- 一文教会你如何在 Spring 中进行集成测试,太赞了
不得不说,测试真的是太重要了!但并不是所有的开发者都这样认为,这种感觉在我回到洛阳后尤其强烈.竟然有团队成员不经测试就把代码提交到代码库,并且是会报错的那种,我天呐,遇到这种队友我也是醉了. 我之前是 ...
- 《Java基础复习》—规范与基础
参考书目<Java 编程思想>所以大家放心食用 一.注释规范以及API文档 1.注释 1.1三种注释方法 //注释内容 单行注释 /* 注释内容 */ 多行注释 /**注释内容*/ 文档注 ...
- var、let和const的区别详解
let 和 const 是 ECMAScript6 新推出的特性,其中 let 是能够替代 var 的"标准",所以我们探讨 var.let 和 const 的区别,首先应该知 ...
- 修复Windows10引导,适用gpt+uefi环境
在双硬盘多系统安装时,容易损坏Win10的开机引导文件. 可以尝试用Windows原版安装盘启动,进入命令提示符模式: 首先使用diskpart命令确认需要修复的Windows分区的安装卷X:. 再运 ...
- lr事务
事务:transaction(性能里面的定义:客户机对服务器发送请求,服务器做出反应的过程) 用于模拟用户的一个相对完整的业务操作过程:如登录,查询,交易等操作(每次http请求不会用来作为一个事务) ...
- fork()系统调用的理解
系统调用fork()用于创建一个新进程.我们可以通过下面的代码来理解,最好是能自己敲一遍运行验证. #include<stdio.h> #include<stdlib.h> ...
- k8s~helm镜像版本永远不要用latest
对于容器编排工具k8s来说,你可以使用它规定的yaml格式的脚本,使用客户端kubectl来与k8s进行通讯,将你定义好的yaml部署脚本应用到k8s集群上,而这对yaml脚本一般来说都是很像的,就是 ...
- 实战|使用Spark Streaming写入Hudi
欢迎关注微信公众号:ApacheHudi,解锁下一代数据湖技术 1. 项目背景 传统数仓的组织架构是针对离线数据的OLAP(联机事务分析)需求设计的,常用的导入数据方式为采用sqoop或spark定时 ...
- 【Java】【常用类】Object 基类 源码学习
源码总览: 有好些都是native本地方法,背后是C++写的 没有关于构造器的描述,默认编译器提供的无参构造 https://blog.csdn.net/dmw412724/article/detai ...
- 安装JDK后,未设置Path,也能执行java.exe的原因
安装JDK时,自动将java.exe复制到C:\Windows\System32下