美文网首页
Vue插件(一)添加全局方法或全局属性

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

作者: fanren | 来源:发表于2022-07-18 14:40 被阅读0次

前言

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

一个Vue项目中,Vue是唯一的,那么给Vue添加的静态方法或变量也是唯一的,并且可以被任何Vue组件使用;

一、创建一个插件

  • 创建一个DateFormatter.js文件
    组件内部实现代码:
import moment from 'moment'
export default function dateFormat(date, format) {
    return moment(date).format(format)
}

二、引入插件

  • main.js文件中,引入插件
import dateFormat from './DateFormatter.js'
Vue.dateFormat = dateFormat;
  • 使用Vue.全局方法,可以给Vue添加全局的方法

三、使用插件

  • 使用插件
<script>
import Vue from 'vue'
export default {
  name: 'App',
  data() {
    return {
      date: new Date
    }
  },
  computed: {
    currentDate() {
      // 调用插件
      return Vue.dateFormat(this.date, 'YYYY-MM')
    }
  }
}
</script>
  • 使用Vue.全局方法(),可以直接调用全局方法;

使用该方法的前提是引入Vue文件import Vue from 'vue'

四、缺陷

使用全局方法的方式,可以给Vue添加插件,但是在使用的时候,必须每次都需要引入Vue文件(import Vue from 'vue'),使用起来还是比较繁琐的。
为了简化上一步,我们可以给Vue添加全局的实例方法。> 在纯Vue项目中,

相关文章

  • vue插件学习

    vue的插件通常是用来添加全局功能, 插件按功能分一般有: 1、添加全局方法或属性 2、添加全局属性:指令、过滤器...

  • Vue 插件开发指南

    Vue插件的编写方法一般有下面几种: 添加全局方法或者属性,如: vue-custom-element 添加全局资...

  • Vue.use 详解

    一,基本用法 插件通常为 Vue 来添加全局功能。而插件的应用范围没有明确规定,一般包括:添加全局方法或属性。例如...

  • Vue 插件

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

  • 24. 插件

    插件通常为vue添加全局功能,一般有以下几种: 添加全局方法或者属性 添加全局资源——指令,过滤器,过渡等等 通过...

  • Vue 插件及Vue.use源码分析

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

  • VUE复习笔记22(插件)

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

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

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

  • vue插件

    插件的意义 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或...

  • Vue 插件

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

网友评论

      本文标题:Vue插件(一)添加全局方法或全局属性

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