Vue 插件(plugin)
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种:
添加全局方法或者 property。如:vue-custom-element
添加全局资源:指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法,通过把它们添加到
Vue.prototype
上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
一、开发插件:
vue官网是这样描述的:Vue.js 的插件应该暴露一个 install
方法。这个方法的第一个参数是 Vue
构造器,第二个参数是一个可选的选项对象:
对照官网的列子,我们做一个权限验证的插件Plugin
const AuthorityPlugin = {
install(Vue){
/* 添加全局方法或 property */
Vue.globalMethod = function () {
// 逻辑...
}
/* 添加全局资源 */
Vue.directive('my-authority', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
/ * 注入组件选项*/
Vue.mixin({
/*可以插入vue完成的生命周期,方法等*/
beforeCreate() {
todoSomething...
},
methods:{
todoFun(){
......
}
}
})
}
}
二、使用插件
/Plugins/index.ts
import AuthorityPlugin from './authority-plugin'
const Plugins = {
install: function (Vue) {
Vue.use(AuthorityPlugin)
}
}
export default Plugins
/main.js
import Plugins from '@/plugins'
Vue.use(Plugins )
PS:
指令钩子函数会被传入以下参数:
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下 property:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
除了 el
之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset来进行。
Vue 插件(plugin)相关推荐
- Vue Plugin Vue插件
实现一个VUE插件 const msgPlugin={} msgPlugin.install=function(Vue, options){//全局方法Vue.haha=function(){aler ...
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- 手牵手教你写 Vue 插件
碎碎念 上一篇文章,我们介绍了如何构建一个 react 插件,今天我们说说如何构建 vue 插件 准备工作 由于与上一篇 react 插件文章使用的是相同的结构,代码测试.持续集成及发布 npm 包也 ...
- 史上最全的vue插件库
无意间发现的一个整合内容,超级强大,赶紧记录下来!原文链接 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2 ...
- IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率)
IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率) 目录 IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率) 一 ...
- 开发Vue插件四种方式
在日常开发中,可能只需要一两个插件就可以完成对系统开发需要.如果引入整个组件库,最后打包项目体积比较大.例如element-ui中的message提示组件等.下面会在vuejs官网提供的插件建议,根据 ...
- 一个用于Fathom Analytics的简单Vue插件
Vue-Fathom (vue-fathom) A simple Vue plugin for Fathom Analytics. 一个用于Fathom Analytics的简单Vue插件. Fath ...
- webstorm中没有vue插件_webstorm安装vue插件及安装过程出现的问题
想要编辑器识别vue文件需要安装vue插件 1. 安装方法: File--> setting --> plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现1个关于 ...
- Vue组件、Vue插件创建与使用
Vue组件 作用 1.组件是vue的一个重要的特点 2.实现多人协作开发 3.通过组件划分降低开发的难度 4.实现复用,降低重复劳动 组件解释 组件就是定义好的一功能模块 建议:多用props,少在组 ...
最新文章
- 比CRUD多一点儿(三):UPDATE、DELETE语句
- 文件系统与数据库的优缺点
- 对象的继承关系在数据库中的实现方式和PowerDesigner设计
- linux配置接口多地址,Linux /etc/network/interfaces配置接口方法
- oss导出数据为空时怎么处理_sql数据库导出空库的搜索结果-阿里云开发者社区...
- 专访快手传输算法负责人周超博士:LAS标准的推出离不开信念感
- python数据结构之树
- idc机房运维巡检_智和信通赋能国产信创 建设IT智能监控运维体系 - 蔚颖willing...
- 计算机如何输入ip地址,电脑如何切换ip地址_怎么让电脑切换ip地址-win7之家
- 使用Opencv2遇到error: C2061 语法错误 标识符dest
- linux备份数据库软件有哪些内容,Linux网络备份MySQL数据库的应用方法
- c#过滤字符串中相同的字符串只保留一个
- Alexa 开发指南
- 如何自己更改证件照底色?如何生成蓝底照片电子版?
- 1、51单片机——郭天祥课后习题解答
- vim keymap
- 使用Springboot+Feign Clients快速搭建REST客户端应用
- bzoj 4424: Cf19E Fairy dfs
- 深度学习训练数据打标签过程
- nao机器人学习笔记3