Vue.js 插件
1.前言
vue的插件其实通过操作Vue这个对象，为其扩展新的功能。例如：
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
2.插件的封装
- 要拿到Vue这个对象，不同的模式有不一样的方法:
- 在普通模式中，Vue框架以script标签的形式引入之后，Vue作为全局变量，插件直接对他进行操作即可。
- 在脚手架模式中，各个模块是相互独立的，其他模块无法直接读取Vue这个对象。虽然可以通过import方式引入Vue进行操作，这是这样不符合规范。
- 实际的做法是：定义一个函数，在函数内部对Vue进行操作。插件定义一个install方法，当执行Vue.use(plugin) 是，则执行这个install方法
- 如果plugin是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。
- 该方法需要在调用 new Vue() 之前被调用。
- 当 install 方法被同一个插件多次调用，插件将只会被安装一次。
3.简单的实例：编写一个添加自定义指令和过滤器的插件
- 非模块化模式：
//确保在这之前已经通过script标签引入了Vue
//添加全局的自定义指令 全部转换成大写
Vue.directive('upper-text',function(el,binding){
el.innerText = binding.value.toUpperCase();
})
//添加全局过滤器 全部转换成小写
Vue.filter('toLowerCase',function(val){
return val.toLowerCase()
})
- 模块化模式：
//1.创建一个对象
const myPlugin = {}
//为其添加install方法,接收Vue这个参数
myPlugin.install = function(Vue){
//测试
console.log('install方法执行了')
//添加全局的自定义指令
Vue.directive('upper-text',function(el,binding){
el.innerText = binding.value.toUpperCase();
})
//添加全局过滤器
Vue.filter('toLowerCase',function(val){
return val.toLowerCase()
})
}
//暴漏该对象
export default myPlugin
//入口文件
import Vue from 'vue'
import App from './App'
import myPlugin from './plugin/myPlugin.js'
////执行myPlugin.install(Vue)
Vue.use(myPlugin)
- 使用插件
<body>
<div id="app">
<!-- 默认 -->
<p v-html="msg"></p>
<!-- 使用插件的自定义指令 -->
<p v-upper-text="msg"></p>
<!-- 使用过滤器 -->
<p>{{msg | toLowerCase}}</p>
</div>
</body>
执行结果：
<div id="app">
<p>Good Life</p>
<p>GOOD LIFE</p>
<p>good life</p>
</div>
4.添加实例方法
- 在脚手架项目中，组件要用axios时，需要在组件中重新引用，如果在入口js文件中引入一次axios，并挂在到Vue原型链中，那么后面所有的组件都能访问这个对象，无需再次引用。
import Vue from 'vue'
//引入axios
import axios from 'axios'
//创建实例
const ajax = axios.create({
baseURL: 'https://api.example.com'
})
//将实例挂在到原型链中
Vue.prototype.$ajax = ajax
app.vue
<script>
export default {
data(){
return {
msg:'Good Life'
}
},
created(){
this.$ajax.get('/api/getMsg').then(res => {
console.log(err)
}).catch(err => {
console.log(err)
})
}
}
</script>
Vue.js 插件的更多相关文章
- vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...
- vue.js插件使用(02) vue-router
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- vue.js及项目实战[笔记]— 03 vue.js插件
一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...
- IDEA安装vue.js插件后，new没有Vue component
首先要安装vue相关的插件vue.js 但是很多人安装vue.js右键发现没有vue Componment,解决方法如下 Settings>Editor>File and Code Tem ...
- idea vue.js插件安装
Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...
- sublime中如何安装vue.js插件，并使代码高亮显示
前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...
- webStrom2017.1版本如何添加vue.js插件
第一步:打开webStrom-setting 第二步:选择File and Code Templates--点击左上角"+"号 第三步:在Name:vue File Exte ...
- PHPstorm如何安装vue.js插件
1.什么是PHPstorm? PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查.----来自百度百科 一句话:P ...
- Vue.Js添加自定义插件
基于上篇我们讲了 在window下搭建Vue.Js开发环境 我们可以开发自己的vue.js插件发布到npm上,供大家下载使用. 1.首先打开cmd命令窗口,进入我们的工作目录下 执行 cd E:\vu ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
随机推荐
- 携手华为云WeLink，合合信息旗下名片全能王推动人脉管理数智化升级
名片是商务场景中信息传递的重要载体.在无纸化办公日益兴盛的当下,数字名片逐渐被广大职场人士接受,成为商务交流的新方式.近期,合合信息旗下名片全能王与华为云WeLink联合研发,升级数字名片" ...
- JavaScript – Sort
前言 排序是很常见的需求. 虽然看似简单, 但其实暗藏杀机. 一不小心就会搞出 Bug 哦. 这篇就来聊聊 JS 的排序. 参考 原生JS数组sort()排序方法内部原理探究 值的比较 js中的loc ...
- Mybatis整合多数据源
背景 有时候我们需要查询来自多个库表的数据内容,但是又不想起多个服务,可以业务需要这些数据那该怎么办呢?那么其实Mybatis 是支持整合多数据源,并随时进行切换. 解决 引入依赖 首先引入dyn ...
- Web前端技术丛书代码下载
我是清华社编辑,这些下载资源供读者个人学习使用,禁止商用. IE/Chrome下载,或者微信扫描二维码,按提示发邮箱下载. 二维码用微信扫码,可填写邮箱,把链接转发邮箱下载. <微信小程序开发从 ...
- 好文分享 | 记一次Oracle12c数据库SQL短暂缓慢问题分析
本文为墨天轮社区作者 张sir 原创作品,记录了日常运维Oracle数据库过程中遇到的一个慢SQL问题的解决.优化过程,文章内容全面具体.分析到位,且含有经验总结,分享给各位. 问题现象 这次出问题的 ...
- Springboot --- 使用国内的 AI 大模型 对话
实在是不知道标题写什么了 可以在评论区给个建议哈哈哈哈 先用这个作为标题吧 尝试使用 国内给出的 AI 大模型做出一个 可以和 AI 对话的 网站出来 使用 智普AI 只能 在控制台中输出 对应的信息 ...
- "开源"是什么？为啥这么火？一定免费吗？
在科技快速发展的今天,"开源"一词频频出现在我们的视野中.究竟什么是开源?为何它能在技术圈引发如此热潮? 开源软件到底有什么魅力?它是如何改变软件开发和使用的方式的?开源软件是 ...
- 《大话设计模式》java实现：第一章-简单工厂模式
在<大话设计模式>中,示例代码使用C#实现,所以我这里使用Java实现一遍书中的设计模式. 第一章是使用简单工厂实现计算器. 遇到了一个问题:在Operation父类中,我们可以定义两个操 ...
- Marklogic学习 系列专栏整理
Marklogic学习 系列专栏整理 本人就是个松鼠怪,见到好东西都想收藏,在CSDN发现了这位博主写的一系列MarkLogic相关专栏觉得不错,今天已经看到第六个了,反正很好吃,趁着最近项目使用Ma ...
- c语言里关于本地变量的一些规则
关于块的定义(自己的理解):就是☞{ }这个区域里面的东西以及" {} "这个符号的本身 ·本地的变量是定义在块内的 -->>1.它可以定义在函数的块内 void sw ...