Vue基础之plugins

最新推荐文章于 2024-03-06 18:00:00 发布

原创最新推荐文章于 2024-03-06 18:00:00 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue浅谈专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了Vue插件的目的与本质，主要讲解如何通过编写包含install方法的对象来创建插件，并详细阐述了如何配置全局过滤器、指令、混入和原型方法。通过实例展示了如何定义并使用这些增强Vue功能的方法，进一步提升Vue应用的开发效率和灵活性。

plugins

目的
本质
配置方法

目的

增强Vue

本质

包含install方法的一个对象，install的第一个参数是Vue，第二个以后参数是插件使用者传入的参数。

配置方法

可在用插件为Vue安装过滤器，指令，混入和原型方法。

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('你好啊')}
	}
}