vue之自定义插件
1、插件的作用
- 插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
- Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
- 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.
2、开发插件并且使用
在项目目录下创建plugins.js文件，用于写入插件内容
(function () {
const MyPlugin = {} //声明一个插件对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
alert("添加全局方法或属性")
}
// 2. 添加全局资源
Vue.directive('my-directive', {
inserted: function (el, binding) {
el.innerHTML = binding.value
}
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 4. 添加实例方法，可以传参
Vue.prototype.$myMethod = function () {
alert('添加实例方法')
}
}
// 将插件添加到 window 对象中
window.MyPlugin = MyPlugin
})()
在index.html中进行引入，并且使用：
- 引入文件
<script src="./plugins.js"></script>
- 通过全局方法
Vue.use()使用插件
Vue.use(MyPlugin)
- 使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-my-directive="msg"></button> <!--使用指令-->
</div> <script src="./node_modules/vue/dist/vue.js"></script>
<script src="./plugins.js"></script> <script> Vue.use(MyPlugin) var vm = new Vue(
{
el: '#app',
data: {
msg: 'hello'
},
// 在 `methods` 对象中定义方法
methods: {
}
}
)
//调用自定义的全局方法,Vue 调用
Vue.myGlobalMethod()
// 调用 Vue 实例方法，vm实例调用
vm.$myMethod() </script> </body>
</html>
3、axios插件化
axios用于发送请求，但是在项目中时常需要引入，可以利用插件，做成全局的插件，这样不需要每一个页面都进行引入
- 在项目目录下建立对应的插件文件
- 写对应的实例方法
import axios from 'axios'
const MyHttpServer = {}
MyHttpServer.install = (Vue) => {
axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'
//添加实例方法
Vue.prototype.$http = axios
}
export default MyHttpServer
- 在main.js中全局导入
import MyHttpServer from '@/plugins/http' Vue.use(MyHttpServer)
- 在需要的地方可以进行使用了
this.$http.post('addUser',data)
vue之自定义插件的更多相关文章
- 浅析vue封装自定义插件
在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装 ...
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...
- Vue学习之--------Vue中自定义插件（2022/8/1）
文章目录 1.插件的基本介绍 2.实际应用 2.1 目录结构 2.2 代码实例 2.2.1 学校组件(School.vue) 2.2.2 学生组件(Student.vue) 2.2.3 定义的插件 2 ...
- vue中自定义组件（插件）
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- vue自定义插件封装，实现简易的elementUi的Message和MessageBox
vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition ...
- 如何用uniapp+vue开发自定义相机插件——拍照+录像功能
调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能,今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面,并且实现: 1: 自定义拍照 2: 自定义录像 3 ...
- Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
- vue（5）—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
随机推荐
- 【记录】VScode快捷键大全
记住快捷键能够提高工作效率 Ctrl+Shift+P,F1 展示全局命令面板 Ctrl+P 快速打开最近打开的文件 Ctrl+Shift+N 打开新的编辑器窗口 Ctrl+Shift+W 关闭编辑器 ...
- 2018-2-13-win10-安装Mpi
title author date CreateTime categories win10 安装Mpi lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23: ...
- Lambda select 动态字段
直接上代码 //测试数据 public static List<User> myList = new List<User>() { , Name=,IsChild=false} ...
- 【代码健壮性】善用data-属性来关联，慎用parent（）之类的查找结构
$(".minus,target").unbind().click(function(){ console.log(this); var $thisParent = $(this) ...
- windows10自带的画图软件打出来的字是斜的，怎么解决?
因为字体中带@的字体,方向就是斜的,所以打字时不要用前面带@符号的字体. 用其他字体方向为正常的
- python 对redis key的基本操作
首先看一下Python 操作redis.StrictRedis 的初始化方法__init__ def __init__(self, host='localhost', port=6379, db=0, ...
- 在三台服务器，搭建redis三主三从集群
一.资源准备 1.准备三台服务器H1.H2.H3 172.26.237.83 H1 172.26.237.84 H2 172.26.237.85 H3 二.配置服务器 1.在H1服务器设置SSH免密登 ...
- mybatis 多表查询sql
在使用spring,spring mvc,mybatis时,mybatis链接数据库做多表查询的时候,sql语句中直接使用left join等链接字符就可以 链接多个表,参数类型是parameterT ...
- vue 多选框 checkbox 父到子传值
vue多选功能, 修改时选中的状态不能从当前组件中得到,从父组件中传过来. 这里 新增和修改封装了一个组件,在点击确定按钮后,会发送新增或修改请求,重新渲染页面.但是在点击[新增]/ [修改]按钮时, ...
- webpack 添加eslint代码审查
1). 添加包 npm install eslint --save-dev npm install eslint-loader --save-dev npm install eslint-plugin ...