Vue | 23 可用性组合 - 插件

news/2024/7/24 12:47:45 标签: vue, frontend technology, framwork

内容提要:

  1. 使用一个插件
  2. 如何写一个插件

插件常常为Vue添加全局级功能。插件没有严格定义的作用域 - 通常有几种类型的插件:

  1. 添加一些全局的方法或属性。例如: vue-custom-element
  2. 添加一个或多个全局资源:指令/过滤器/过渡 等等. 例如:vue-touch
  3. 通过全局mixin添加一些全局组件项。例如。vue-router
  4. 添加一些Vue实例方法,通过把他们添加到Vue.prototype上实现。
  5. 一个提供自有API的库,同时注入上面提到的一些功能的组合。例如:vue-router

使用一个插件

通过调用Vue.use()全局方法使用插件。做这个之前你需要通过new Vue()启动你的应用。

// calls 'MyPlugin.install(Vue)'
Vue.use(MyPlugin)

new Vue({
    // ... options
})

你也可以传入一些选项对象:

Vue.use(MyPlugin, { someOption:true })

Vue.use会自动阻止你使用相同的组件注册多次,所以当你调用相同的组件多次的时候只会安装一次。

如果Vue作为一个全局变量是可用的,那么通过Vue.js官方提供的插件将自动调用Vue.use(),例如vue-router,然而,例如在CommonJS的模块环境中,你总是需要显式的调用Vue.use():

// 当你通过Browserify 或 Webpack 使用CommonJS
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘记调用这个
Vue.use(VueRouter)

awesome-vue收集类大量社区贡献的插件和库。

写一个插件

一个Vue.js 插件应该提供一个install方法。这个方法的第一个参数是Vue的构造器。连同其他可能的操作:

MyPlugin.install = function (Vue, options) {
    // 1.增加一个全局方法或属性
    Vue.myGlobalMehtod = function () {
        // 一些逻辑...
    }
    
    // 添加一个全局资源
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldValue) {
            // 一些逻辑...
        }
    })
    
    // 3. 注入一些组件选项对象
    Vue.mixin({
        created: function () {
            // some logic ...
        }
        ...
    })
    
    // 4.添加一个实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // some logic ...
    }
}

http://www.niftyadmin.cn/n/1035755.html

相关文章

Linux Vscode+CMake+GCC/G++/Java 环境配置

目录一.C 配置环境二.Java 环境配置2.1 安装JDK在线安装离线安装2.2配置vscode在线配置离线配置一.C 配置环境 C 配置采用cmake g/gcc 方式 gcc/g 安装 sudo apt-get install gcc gcmake 安装 1.下载: https://cmake.org/download/ 网盘cmake1.9 https://share.…

Vue | 24 可用性组合 - 过滤器

Vue.js允许你去定义过滤器&#xff0c;可用于一些常见的文本格式化。过滤器在两个地方可以使用&#xff1a;双花括号插值和v-bind 表达式&#xff08;在2.1.0被支持&#xff09;。过滤器应该被加到JavaScript表达式的末尾&#xff0c;由管道符号表示&#xff1a; <!-- 在双…

SAP表的锁定与解锁

表的锁定模式有三种模式。 lock mode有三种模式:分别是S,E,X.含义如下&#xff1a; S (Shared lock, read lock) E (Exclusive lock, write lock) X (eXclusive lock, extended write lock, cannot be cumulated) 模式E&#xff1a;当更改数据的时候设…

Handler 讲解

目录1.Looper1.1 Looper源码及使用1.2 looper分步骤讲解1.2.1 looper创建1.2.2 创建MessageQueue以及Looper与当前线程的绑定1.2.3 Looper循环1.2.4 looper 退出1.2.5 Looper常用方法使用2. HandlerThread分析2.1 HandlerThread源码2.2 HandlerThread使用3.MessageQueue分析(单…

Vue | 25 工具 - 单文件组件

内容提要&#xff1a; 单文件组件的意义关于新手和高级用户如何使用单文件组件的建议 介绍 在一些Vue项目中&#xff0c;全局组件将使用Vue.component定义&#xff0c;而后通过new Vue&#xff08;{ el: #container }&#xff09;在页面内找到一个容器元素。 这在小型到中型的…

物料移动(MIGO/MB01等)更新物料凭证信息出口(user exit)

物料移动过程中&#xff0c;点击保存或其他提交按钮之后&#xff0c;进行物料凭证信息表&#xff08;MSEG,MKPF&#xff09;的更新,在这个节点需要进行一些操作&#xff0c;需要找到相应的user exit&#xff0c;实际测试user exit&#xff1a;MB_CF001&#xff08;->EXIT_SA…

反射原理及动态代理模式用法

知识点整理反射代理模式静态代理动态代理反射 了解反射用法&#xff1a; 反射一 反射二 练习 public class Servant {private int a;private String str;public Servant() {}public Servant(String string,int _a) {}public int getA() {return a;}public void setA(int a) {…

Vue | 26 工具 - 单元测试

主要内容&#xff1a; 简单的断言写可测试的组件断言的异步更新 Vue CLI已经为单元测试构建了操作项&#xff0c;使用Jest或Mocha开箱即用。我们也提供了官方的单元测试库Vue Test Utils,为自定义配置提供了更为细节的指导。 简单的断言 你不必为了组件的可测试性提供任何特殊…