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 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
随机推荐
- 案例- CSS 三角加强
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- （二）Django连接本地mysql异常
Pycharm连接数据库出现错误 管理员身份进入mysql数据库 命令: mysql -u root -p 重新进入mysql 在进入Pycharm发现连接成功
- nodejs 进阶：封装所有对数据库的常用操作
//这个模块里面封装了所有对数据库的常用操作 var MongoClient = require('mongodb').MongoClient; var settings = require(&quo ...
- spring 新建mybatis ...
一. 创建bean类 package com.feilong.blog.dao; public class Message { private int id; private String autho ...
- Java类的成员之四：代码块.
3.2类的成员之四:代码块 ①初始化块(代码块)作用:对Java对象进行初始化 ②程序的执行顺序: ③一个类中初始化块若有修饰符,则只能被static修饰,称为静态代码块(static block ) ...
- Shiro学习（4）INI配置
之前章节我们已经接触过一些INI配置规则了,如果大家使用过如spring之类的IoC/DI容器的话,Shiro提供的INI配置也是非常类似的,即可以理解为是一个IoC/DI容器,但是区别在于它从一个根 ...
- ORACLE动态sql在存储过程中出现表或视图不存在的解决方法
Oracle动态sql在存储过程中出现表或视图不存在的解决方法 CREATE OR REPLACE PROCEDURE P_test is strsql varchar2(2000); BEGIN ...
- 不带头结点的单链表------C语言实现
File name:no_head_link.c Author:SimonKly Version:0.1 Date: 2017.5.20 Description:不带头节点的单链表 Funcion L ...
- [nRF51822 AK II 教程]第一课，开发环境的配置及背景介绍【转】
低功耗蓝牙4.0是全新的技术,并不向下兼容,也就是说它和蓝牙3.0.2.0什么的都不能通信的.另外,蓝牙4.0目前的规范只能做外设和主机(智能手机,电脑等)通讯,也就是说你想用一个单模的蓝牙4.0开发 ...
- Django+paramiko实现webshell
说明 基于 python3.7 + django 2.2.3 实现的 django-webshell,支持颜色显示,支持 tab 命令补全,项目地址:https://github.com/leffss ...