首页 > 其他分享 >Vue插件

Vue插件

时间:2023-12-23 16:12:34浏览次数:35  
标签:插件 Vue binding value element plugins

功能:用于增强vue

本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。   定义插件(新建一个plugins.js文件):
export default {
    install(Vue,x,y,z){
        console.log(x,y,z)
        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        //定义全局指令
        Vue.directive('fbind',{
            //指令与元素成功绑定时(一上来)
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })

        //定义混入
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200
                }
            },
        })

        //给Vue原型上添加一个方法(vm和vc就都能用了)
        Vue.prototype.hello = ()=>{alert('你好啊')}
    }
}

 

引入和使用插件

//引入插件
import plugins from './plugins'

//使用插件
Vue.use(plugins,1,2,3)

 

 

 

 

 

标签:插件,Vue,binding,value,element,plugins
From: https://www.cnblogs.com/yucongblog/p/17923226.html

相关文章

  • Vite Components插件
    作用Components引于unplugin-vue-components,用于解决vue文件内无需手动引入组件,减少import的调用基本配置在vite配置文件中,作为插件使用import{defineConfig}from'vite'importComponentsfrom'unplugin-vue-components/vite'exportdefaultdefineConfig((mode)=......
  • 前端歌谣-第伍拾陆课-vue2-element组件封装el-button-groups(续)
    前言我是歌谣今天继续给大家带来el-button-groups(项目的讲解背景颜色属性color:style="item.color?{background:item.color,borderColor:item.color}:{}"btns:[{//按钮名称name:"歌谣",//按钮类型......
  • VUE框架底层源代码解读------VUE框架
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • IIS部署vue项目
    【第一步】安装IIS{1)打开控制面板->打开程序和功能->打开启用或关闭windows功能  (2)找到 InternetInformationServices勾选【web管理工具】和【万维网服务】,然后确定【第二步】安装URL重写模块1).安装URLRewrite,下载地址2).安装ApplicationRequestRouting,下......
  • 基于SpringBoot+Vue的文理医院预约挂号系统设计实现(源码+lw+部署文档+讲解等)
    (文章目录)前言:heartpulse:博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌:heartpulse:......
  • Vue学习计划-Vue2--VueCLi(八)vuex统一状态管理实现数据共享
    1.vuex是什么概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。这个怎么理解呢?可以暂时理解成全局事件总线、消息订阅与发布一样的道理,把vuex当成是外部的一个储存空间,......
  • typora的好用插件
    Typora是一款支持实时预览的Markdown文本编辑器。支持macOS,Windows及Linux/实时预览/图片与文字/代码块/数学公式/图表/目录大纲/文件管理/导入与导出。Typora推荐插件Typora的插件也蛮多的,这里推荐Vlook插件1、简介vlook是孟兆大佬开发的一个插件,V......
  • [插件使用] SwitchHosts自动更新Github Hosts文件
    作者:丶布布......
  • clang-format插件下载后不起作用(远程登录)
    1.下载clang-format先在服务器上下载clang-formatsudoaptinstall-yclang-format2.vscode中下载clang-format3.在与.vscode同文件夹下创建.clangformat#风格:Google,LLVM,Chromium,Mozilla,WebKit,Microsoft,GUNBasedOnStyle:Google#语言:None,Cpp,Jav......
  • 记录--Vue3问题:如何实现组件拖拽实时预览功能?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.需求分析实现一个CMS内容管理系统,在后台进行内容编辑,在官网更新展示内容。关于后台的编辑功能,大致分为两部分:组件拖拽预览、组件内容编辑实时预览。对于组件拖拽预览,用户可以在含有各种功能组件的列表中,选择......