位置: IT常识 - 正文
推荐整理分享认识Vue扩展插件(vue安装插件),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:很全的vue插件汇总,赶紧收藏下,vuex插件,vuex插件,很全的vue插件汇总,赶紧收藏下,vue项目常用插件,vue的插件,vue 扩展,很全的vue插件汇总,赶紧收藏下,内容如对您有帮助,希望把文章链接给更多的朋友!
众所周知,在 Vue 开发中,实现一个功能可以有很多种方式可以选择,这依赖于 Vue 强大的功能(指令、混合、过滤、插件等),本文介绍一下插件的开发使用。
Vue 插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
添加全局方法或者 property。如:vue-custom-element
添加全局资源:指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
使用插件vue引入的插件,如 element , 都需要提供 install 方法,因为 Vue.use() 方法会调用插件里的 install 方法
import Vue from 'vue'import Element from 'element-ui'Vue.use(Element)全局组件类似的全局组件也是同样的做法,在 install 方法里面 进行 组件 注册
import ColorIconComponents from './iconColor.vue'const ColorIcon = { install: function (Vue) { Vue.component('ColorIcon', ColorIconComponents) }}export default ColorIcon绑定prototype数组对象等绑定自定义方法
// path: src/utils/customFn.jsexport default { install(Vue) { // 数组对象排序 asc-升序 des-降序 Array.prototype.sortListObjByKey = function (key, order = 'asc') { const that = this const comparefn = (obj1, obj2) => { if (order === 'asc') { return obj1[key] - obj2[key] } else { return obj2[key] - obj1[key] } } return that.sort(comparefn) } }}使用
// path: src/main.jsimport customFn from "./libs/customFn";Vue.use(customFn)开发插件范式来源
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) { // 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) { // 逻辑... }}???
? 持续更文,关注我,你会发现一个踏实努力的宝藏前端?,让我们一起学习,共同成长吧。
? 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 ?
? 欢迎大家评论交流, 蟹蟹?
上一篇:织梦DEDECMS教程:给图片加上自动编号(织梦cms要钱吗)
下一篇:phpcms如何调取栏目图片(phpcms采集教程)
友情链接: 武汉网站建设