Que signifie le plug-in vue.js ?

Le plug-in vue.js est généralement utilisé pour ajouter des fonctions globales à Vue. La portée des fonctions du plug-in n'est pas strictement limitée. Pour utiliser le plug-in via la méthode globale [Vue.use(). )], vous devez appeler [new Vue( )】Complete avant de démarrer l'application.

[Recommandations d'articles connexes : vue.js]

Les plug-ins sont généralement utilisés pour ajouter globales à la fonction Vue. Il n'y a pas de restrictions strictes sur la portée fonctionnelle des plug-ins - il existe généralement les types suivants :

• Ajouter des méthodes ou des propriétés globales. Par exemple : vue-custom-element

• Ajouter des ressources globales : directives/filtres/transitions, etc. Par exemple, vue-touch

• ajoute certaines options de composants via un mixage global. Par exemple, vue-router

• ajoute des méthodes d'instance Vue en les ajoutant à Vue.prototype.

• Une bibliothèque qui fournit sa propre API tout en fournissant une ou plusieurs des fonctionnalités mentionnées ci-dessus. Par exemple, vue-router

utilise des plug-ins

utilise des plug-ins via la méthode globale Vue.use(). Il doit être complété avant d'appeler new Vue() pour démarrer l'application :

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
  // ...组件选项
})

Vous pouvez également transmettre un objet d'options facultatif :

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

Vue.use empêchera automatiquement les enregistrements multiples de le même plugin, alors le plug-in ne sera enregistré qu'une seule fois, même s'il est appelé plusieurs fois.

Certains plug-ins officiellement fournis par Vue.js (comme vue-router) appelleront automatiquement Vue.use() lorsqu'ils détecteront que Vue est une variable globale accessible. Cependant, dans un environnement de module comme CommonJS, vous devez toujours appeler Vue.use() explicitement :

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

awesome-vue possède une grande collection de plugins et de bibliothèques fournis par la communauté.

Développement de plug-ins

Les plug-ins Vue.js doivent exposer une méthode install. Le premier paramètre de cette méthode est le constructeur Vue, et le deuxième paramètre est un objet d'options facultatif :

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) {
    // 逻辑...
  }
}

Recommandations d'apprentissage gratuit associées : JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!