美文网首页
开发vue全局插件的4种方式

开发vue全局插件的4种方式

作者: 山水一程2050 | 来源:发表于2017-11-01 17:08 被阅读0次

定义全局插件的步骤

1.定义全局插件 pluginsUtil.js
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

export default {
    install (Vue, options) {
        // 具体4种方式,写在此处
    }
}

2.main.js里引入并使用

import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)

3.组件内调用

vue全局插件的4种方式

1.Vue.mixin 方式
注册全局混合对象

        Vue.mixin({
            data () {
                return {
                    someValue1: 'some value1:mixin的data里的值'
                }
            }
        })

2.Vue.prototype 方式
定义 Vue 原型上的属性

        Vue.prototype.someValue2 = 'someValue2:Vue.prototype上的值'
        Vue.prototype.getDate = function () {
            let dateNew = new Date()
            return dateNew
        }

3.Vue.filter 方式
定义全局过滤器

        Vue.filter('vcntFormat', function (cnt) {
            return cnt >= 100000 ? Math.floor(cnt / 10000) + '万' : cnt
        })

4.Vue.directive 方式
定义全局自定义指令

        Vue.directive('myfocus', {
            // 当绑定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })

相关文章

  • plugin插件

    插件通常用来为 Vue 添加全局功能。 直接使用别人开发好的插件:Vue.use() 自己开发插件: Vue.js...

  • 从零开始的vue插件封装

    vue插件的封装方法。 插件开发 详情:插件开发 插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有...

  • Vue 插件

    插件,通常用来为Vue 添加全局功能。引用官方文档Vue插件 使用插件 通过全局方法Vue.user()使用插件。...

  • VUE复习笔记22(插件)

    开发插件 插件通常都会为 vue 添加全局的功能,插件的范围没有限制,一般有下面几种:1.添加全局的方法或者属性,...

  • jQuery插件开发结构

    开发jQuery插件的方式 可以通过两种方式开发jquery插件类级别方式:即给jquery命名空间下添加新的全局...

  • 开发vue全局插件的4种方式

    定义全局插件的步骤 1.定义全局插件 pluginsUtil.jsVue.js 的插件应当有一个公开方法 inst...

  • Vue 插件

    Vue 插件 插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种:添加全局方法或者属性,如:...

  • Vue实践与总结——插件

    插件 第三方组件对于Vue的功能扩展。如:Vuex(全局状态管理)、vue-router(全局路由管理) 插件引入...

  • Vue插件(一)添加全局方法或全局属性

    前言 Vue中添加插件最简单的方式,就是直接给Vue添加一个全局的静态方法或变量; 一个Vue项目中,Vue是唯一...

  • 插件

    插件通常会为 Vue 添加全局的功能

网友评论

      本文标题:开发vue全局插件的4种方式

      本文链接:https://www.haomeiwen.com/subject/ksugpxtx.html