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)效果
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix