Vue 插件介绍
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第2个以后的参数是插件使用者传递的数据。
1、定义插件:
对象.install = function(Vue,options){
//(1)添加全局过滤器
Vue.filter(...)
//(2)添加全局指令
Vue.directive(...)
//(3)配置全局混入(混合)
Vue.mixin(...)
//(4)添加实例方法
Vue.prototype.$myMethod = function(){...}
Vue.prototype.$myProperty = xxx
}
2、使用插件:Vue.use()
案例:
(1)定义插件
const obj = {
install(Vue){
console.log('@@@ install:'+Vue) //全局过滤器
Vue.filter("mySlice2",function(value){
return value.slice(0,5)
}) //全局自定义指令
Vue.directive("fbind-number",{
//指令与元素成功绑定时调用
bind(element,binding){
element.value = binding.value*10;
},
//指令所在元素被插入页面时调用
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时调用
update(element,binding){
element.value = binding.value*10;
}
}) //全局混入
Vue.mixin({
data(){
return{
x:100,
y:200
}
}
}) //全局方法(给Vue原型添加一个方法)
Vue.prototype.hello = ()=>{
alert("你好啊~")
} }
} export default obj
(2)在main.js 引入插件
//引入插件,应用插件
import plugins from "./plugins/plugins"
Vue.use(plugins)
(3)在组件中应用插件中的东西(过滤器、指令、方法、混入)
<template>
<div class="school">
<h3>学校名:{{SchoolName | mySlice2}}</h3> <!-- 插件中的过滤器 -->
<h3>学校地址:{{address}}</h3>
<input type="text" v-fbind-number="n"><br/> <!-- 插件中的指令 -->
<button @click="hello">点我测试hello方法</button> <!-- 插件中的方法 -->
</div>
</template> <script> export default {
name:"School",
data(){
return{
SchoolName:"尚硅谷123456789",
address:"北京昌平",
n:2
}
}, }
</script>
(4)效果
Vue 插件介绍的更多相关文章
- vue插件介绍
1.插件和组件的关系 在没有封装组件之前,如果不使用第三方插件,那么很多情况下我们会编写几个常用的组件来提供给页面使用,如Alert/Loading组件,而你可能需要在很多页面中引入并且通过compo ...
- vue插件编写与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- Vue插件plugins的基本操作
前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- vue插件 使用use注册Vue全局组件和全局指令
插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...
- 1-1 Vue的介绍
简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- Chrome 浏览器安装Vue插件方法 (十分详细)
博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...
- (尚001)Vue框架介绍
框架出现时间: Angular -->React(组件化+虚拟动) -->Vue(读作view) 1.Vue.js是什么?(作者:尤雨溪(一位华裔前Google工程师)) 尤 ...
随机推荐
- 如何自定义调整bootstrap的模态框大小
背景 项目遇到一个需求,一个大表格放到模态框中,总是会出现撑开的效果,换了文档最大的modal-lg样式还不能解决,原因就是官方不支持更大号的模态框,需要自定义. 经过尝试理解,总结出调整模态框大小通 ...
- 详解kubernetes五种暴露服务的方式
部署完服务终将是为了访问,那么kubernetes中service和ingress都可以将集群内部的服务能够支持外部访问.service可以让一组 Pod(称为"后端")为集群内的 ...
- SOFAJRaft模块启动过程
本篇文章旨在分析SOFAJRaft中jraft-example模块的启动过程,由于SOFAJRaft在持续开源的过程中,所以无法保证示例代码永远是最新的,要是源代码有较大的变动,亦或出现纰漏.错误的地 ...
- 02安装一个最小化的Hadoop
安装一个最小化的Hadoop 为了学习HDFS和之后的MapReduce,我们需要安装一个Hadoop. Hadoop一共有3种运行模式 独立模式:不启动守护进程,所有程序运行在一个JVM进程中.独立 ...
- SpringBoot项目动态定时任务之 ScheduledTaskRegistrar(解决方案一)
前言 在做SpringBoot项目的过程中,有时客户会提出按照指定时间执行一次业务的需求. 如果客户需要改动业务的执行时间,即动态地调整定时任务的执行时间,那么可以采用SpringBoot自带 ...
- 【分析笔记】Linux tasklet 机制的理解
Tasklet 介绍 Linux 内核提供的四种中断下半部中 softirq(软中断).tasklet(小任务).workqueue(工作队列) .request thread(中断线程)中的其中一种 ...
- 多线程之Semaphore登录限流示例
public static void main(String[] args) { //允许最大的登录数 int slots=10; ExecutorService executorService = ...
- day07-SpringMVC底层机制简单实现-03
SpringMVC底层机制简单实现-03 https://github.com/liyuelian/springmvc-demo.git 7.任务6-完成控制器方法获取参数-@RequestParam ...
- .NET遍历二维数组-先行/先列哪个更快?
上周在.NET性能优化群里面有一个很有意思的讨论,讨论的问题如下所示: 请教大佬:2D数组,用C#先遍历行再遍历列,或者先遍历列再遍历行,两种方式在性能上有区别吗? 据我所知,Julia或者pytho ...
- Vue17 手机表单数据
1)v-model.trim trim修饰符是去掉前后空格 2)type="number" v-model.number type="number":只能输入数 ...