You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

API

Configuration globale

Vue.config est un objet contenant les configurations globales de Vue. Vous pouvez modifier les propriétés listées ci-dessous avant de mettre en place votre application :

silent

• Type : boolean

• Par défaut : false

• Utilisation :

  Vue.config.silent = true

  Supprime tous les logs et warnings de Vue.js.

optionMergeStrategies

• Type : { [key: string]: Function }

• Par défaut : {}

• Utilisation :

  Vue.config.optionMergeStrategies._mon_option = function (parent, enfant, vm) { return enfant + 1 } const Profil = Vue.extend({ _mon_option: 1 }) // Profil.options._mon_option = 2

  Définit des stratégies personnalisées de fusion pour les options.

  La stratégie de fusion reçoit en arguments la valeur de cette option définie dans le parent et les instances enfants en tant que premier et second argument, respectivement. L’instance de Vue est passée en troisième argument.

• Voir aussi : Stratégie de fusion des options personnalisées

devtools

• Type : boolean

• Par défaut : true (false dans les versions de production)

• Utilisation :

  // assurez-vous d'assigner ça de manière synchrone immédiatement après avoir chargé Vue Vue.config.devtools = true

  Autorise ou non l’inspection des vue-devtools. Cette option a comme valeur par défaut true dans les versions de développement et false dans les versions de production. Vous pouvez l’assigner à true pour activer l’inspection avec les versions de production.

errorHandler

• Type : Function

• Par défaut : undefined

• Utilisation :

  Vue.config.errorHandler = function (err, vm, info) { // gérer le cas d'erreur `info` est une information spécifique // à Vue sur l'erreur, par exemple dans quel hook du cycle de vie // l'erreur a été trouvée. Disponible uniquement en 2.2.0+ }

  Définit un gestionnaire pour les erreurs non interceptées pendant le rendu d’un composant et les appels aux observateurs. Ce gestionnaire sera appelé avec comme arguments l’erreur et l’instance de Vue associée.

  En 2.2.0+, ce hook capture également les erreurs dans les hooks du cycle de vie des composants. De plus, quand ce hook est undefined, les erreurs capturées seront loguées avec console.error plutôt qu’avoir un crash de l’application.

  En 2.4.0+ ce hook capture également les erreurs lancées depuis un gestionnaire d’évènement Vue personnalisé.

  En 2.6.0+, ce hook capture également les erreurs lancées depuis les écouteurs de DOM v-on. De plus, si les hooks couverts ou gestionnaires retournent une chaine de Promesse (par exemple les fonctions async), l’erreur sera également remontée depuis cette Promesse.

  Sentry et Bugsnag fournissent une intégration officielle utilisant cette option.

warnHandler

Nouveau dans la 2.4.0+

• Type : Function

• *Par défaut : undefined

• Utilisation :

  Vue.config.warnHandler = function (msg, vm, trace) { // `trace` est la trace de hiérarchie de composant }

  Assigne un gestionnaire personnalisé pour les avertissements à l’exécution de Vue. Notez que cela n’est fonctionnel qu’en développement et est ignoré en production.

ignoredElements

• Type : Array<string | RegExp>

• Par défaut : []

• Utilisation :

  Vue.config.ignoredElements = [ 'mon-web-component', 'un-autre-web-component', // Utilisez une `RegExp` pour ignorer tous les éléments qui commencent par « ion- » // 2.5+ seulement /^ion-/ ]

  Indique à Vue d’ignorer les éléments personnalisés définis en dehors de Vue (ex. : en utilisant les API Web Components). Autrement, un message d’avertissement Unknown custom element sera affiché, supposant que vous avez oublié d’inscrire un composant global ou fait une faute de frappe dans son nom.

keyCodes

• Type : { [key: string]: number | Array<number> }

• Par défaut : {}

• Utilisation :

  Vue.config.keyCodes = { v: 86, f1: 112, // La camelCase ne marche pas mediaPlayPause: 179, // à la place vous devez utiliser la kebab-case avec des guillemets doubles "media-play-pause": 179, up: [38, 87] }

  <input type="text" @keyup.media-play-pause="method">

  Définit des alias pour les touches avec v-on.

performance

Nouveau dans la 2.2.0+

• Type : boolean

• Par défaut : false (à partir de la 2.2.3+)

• Utilisation :

  Assignez ceci à true pour activer le suivi des performances pour l’initialisation, la compilation, le rendu et la mise à jour des composants dans la timeline des outils développeur des navigateurs. Fonctionne uniquement en mode développement et dans les navigateurs supportant l’API performance.mark.

productionTip

Nouveau dans la 2.2.0+

• Type : boolean

• Par défaut : true

• Utilisation :

  Assignez ceci à false pour ne plus avoir la notification de production au démarrage de Vue.

API globale

Vue.extend( options )

• Arguments :

  • {Object} options

• Utilisation :

  Crée une « sous-classe » du constructeur de base Vue. L’argument doit être un objet contenant les options du composant.

  Le cas spécial à noter ici est l’option data - il doit s’agir d’une fonction quand utilisé avec Vue.extend().

  <div id="point-de-montage"></div>

  // crée un constructeur réutilisable var Profil = Vue.extend({ template: '<p>{{prenom}} {{nom}} alias {{alias}}</p>', data: function () { return { prenom: 'Walter', nom: 'White', alias: 'Heisenberg' } } }) // crée une instance de Profil et la monte sur un élément new Profil().$mount('#point-de-montage')

  Cela donnera comme résultat :

  <p>Walter White aka Heisenberg</p>

• Voir aussi : Composants

Vue.nextTick( [callback, contexte] )

• Arguments :

  • {Function} [callback]
  • {Object} [contexte]

• Utilisation :

  Reporte l’exécution de la fonction de rappel au prochain cycle de mise à jour du DOM. Utilisez-le immédiatement après avoir changé des données afin d’attendre la mise à jour du DOM.

  // modification de données vm.msg = 'Salut' // le DOM n'a pas encore été mis à jour Vue.nextTick(function () { // le DOM est à jour }) // utilisation en tant que promesse (2.1.0+, voir la note ci-dessous) Vue.nextTick() .then(function () { // le DOM est à jour })

  Nouveauté de la 2.1.0+ : retourne une promesse si aucune fonction de rappel n’est fournie et si les promesses sont supportées par l’environnement d’exécution. Notez que Vue ne fournit pas de polyfill aux promesses. Aussi, si vous ciblez des navigateurs qui ne supportent pas les promesses nativement (on parle de toi, IE), vous pouvez fournir un polyfill vous-même.

• Voir aussi : File d’attente de mise à jour asynchrone

Vue.set( cible, nomDePropriete/index, valeur )

• Arguments :

  • {Object | Array} cible
  • {string | number} nomDePropriete/index
  • {any} valeur

• Retourne: la valeur assignée.

• Utilisation :

  Assigne une propriété à un objet réactif, s’assurant que la nouvelle propriété soit également réactive de manière à déclencher une nouvelle mise à jour de la vue. Ceci doit être utilisé pour les nouvelles propriétés d’objets réactifs car Vue ne peut pas détecter normalement les ajouts de propriétés (par ex. this.myObject.newProperty = 'bonjour').

  L’objet ne peut pas être une instance de Vue, ou l’objet de données à la racine d’une instance de Vue.

• Voir aussi : Réactivité en détail

Vue.delete( cible, nomDePropriete/index )

• Arguments :

  • {Object | Array} cible
  • {string | number} nomDePropriete/index

  Seulement dans la 2.2.0+ : fonctionne aussi avec Array + index.

• Utilisation :

  Supprime une propriété d’un objet cible. Si l’objet est réactif, cette méthode s’assure que la suppression déclenche les mises à jour de la vue. Ceci est principalement utilisé pour passer outre la limitation de Vue qui est de ne pas pouvoir détecter automatiquement la suppression de propriétés, mais vous devriez rarement en avoir besoin.

  L’objet cible ne peut pas être une instance de Vue, ou l’objet de données à la racine d’une instance de Vue.

• Voir aussi : Réactivité en détail

Vue.directive( id, [définition] )

• Arguments :

  • {string} id
  • {Function | Object} [définition]

• Utilisation :

  Inscrit ou récupère une directive globale.

  // inscrit une directive Vue.directive('ma-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) // inscription (directive comme simple fonction) Vue.directive('ma-directive', function () { // cette fonction sera appelée comme `bind` et `update` ci-dessus }) // accesseur, retourne la définition de la directive si inscrite var maDirective = Vue.directive('ma-directive')

• Voir aussi : Directives personnalisées

Vue.filter( id, [définition] )

• Arguments :

  • {string} id
  • {Function} [définition]

• Utilisation :

  Inscrit ou récupère un filtre global.

  // inscrit un filtre Vue.filter('mon-filtre', function (value) { // retourne la valeur modifiée }) // accesseur, retourne le filtre si inscrit var monFiltre = Vue.filter('mon-filtre')

• Voir aussi : Filtres

Vue.component( id, [définition] )

• Arguments :

  • {string} id
  • {Function | Object} [définition]

• Utilisation :

  Inscrit ou récupère un composant global. L’inscription assigne aussi automatiquement la propriété name du composant au paramètre id donné.

  // inscrit un constructeur étendu Vue.component('mon-composant', Vue.extend({ /* ... */ })) // inscrit un composant avec un objet options (appelle automatiquement Vue.extend) Vue.component('mon-composant', { /* ... */ }) // récupère un composant inscrit (retourne toujours le constructeur) var MonComposant = Vue.component('mon-composant')

• Voir aussi : Composants

Vue.use( plugin )

• Arguments :

  • {Object | Function} plugin

• Utilisation :

  Cette méthode doit être appelée avant d’appeler new Vue()

  Installe un plugin Vue.js. Si l’argument plugin est de type Object, il doit exposer une méthode install. S’il s’agit d’une fonction, elle sera utilisée comme méthode d’installation. Cette méthode d’installation sera appelée avec Vue en tant qu’argument.

  Quand cette méthode est appelée avec le même plugin plusieurs fois, le plugin ne sera installé qu’une seule fois.

• Voir aussi : Plugins

Vue.mixin( mixin )

• Arguments :

  • {Object} mixin

• Utilisation :

  Applique une mixin globale, qui affecte toutes les instances de Vue créées par la suite. Cela peut être utilisé par les créateurs de plugins pour injecter un composant personnalisé dans les composants. Non recommandé dans le code applicatif.

• Voir aussi : Mixin global

Vue.compile( template )

• Arguments :

  • {string} template

• Utilisation :

  Compile une string template en une fonction de rendu. Disponible uniquement sur la version complète.

  var res = Vue.compile('<div><span>{{ msg }}</span></div>') new Vue({ data: { msg: 'salut' }, render: res.render, staticRenderFns: res.staticRenderFns })

• Voir aussi : Fonctions de rendu

Vue.observable( object )

Nouveau en 2.6.0+

• Arguments :

  • {Object} object

• Utilisation :

  Rend un objet réactif. En interne, Vue l’utilise sur l’objet retourné par la fonction data.

  L’objet retourné peut être directement utilisé à l’intérieur des fonctions de rendu ainsi que des propriétés calculées. Il déclenchera les mises à jour appropriées lors de mutations. Il peut également être utilisé comme un store minimal intercomposant dans des scénarios basiques :

  const state = Vue.observable({ count: 0 }) const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `le compteur est : ${state.count}`) } }

  Dans Vue 2.x, Vue.observable mute directement l’objet qui lui est transmis, de sorte qu’il soit équivalent à l’objet renvoyé, comme démontré ici. Dans Vue 3.x, un proxy réactif sera retourné à la place, laissant l’objet original non réactif s’il est muté directement. Cependant, pour de futures compatibilités, nous recommandons toujours de travailler avec l’objet retourné par Vue.observable, au lieu de l’objet originel.

• Voir aussi : Réactivité en détail

Vue.version

• Détails : donne la version de Vue installée sous forme de String. C’est particulièrement utile pour les plugins et les composants de la communauté, où vous pouvez être amenés à utiliser différentes stratégies pour différentes versions.

• Utilisation :

  var version = Number(Vue.version.split('.')[0]) if (version === 2) { // Vue v2.x.x } else if (version === 1) { // Vue v1.x.x } else { // Versions non supportées de Vue }

Options / Data

data

• Type : Object | Function

• Restriction : accepte uniquement une fonction lorsqu’utilisé dans une définition de composant.

• Détails :

  L’objet de données pour l’instance de Vue. Vue va de manière récursive convertir ses propriétés en des accesseurs / mutateurs (getter/setters) afin de les rendre « réactives ». L’objet doit être un simple objet de base: les objets natifs tels que les API du navigateur et les propriétés issues du prototype sont ignorées. Une règle d’or est que la donnée doit juste être de la donnée. Il n’est pas recommandé d’observer des objets ayant leur propre comportement avec états.

  Une fois observé, vous ne pouvez plus ajouter de propriétés réactives à l’objet de données racine. C’est pourquoi il est recommandé de déclarer dès le départ toutes les propriétés réactives à la racine de l’objet de données, avant de créer l’instance.

  Après que l’instance a été créée, l’objet de données initial peut être accédé via vm.$data. L’instance de Vue servira également de proxy pour toutes les propriétés trouvées dans l’objet de données, donc vm.a sera l’équivalent de vm.$data.a.

  Les propriétés commençant par _ ou $ ne seront pas proxyfiées par l’instance de Vue car elles pourraient entrer en conflit avec certaines propriétés internes et méthodes d’API de Vue. Vous devrez y accéder via vm.$data._propriete.

  Lors de la définition d’un composant, la propriété data doit être déclarée en tant que fonction retournant l’objet de données initial, car il y aura plusieurs instances créées utilisant la même définition. Si nous utilisons un objet classique pour data, le même objet sera partagé par référence à toutes les instances créées ! En fournissant une fonction data , chaque fois qu’une nouvelle instance est créée, nous l’appelons simplement afin de récupérer une copie fraiche des données initiales.

  Si nécessaire, un clone profond de l’objet original peut être obtenu en passant vm.$data à travers JSON.parse(JSON.stringify(...)).

• Exemple :

  var data = { a: 1 } // création directe d'instances var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true // data doit être une fonction lorsqu'utilisée dans Vue.extend() var Composant = Vue.extend({ data: function () { return { a: 1 } } })

  Notez que si vous utilisez la fonctions fléchées avec la propriété data, this ne sera plus l’instance du composant, mais vous pouvez toujours la récupérer en tant que premier argument de la fonction :

  data: vm => ({ a: vm.myProp })

• Voir aussi : Réactivité en détail

props

• Type : Array<string> | Object

• Détails :

  Une liste ou un objet décrivant les attributs exposés par le composant afin de passer des données depuis le composant parent. Ce paramètre a une syntaxe simple basée sur un tableau (Array) et une syntaxe alternative basée sur un objet (Object) qui permet une configuration avancée telle qu’une vérification de typage, des contrôles de validation personnalisés et des valeurs par défaut.

  Avec la syntaxe objet, vous pouvez passer les options suivantes :

  • Le type peut être l’un des constructeurs natifs suivants : String, Number, Boolean, Array, Object, Date, Function, Symbol ainsi que n’importe quelle fonction de construction ou tableau de ces types. Les types des props seront vérifiés. Un avertissement sera fourni si une prop n’est pas du bon type. Plus d’information sur les types des props.
  • default: any
    Spécifie la valeur par défaut de la prop. Si la prop n’est pas passée, cette valeur sera utilisée à la place. Les objets ou tableaux par défaut doivent être retournés depuis une fonction de fabrique.
  • required: Boolean
    Définie si la prop est requise. Dans un environnement autre que de production, un avertissement sera affiché dans la console si cette valeur est évaluée à vrai et que la prop n’est pas passée.
  • validator: Function
    Une fonction de validation personnalisée qui prend la valeur de prop comme seul argument. Dans un environnement autre que de production, un avertissement sera affiché dans la console si cette fonction retourne une valeur évaluée à faux. (c.-à-d. que la validation a échoué). Vous pouvez en lire plus à propos de la validation des props ici.

• Exemple :

  // syntaxe simple Vue.component('props-démo-simple', { props: ['taille', 'monMessage'] }) // syntaxe avancée avec validation Vue.component('props-démo-avancée', { props: { // juste une vérification de type hauteur: Number, // vérification du type ainsi que d'autres validations âge: { type : Number, default: 0, required: true, validator: function (valeur) { return valeur >= 0 } } } })

• Voir aussi : Props

propsData

• Type : { [key: string]: any }

• Restriction : utilisé uniquement si l’instance est créée via new.

• Détails :

  Passe des valeurs d’attribut à l’instance durant sa création. Cette propriété a pour but principal de faciliter les tests unitaires.

• Exemple :

  var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'salut' } })

computed

• Type : { [key: string]: Function | { get: Function, set: Function } }

• Détails :

  Les propriétés calculées qui seront ajoutées à l’instance de Vue. Tous les accesseurs (« getters ») et mutateurs (« setters ») ont leur contexte this automatiquement lié à l’instance de Vue.

  Notez que si vous utilisez la fonctions fléchées avec la propriété data, this ne sera plus l’instance du composant, mais vous pouvez toujours la récupérer en tant que premier argument de la fonction :

  computed: { aDouble: vm => vm.a * 2 }

  Les propriétés calculées sont mises en cache, et réévaluées uniquement lorsque leurs dépendances réactives changent. Notez que si une certaine dépendance est en dehors de la portée de l’instance (et donc non réactive), la propriété calculée ne sera pas mise à jour.

• Exemple :

  var vm = new Vue({ data: { a: 1 }, computed: { // accesseur uniquement aDouble: function () { return this.a * 2 }, // accesseur et mutateur à la fois aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // => 2 vm.aPlus = 3 vm.a // => 2 vm.aDouble // => 4

• Voir aussi : Propriétés calculées

methods

• Type : { [key: string]: Function }

• Détails :

  Les méthodes qui seront ajoutées à l’instance de Vue. Vous pouvez accéder à ces méthodes directement depuis l’instance VM ou les utiliser à travers des expressions de directives. Toutes les méthodes ont leur contexte d’appel this automatiquement assigné à l’instance de Vue.

  Notez que vous ne devriez pas utiliser de fonctions fléchées pour définir une méthode (exemple: plus: () => this.a++). La raison est que les fonctions fléchées sont liées au contexte parent, donc this ne correspondra pas à l’instance de Vue et this.a vaudra undefined.

• Exemple :

  var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2

• Voir aussi : Gestion des évènements

watch

• Type : { [key: string]: string | Function | Object | Array }

• Détails :

  Un objet où les clés sont des expressions à surveiller et où la valeur associée est la fonction de rappel exécutée quand cette expression change. On parle alors d’observateur ou watcher pour décrire ce lien. La valeur peut également être une String correspondant au nom d’une méthode de l’instance, ou un objet avec des options avancées. L’instance de Vue appellera $watch() pour chaque clé de l’objet à l’initialisation.

• Exemple :

  var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (valeur, ancienneValeur) { console.log('nouveau: %s, ancien: %s', valeur, ancienneValeur) }, // nom d'une méthode b: 'uneMéthode', // la fonction de rappel sera appelée quelque soit les changements des propriétés de l'objet observé indépendamment de leur profondeur c: { handler: function (valeur, ancienneValeur) { /* ... */ }, deep: true }, // la fonction de rappel va être appelée immédiatement après le début de l'observation d: { handler: 'uneMéthode', immediate: true }, // vous pouvez passer un tableau de fonctions de rappel, elles seront appelées une par une e: [ 'handle1', function handle2 (valeur, ancienneValeur) { /* ... */ }, { handler: function handle3 (valeur, ancienneValeur) { /* ... */ }, /* ... */ } ], // observe la valeur de `vm.e.f` : `{g: 5}` 'e.f': function (valeur, ancienneValeur) { /* ... */ } } }) vm.a = 2 // => nouveau : 2, ancien : 1

  Notez que vous ne devriez pas utiliser de fonctions fléchées pour définir un observateur (exemple: saisie: nouvelleValeur => this.actualiserSuggestions(nouvelleValeur)). La raison est que les fonctions fléchées sont liées au contexte parent, donc this ne correspondra pas à l’instance de Vue et this.actualiserSuggestions vaudra undefined.

• Voir aussi : Méthodes et données d’instance - vm.$watch

Options / DOM

el

• Type : string | Element

• Restriction : uniquement respecté quand l’instance est créée via new.

• Détails :

  Fournit à l’instance de Vue un élément existant du DOM sur lequel se monter. Cela peut être une String représentant un sélecteur CSS ou une référence à un HTMLElement.

  Une fois l’instance montée, l’élément correspondant sera accessible via vm.$el.

  Si cette option est disponible à l’instanciation, l’instance sera immédiatement compilée; sinon, l’utilisateur devra explicitement appeler vm.$mount() pour démarrer manuellement la compilation.

  L’élément fourni sert seulement de point de montage. Contrairement à Vue 1.x, l’élément monté sera remplacé par le DOM généré par Vue dans tous les cas. C’est pourquoi il n’est pas recommandé de monter l’instance racine sur <html> ou <body>.

  Si ni la fonction render ni l’option template ne sont présentes, le code HTML de l’élément du DOM sur lequel le composant est monté sera extrait et défini comme template de ce composant. Dans ce cas, la version “Runtime + Compilateur” de Vue doit être utilisée.

• Voir aussi :

  • Diagramme du cycle de vie
  • Runtime + Compiler vs. Runtime seul

template

• Type : string

• Détails :

  Un template sous forme de chaine de caractères qui sera utilisé comme balisage HTML pour l’instance de Vue. Le template viendra remplacer l’élément monté. Tout code HTML existant à l’intérieur de l’élément monté sera ignoré, à moins que des emplacements de distribution de contenu (slots) soient présents dans le template.

  Si la chaine de caractères commence par #, elle sera évaluée comme querySelector et le innerHTML de l’élément sélectionné sera utilisé comme template. Cela permet d’utiliser l’astuce du <script type="x-template"> pour inclure des templates.

  D’un point de vue sécurité, vous devriez uniquement utiliser des templates Vue auxquels vous pouvez faire confiance. N’utilisez jamais du contenu généré côté utilisateur comme template.

  Si la fonction render est présente comme option de l’instance de Vue, le template sera ignoré.

• Voir aussi :

  • Diagramme du cycle de vie
  • Distribution de contenu avec des slots

render

• Type : (createElement: () => VNode) => VNode

• Détails :

  Une alternative aux templates en chaine de caractères vous permettant d’exploiter toute la puissance programmatique de JavaScript. La fonction de rendu render reçoit une méthode createElement comme premier argument servant à créer des VNodes.

  Si le composant est un composant fonctionnel, la fonction render recevra aussi un argument supplémentaire context, qui donne accès aux données contextuelles puisque les composants fonctionnels sont sans instance.

  La fonction render a la priorité par rapport à la fonction de rendu compilée à partir de l’option template, ou par rapport au template HTML de l’élément d’ancrage dans le DOM qui est spécifié par l’option el.

• Voir aussi : Fonctions de rendu

renderError

Nouveau dans la 2.2.0+

• Type : (createElement: () => VNode, error: Error) => VNode

• Détails :

  Fonctionne uniquement en mode développement.

  Fournit un rendu alternatif en sortie quand la fonction render par défaut rencontre une erreur. L’erreur sera passée à renderError comme second argument. C’est particulièrement appréciable quand utilisé conjointement avec du rechargement à chaud (hot-reload).

• Exemple :

  new Vue({ render (h) { throw new Error('oups') }, renderError (h, err) { return h('pre', { style: { color: 'red' }}, err.stack) } }).$mount('#app')

• Voir aussi : Fonctions de rendu

Options / Cycle de vie des hooks

Tous les hooks du cycle de vie ont automatiquement leur contexte this rattaché à l’instance, afin que vous puissiez accéder aux données, propriétés calculées et méthodes. Cela signifie que vous ne devriez pas utiliser une fonction fléchée pour définir une méthode du cycle de vie (p. ex. created: () => this.fetchTodos()). La raison est que les fonctions fléchées utilisent le contexte parent, donc this ne sera pas l’instance de Vue comme vous pouvez vous y attendre et this.fetchTodos sera undefined.

beforeCreate

• Type : Function

• Détails :

  Appelé de manière synchrone juste après que l’instance a été initialisée, et avant l’observation des données et l’installation des évènements / observateurs.

• Voir aussi : Diagramme du cycle de vie

created

• Type : Function

• Détails :

  Appelé de manière synchrone après que l’instance a été créée. À ce stade, l’instance a fini de traiter les options, ce qui signifie que les éléments suivants ont été installés: observation des données, propriétés calculées, méthodes, fonctions de retour des observateurs et évènements. Cependant, la propriété $el n’est pas encore disponible.

• Voir aussi : Diagramme du cycle de vie

beforeMount

• Type : Function

• Détails :

  Appelé juste avant que le montage commence: la fonction render est sur le point d’être appelée pour la première fois.

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi : Diagramme du cycle de vie

mounted

• Type : Function

• Détails :

  Appelé juste après que l’instance a été montée, là où el est remplacé par le nouvellement créé vm.$el. Si l’instance à la racine est montée sur un élément du document, alors vm.$el sera aussi dans le document quand mounted est appelé.

  Notez que mounted ne garantit pas que tous les composants aient été montés. Si vous souhaitez attendre jusqu’à ce que le rendu de la vue entière ait été fait, vous pouvez utiliser vm.$nextTick à l’intérieur de mounted :

  mounted: function () { this.$nextTick(function () { // Ce code va être exécuté seulement // une fois le rendu de la vue entière terminé }) }

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi : Diagramme du cycle de vie

beforeUpdate

• Type : Function

• Détails :

  Appelé quand les données changent, avant le patch du DOM virtuel. C’est le bon endroit pour accéder au DOM existant avant la mise à jour, par ex. pour retirer manuellement des écouteurs d’évènement.

  Ce hook n’est pas appelé durant le rendu côté serveur car seul le rendu initial est généré côté serveur.

• Voir aussi : Diagramme du cycle de vie

updated

• Type : Function

• Détails :

  Appelé après qu’un changement d’une donnée ait causé un nouveau rendu et patch du DOM virtuel.

  Le DOM du composant aura été mis à jour quand ce hook est appelé, donc vous pouvez effectuer des opérations dépendantes du DOM ici. Cependant, dans la plupart des cas, vous devriez éviter de changer l’état dans ce hook. Pour réagir à des changements d’état, il vaut généralement mieux utiliser une propriété calculée ou un observateur à la place.

  Notez que updated ne garantit pas que tous les composants aient été montés. Si vous souhaitez attendre jusqu’à ce que le rendu de la vue entière ait été fait, vous pouvez utiliser vm.$nextTick à l’intérieur de updated :

  updated: function () { this.$nextTick(function () { // Ce code va être exécuté seulement // une fois le rendu de la vue entière terminé }) }

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi : Diagramme du cycle de vie

activated

• Type : Function

• Détails :

  Appelé quand un composant gardé en vie (keep-alive) est activé.

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi :

  • Composants intégrés par défaut - keep-alive
  • Composants dynamiques - keep-alive

deactivated

• Type : Function

• Détails :

  Appelé quand un composant gardé en vie (keep-alive) est désactivé.

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi :

  • Composants intégrés par défaut - keep-alive
  • Composants dynamiques - keep-alive

beforeDestroy

• Type : Function

• Détails :

  Appelé juste avant qu’une instance de Vue ne soit détruite. À ce stade, l’instance est toujours pleinement fonctionnelle.

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi : Diagramme du cycle de vie

destroyed

• Type : Function

• Détails :

  Appelé après qu’une instance de Vue ait été détruite. Quand ce hook est appelé, toutes les directives de l’instance de Vue ont été détachées, tous les écouteurs d’évènements ont été supprimés et toutes les instances de Vue enfants ont également été détruites.

  Ce hook n’est pas appelé durant le rendu côté serveur.

• Voir aussi : Diagramme du cycle de vie

errorCaptured

Nouveau dans la 2.5.0+

• Type : (err: Error, vm: Component, info: string) => ?boolean

• Détails :

  Appelé quand une erreur provenant de n’importe quel composant enfant est capturée. Le hook reçoit trois arguments : l’erreur, l’instance du composant qui a déclenché l’erreur et une chaine de caractères contenant des informations sur l’endroit où l’erreur a été capturée. Le hook peut retourner false pour arrêter la propagation de l’erreur.

  Vous pouvez modifier l’état du composant dans ce hook. Il est cependant important d’avoir une condition dans votre template ou fonction de rendu qui court-circuite les autres composants quand une erreur est capturée. Autrement le composant va partir dans une boucle de rendu infinie.

  Règles de propagation d’erreur

  • Par défaut, toutes les erreurs sont toujours envoyées à l’objet global config.errorHandler s’il est défini. Donc ces erreurs peuvent toujours être reportées à un service d’analyse centralisé.

  • Si des hooks errorCaptured multiples existent sur une chaine de composant hérité ou sur une chaine parente, toutes seront invoquées avec la même erreur.

  • Si le hook errorCaptured renvoie lui-même une erreur, l’erreur originalement capturée et l’erreur courante seront toutes deux envoyées au config.errorHandler global.

  • Un hook errorCaptured peut retourner false pour empêcher la propagation de l’erreur vers le haut. Il est essentiel d’indiquer que « cette erreur a été traitée et doit être ignorée ». Cela empèchera n’importe quel hook errorCaptured supplémentaire ou le config.errorHandler d’être invoqué par cette erreur.

Options / Ressources

directives

• Type : Object

• Détails :

  Un objet de mappage des directives à mettre à disposition de l’instance de Vue.

• Voir aussi : Directives personnalisées

filters

• Type : Object

• Détails :

  Un objet de mappage des filtres à mettre à disposition de l’instance de Vue.

• Voir aussi : Vue.filter

components

• Type : Object

• Détails :

  Un objet de mappage des composants à mettre à disposition de l’instance de Vue.

• Voir aussi : Composants

Options / Divers

parent

• Type : Instance de Vue

• Détails :

  Spécifie l’instance parente pour l’instance qui va être créée. Établit une relation parent-enfant entre les deux. Le parent sera accessible via this.$parent pour l’enfant, et l’enfant sera ajouté à la liste $children du parent.

  Utilisez $parent et $children avec parcimonie - ils servent surtout comme écoutille de secours. Préférez l’utilisation de propriétés et d’évènements pour la communication parent-enfant.

mixins

• Type : Array<Object>

• Détails :

  L’option mixins accepte une liste d’objets mixin. Ces objets mixin peuvent contenir des options d’instance tout comme des objets d’instance normaux, et elles seront fusionnées avec les éventuelles options existantes en utilisant la même stratégie de fusion que dans Vue.extend(). Par exemple, si votre mixin contient un hook created et que le composant lui-même en a également un, les deux fonctions seront appelées.

  Les hooks de mixin sont appelés dans l’ordre dans lequel ils sont fournis, et appelés avant les propres hooks du composant.

• Exemple :

  var mixin = { created: function () { console.log(1) } } var vm = new Vue({ created: function () { console.log(2) }, mixins: [mixin] }) // => 1 // => 2

• Voir aussi : Mixins

extends

• Type : Object | Function

• Détails :

  Permet d’étendre déclarativement un autre composant (qui peut être un simple objet d’options ou un constructeur) sans avoir à utiliser Vue.extend. C’est destiné en premier lieu à rendre plus facile les extensions entre composants monofichiers.

  Cette option est similaire à mixins.

• Exemple :

  var CompA = { ... } // étend `CompA` sans avoir à appeler `Vue.extend` sur l'un ou l'autre var CompB = { extends: CompA, ... }

provide / inject

Nouveau dans la 2.2.0+

• Type :

  • provide : Object | () => Object
  • inject : Array<string> | { [key: string]: string | Symbol | Object }

• Détails :

  Ces deux options sont utilisées ensemble pour permettre à un composant parent de servir d’injecteur de dépendances pour tous ses descendants, peu importe la profondeur de la hiérarchie de composants, tant qu’ils sont dans la même chaine parente. Si vous êtes familiers avec React, c’est très similaire à la fonctionnalité de contexte dans React.

  L’option provide doit être un objet ou une fonction retournant un objet. Cet objet contient les propriétés qui sont disponibles pour l’injection dans ses descendants. Vous pouvez utiliser des Symbol ES2015 comme clés dans cet objet, mais seulement dans les environnements supportant nativement Symbol et Reflect.ownKeys.

  L’option inject doit être soit :

  • un Array de String, ou
  • un objet où les clés sont les noms des liaisons locales et où les valeurs sont :
    • les clés (String ou Symbol) à rechercher dans les injections disponibles, ou
    • un objet où :
      • la propriété from est la clé (String ou Symbol) à rechercher dans les injections disponibles, et
      • la propriété default est utilisé comme valeur de substitution.

  Note : les liaisons provide et inject ne sont PAS réactives. C’est intentionnel. Cependant, si vous passez un objet observé, les propriétés sur cet objet resteront réactives.

• Exemple :

  // parent component providing 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // le composant enfant injectant 'foo' var Enfant = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }

  Avec les Symbol ES2015, la fonction provide et l’objet inject :

  const s = Symbol() const Provider = { provide () { return { [s]: 'foo' } } } const Enfant = { inject: { s }, // ... }

  Les deux prochains exemples fonctionnent seulement avec Vue 2.2.1+. En dessous de cette version, les valeurs injectées étaient résolues après l’initialisation des props et de data.

  En utilisant une valeur injectée comme valeur par défaut pour une prop :

  const Enfant = { inject: ['foo'], props: { bar: { default () { return this.foo } } } }

  En utilisant une valeur injectée comme entrée de données :

  const Enfant = { inject: ['foo'], data () { return { bar: this.foo } } }

  Dans la 2.5.0+ les injections peuvent être optionnelles avec une valeur par défaut :

  const Child = { inject: { foo: { default: 'foo' } } }

  S’il est nécessaire de de pouvoir injecter via une propriété avec un nom différent, utilisez from pour indiquer la source de la propriété :

  const Child = { inject: { foo: { from: 'bar', default: 'foo' } } }

  De façon similaire aux valeurs par défaut des props, vous devez utiliser une fabrique de fonctions pour les valeurs non primitives :

  const Child = { inject: { foo: { from: 'bar', default: () => [1, 2, 3] } } }

Options / Divers

name

• Type : string

• Restriction : respecté uniquement lorsqu’utilisé comme option du composant.

• Détails :

  Permet au composant de s’invoquer lui-même récursivement dans son template. Notez que lorsqu’un composant est déclaré globalement avec Vue.component(), l’identifiant global est automatiquement assigné à sa propriété name.

  Un autre bénéfice du fait de spécifier une option name est le débogage. Les composants nommés donnent des messages d’avertissement plus utiles. De plus, lorsque vous inspectez une application via les vue-devtools, les composants non nommés s’afficheront en tant que <AnonymousComponent>, ce qui n’est pas très instructif. En fournissant une option name, vous obtiendrez bien plus d’informations dans l’arbre de composants.

delimiters

• Type : Array<string>

• Par défaut : ["{{", "}}"]

• Restrictions : Cette option n’est disponible que dans la version complète du build, avec la compilation dans le navigateur.

• Détails :

  Change les délimiteurs d’interpolation de texte. Cette option est uniquement disponible en version complète.

• Exemple :

  new Vue({ delimiters: ['${', '}'] }) // Les délimiteurs ont été changés pour suivre le style des templates ES6

functional

• Type : Boolean

• Détails :

  Rend le composant sans état (pas de propriété data) et sans instance (pas de contexte this). Il s’agit simplement d’une fonction render qui retourne des nœuds virtuels, ce qui réduit fortement les couts en performance au rendu pour ce type de composants.

• Voir aussi : Composants fonctionnels

model

Nouveau dans la 2.2.0

• Type : { prop?: string, event?: string }

• Détails :

  Permet à un composant personnalisé de définir la prop et l’évènement utilisé quand il est utilisé avec v-model. Par défaut, v-model sur un composant utilise value comme prop et input comme évènement, mais certains types de champs de saisie comme les cases à cocher et les boutons radio peuvent vouloir utiliser la prop value à d’autres fins. Utiliser l’option model peut éviter le conflit dans ce genre de cas.

• Exemple :

  Vue.component('ma-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // cela permet d'utiliser la prop `value` à d'autres fins value: String, // utilise `checked` comme prop qui prend la place de `value` checked: { type : Number, default: 0 } }, // ... })

  <ma-checkbox v-model="foo" value="une certaine valeur"></ma-checkbox>

  Le code ci-dessus est équivalent à :

  <ma-checkbox :checked="foo" @change="val => { foo = val }" value="une certaine valeur"> </ma-checkbox>

inheritAttrs

Nouveau dans la 2.4.0+

• Type : boolean

• Par défaut : true

• Détails :

  Par défaut, les attributs de portée parente qui ne sont pas reconnus en tant que props vont « échouer » et être appliqués à l’élément racine du composant enfant en tant qu’attribut HTML normal. Quand on crée un composant qui encapsule un élément cible ou un autre composant, cela peut ne pas être le comportement souhaité. En mettant inheritAttrs à false, ce comportement par défaut peut être désactivé. Les attributs sont disponibles via la propriété d’instance $attrs (aussi nouvelle en 2.4) et peuvent être explicitement liée a un élément non-racine en utilisant v-bind.

  Note : cette option n’affecte pas les liaisons class et style.

comments

Nouveau dans la 2.4.0+

• Type : boolean

• Par défaut : false

• Restrictions : Cette option est uniquement disponible dans le build complet, avec la compilation dans le navigateur.

• Détails :

  Quand mis à true, cela va conserver et faire le rendu HTML des commentaires trouvés dans les templates. Le comportement par défaut est de les enlever.

Propriétés d’instance

vm.$data

• Type : Object

• Détails :

  L’objet data est ce que l’instance de Vue observe. L’instance de Vue agit comme un proxy pour l’accès aux propriétés de cet objet data.

• Voir aussi : Options / Data - data

vm.$props

Nouveau dans la 2.2.0+

• Type : Object

• Détails :

  Un objet représentant les props actuelles qu’un composant a reçues. L’instance de Vue agit comme un proxy pour accéder aux propriétés sur son objet props.

vm.$el

• Type : Element

• Accessible uniquement en lecture

• Détails :

  L’élément racine du DOM que gère l’instance de Vue.

vm.$options

• Type : Object

• Accessible uniquement en lecture

• Détails :

  Les options d’instanciation utilisées pour cette instance de Vue. C’est utile lorsque vous voulez inclure des propriétés personnalisées dans les options:

  new Vue({ optionPersonnalisée: 'foo', created: function () { console.log(this.$options.optionPersonnalisée) // => 'foo' } })

vm.$parent

• Type : Instance de Vue

• Accessible uniquement en lecture

• Détails :

  L’instance parente, si l’instance actuelle en a une.

vm.$root

• Type : Instance de Vue

• Accessible uniquement en lecture

• Détails :

  L’instance de Vue à la racine de l’arbre de composants actuel. Si l’instance actuelle n’a pas de parents, la valeur sera l’instance elle-même.

vm.$children

• Type : Array<Instance de Vue>

• Accessible uniquement en lecture

• Détails :

  Les composants enfants directs de l’instance actuelle. Notez que l’ordre des enfants n’est pas garanti pour $children, et que cette propriété n’est pas réactive. Si vous vous retrouvez à essayer d’utiliser $children pour de la liaison de données, optez plutôt pour un Array et v-for pour générer les composants enfants, en utilisant l’Array comme unique source fiable.

vm.$slots

• Type : { [name: string]: ?Array<VNode> }

• Accessible uniquement en lecture

• Reactif ? Non

• Details :

  Utilisé pour accéder programmatiquement à du contenu distribué par slots. Chaque slot nommé a sa propriété correspondante (p. ex. le contenu de v-slot:foo sera trouvé dans vm.$slots.foo). La propriété default contient tous les nœuds non inclus dans un slot nommé ou contenus de v-slot:default.

  Notez que ces slots ne sont pas réactif. Si vous avez besoin de composent pour faire un nouveau rendu basé sur des changement de données passées au slot, nous vous proposons de considérer l’utilisation d’option d’instance réactive tel que props ou data.

  Note: v-slot:foo est supporté dans la v2.6+. Pour des versions plus anciennes, vous pouvez utiliser la syntaxe dépréciée.

  Accéder à vm.$slots est plus utile lorsque vous écrivez un composant avec une fonction de rendu.

• Exemple :

  <blog-post> <template v-slot:header> <h1>À propos de moi</h1> </template> <p>Voici du contenu pour la page, qui sera inclus dans vm.$slots.default, car il n'est pas à l'intérieur d'un slot nommé.</p> <template v-slot:footer> <p>Copyright 2016 Evan You</p> </template> <p>Si j'ai du contenu ici, il sera aussi inclus dans vm.$slots.default.</p> </blog-post>

  Vue.component('blog-post', { render: function (createElement) { var header = this.$slots.header var body = this.$slots.default var footer = this.$slots.footer return createElement('div', [ createElement('header', header), createElement('main', body), createElement('footer', footer) ]) } })

• Voir aussi :

  • Composant <slot>
  • Distribution de contenu avec des slots
  • Fonctions de rendu - Slots

vm.$scopedSlots

Nouveau dans la 2.1.0+

• Type : { [name: string]: props => Array<VNode> | undefined }

• Accessible uniquement en lecture

• Détails :

  Utilisé pour accéder programmatiquement aux slots avec portée. Pour chaque slot, y compris celui par défaut default, l’objet contient une fonction correspondante qui retourne des nœuds virtuels VNode.

  Accéder à vm.$scopedSlots est surtout utile lors de l’écriture d’un composant avec une fonction de rendu.

  Note : depuis la 2.6.0+, il y a deux changements notables pour cette propriété :

  1. Les fonctions de slot avec portée garantissent de retourner un tableau de VNodes, sauf si la valeur de retour est invalide, auquel cas la fonction retournera undefined.

  2. Tous les $slots sont maintenant exposés via $scopedSlots en tant que fonctions. Si vous travaillez avec des fonctions de rendu, il est maintenant recommandé de toujours accéder aux slots via $scopedSlots, si elles utilisent actuellement une portée ou non. Cela ne va pas seulement permettre d’ajouter des scopes simplement lors de futures refactorisations, mais également de faciliter votre éventuelle migration vers Vue 3, où tous les slots seront des fonctions.

• Voir aussi :

  • Composant <slot>
  • Slots avec portée
  • Fonctions de rendu - Slots

vm.$refs

• Type : Object

• Accessible uniquement en lecture

• Détails :

  Un objet contenant des éléments du DOM et des composants, ayant des attributs ref enregistrée.

• Voir aussi :

  • Les refs des composants enfants
  • Attributs spéciaux - ref

vm.$isServer

• Type : boolean

• Accessible uniquement en lecture

• Détails :

  Vaut true si l’instance actuelle de Vue s’exécute côté serveur.

• Voir aussi : Rendu côté serveur

vm.$attrs

Nouveau dans la 2.4.0+

• Type : { [key: string]: string }

• Accessible uniquement en lecture

• Détails :

  Contient les attributs liés de portée parente (à l’exception de class et style) qui ne sont pas reconnus (et extrait) en tant que props. Quand un composant n’a aucune props de déclarée, il contient essentiellement toutes les liaisons de portée parente (à l’exception de class et style), et peut être passé à l’intérieur d’un composant enfant via v-bind="$attrs". Ceci est utile pour la création de composants d’ordre supérieur.

vm.$listeners

Nouveau dans la 2.4.0+

• Type : { [key: string]: Function | Array<Function> }

• Accessible uniquement en lecture

• Détails :

  Contient le gestionnaire d’évènement v-on de portée parente (sans le modificateur .native). Il peut être passé à l’intérieur d’un composant enfant via v-on="$listeners". Ceci est utile pour la création de composants d’ordre supérieur.

Méthodes et données d’instance

vm.$watch( expOuFn, callback, [options] )

• Arguments :

  • {string | Function} expOrFn
  • {Function | Object} callback
  • {Object} [options]
    • {boolean} deep
    • {boolean} immediate

• Retourne : {Function} unwatch

• Utilisation :

  Observe les changements sur l’instance de Vue à partir d’une expression ou d’une fonction calculée. La fonction de rappel est appelée avec la nouvelle et l’ancienne valeur. L’expression accepte uniquement les chemins simples délimités par des points. Pour des expressions plus complexes, utilisez plutôt une fonction.

Note: lors de la modification (et non la réassignation) d’un Object ou d’un Array, l’ancienne valeur sera la même que la nouvelle valeur car ils référencient le même Object/Array. Vue ne conserve pas de copie de la valeur avant modification.

• Exemple :

  // keypath vm.$watch('a.b.c', function (nouvelleValeur, ancienneValeur) { // fait quelque-chose }) // fonction vm.$watch( function () { // chaque fois que l'expression `this.a + this.b` va produire un résultat différent, // le gestionnaire d'écoute va être appelé. C'est comme si nous surveillons // une propriété carculée sans définir de propriété calculée en elle-même. return this.a + this.b }, function (nouvelleValeur, ancienneValeur) { // fait quelque-chose } )

  vm.$watch retourne une fonction unwatch qui une fois exécutée stoppe le déclenchement de la fonction callback :

  var unwatch = vm.$watch('a', cb) // plus tard, démonte l'observateur unwatch()

• Option: deep

  Pour aussi détecter les changements des valeurs imbriquées dans les objets, vous devez passer deep: true dans l’argument des options. Notez que vous n’avez pas besoin de cela pour observer les modifications d’un Array.

  vm.$watch('monObjet', callback, { deep: true }) vm.monObjet.valeurImbriquée = 123 // la fonction de rappel est déclenchée

• Option: immediate

  Passer immediate: true dans les options déclenchera immédiatement la fonction callback avec la valeur actuelle de l’expression :

  vm.$watch('a', callback, { immediate: true }) // la fonction `callback` est immédiatement déclenchée avec la valeur actuelle de `a`

  Notez qu’avec l’option immediate vous serez incapable d’utiliser unwatch sur la propriété fournie par le premier appel de la fonction de rappel.

  // Ceci va générer une erreur var unwatch = vm.$watch( 'value', function () { doSomething() unwatch() }, { immediate: true } )

  Si vous voulez toujours appeler la fonction unwatch à l’intérieur de la fonction de rappel, vous devrez d’abord vérifier sa disponibilité :

  var unwatch = vm.$watch( 'value', function () { doSomething() if (unwatch) { unwatch() } }, { immediate: true } )

vm.$set( cible, nomDePropriete/index, valeur )

• Arguments :

  • {Object | Array} cible
  • {string | number} nomDePropriete/index
  • {any} valeur

• Retourne : la valeur assignée

• Utilisation :

  C’est un alias à la fonction globale Vue.set.

• Voir aussi : Vue.set

vm.$delete( cible, nomDePropriete/index )

• Arguments :

  • {Object | Array} cible
  • {string | number} nomDePropriete/index

• Utilisation :

  C’est un alias à la fonction globale Vue.delete.

• Voir aussi : Vue.delete

Méthodes et Évènements d’Instance

vm.$on( évènement, callback )

• Arguments :

  • {string | Array<string>} évènement (Array supportée unique depuis la 2.2.0)
  • {Function} callback

• Utilisation :

  Écoute un évènement personnalisé sur l’instance vm. Les évènements peuvent être déclenchés avec vm.$emit. La fonction de rappel recevra tous les arguments additionnels passés dans ces méthodes de déclenchement d’évènement.

• Exemple :

  vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'salut') // => "salut"

vm.$once( évènement, callback )

• Arguments :

  • {string} évènement
  • {Function} callback

• Utilisation :

  Écoute un évènement personnalisé, mais qu’une seule fois. L’écouteur sera supprimé une fois déclenché pour la première fois.

vm.$off( [event, callback] )

• Arguments :

  • {string | Array<string>} évènement (les tableaux sont seulement supportés dans la 2.2.2+)
  • {Function} [callback]

• Utilisation :

  Supprime un ou des écouteurs d’évènements.

  • Si aucun argument n’est fourni, supprime tous les écouteurs d’évènements;

  • Si seul l’argument événément est fourni, supprime tous les écouteurs de cet évènement;

  • Si l’évènement et la fonction de rappel sont fournis, supprime l’écouteur uniquement pour cet événément et cette fonction de rappel spécifique.

vm.$emit( eventName, […args] )

• Arguments :

  • {string} nom d'évènement
  • [...arguments]

  Déclenche un évènement sur l’instance actuelle. Tous les arguments additionnels sont passés à la fonction de rappel de l’écouteur.

• Exemples:

  Utiliser $emit avec un nom d’évènement :

  Vue.component('welcome-button', { template: ` <button v-on:click="$emit('welcome')"> Cliquez-moi pour être salué </button> ` })

  <div id="emit-example-simple"> <welcome-button v-on:welcome="sayHi"></welcome-button> </div>

  new Vue({ el: '#emit-example-simple', methods: { sayHi: function () { alert('Salut !') } } })

  Utiliser $emit avec des arguments additionnels :

  Vue.component('magic-eight-ball', { data: function () { return { possibleAdvice: ['Oui', 'Non', 'Peut-être'] } }, methods: { giveAdvice: function () { var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length) this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex]) } }, template: ` <button v-on:click="giveAdvice"> Cliquez-moi pour un indice </button> ` })

  <div id="emit-example-argument"> <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball> </div>

  new Vue({ el: '#emit-example-argument', methods: { showAdvice: function (advice) { alert(advice) } } })

Méthodes d’Instance / Cycle de Vie

vm.$mount( [élémentOuSelecteur] )

• Arguments :

  • {Element | string} [élémentOuSelecteur]
  • {boolean} [hydratation]

• Retourne : vm - l’instance elle-même

• Utilisation :

  Si une Instance de Vue n’a pas reçu l’option el à l’instanciation, il sera dans un état « non monté », sans élément du DOM associé. vm.$mount() peut être utilisé pour démarrer manuellement le montage d’une Instance de Vue non montée.

  Si l’argument élémentOuSelecteur n’est pas fourni, le rendu du template se fera dans un élément hors du document, et vous devrez utiliser les API natives du DOM pour l’insérer vous-même dans le document.

  La méthode retourne l’instance elle-même afin que vous puissiez chainer d’autres méthodes d’instance ensuite.

• Exemple :

  var MonComposant = Vue.extend({ template: '<div>Salut!</div>' }) // crée et monte sur #app (remplacera #app) new MonComposant().$mount('#app') // le code ci-dessus est l'équivalent de : new MonComposant({ el: '#app' }) // ou bien, fait le rendu hors du document et l'insère par la suite var composant = new MonComposant().$mount() document.getElementById('app').appendChild(composant.$el)

• Voir aussi :

  • Diagramme du cycle de vie
  • Rendu côté serveur

vm.$forceUpdate()

• Utilisation :

  Force l’Instance de Vue à refaire son rendu. Notez que cela n’affecte pas tous les composants enfants, seulement l’instance elle-même et les composants enfants avec un contenu de slot inséré.

vm.$nextTick( [callback] )

• Arguments :

  • {Function} [callback]

• Utilisation :

  Reporte l’exécution de la fonction callback au prochain cycle de mise à jour du DOM. Utilisez ceci immédiatement après avoir changé des données pour attendre la mise à jour du DOM. C’est la même chose que la fonction globale Vue.nextTick, sauf que le contexte this dans la fonction callback est automatiquement lié à l’instance appelant cette méthode.

  Nouveau dans la 2.1.0+ : retourne une promesse si aucune fonction de rappel n’est fournie et si les promesses ne sont pas supportées dans l’environnement d’exécution. Notez que Vue ne fournit pas de polyfill aux promesses. Aussi, si vous ciblez des navigateurs qui ne supportent pas les promesses nativement (on parle de toi, IE), vous pouvez fournir un polyfill vous-même.

• Exemple :

  new Vue({ // ... methods: { // ... exemple: function () { // modifie des données this.message = 'changé' // le DOM n'est pas encore mis à jour this.$nextTick(function () { // le DOM est maintenant à jour // `this` est lié à l'instance courante this.faireAutreChose() }) } } })

• Voir aussi :

  • Vue.nextTick
  • File d’attente de mise à jour asynchrone

vm.$destroy()

• Utilisation :

  Détruit complètement une instance de Vue vm. Supprime ses connexions avec d’autres instances de Vue, détache toutes ses directives, désactive tous les écouteurs d’évènements.

  Déclenche les hooks beforeDestroy et destroyed.

  Dans les cas d’utilisation normaux, vous ne devriez pas avoir à appeler cette méthode vous-même. Contrôlez plutôt le cycle de vie de vos composants enfants de manière pilotée par les données, en utilisant v-if et v-for.

• Voir aussi : Diagramme du cycle de vie

Directives

v-text

• Attend comme valeur : string

• Détails :

  Met à jour le contenu textuel (textContent) de l’élément. Si vous n’avez besoin de mettre à jour qu’une partie de ce contenu, vous devriez utiliser les interpolations {{ Mustache }}.

• Exemple :

  <span v-text="msg"></span> <!-- même chose que --> <span>{{msg}}</span>

• Voir aussi : Syntaxe de liaison de données - Interpolations

v-html

• Attend comme valeur : string

• Détails :

  Met à jour le contenu HTML (innerHTML) de l’élément. Notez que les contenus sont insérés en pur HTML - ils ne seront pas compilés en tant que templates Vue. Si vous vous retrouvez à vouloir composer des templates avec v-html, essayez de repenser la solution en utilisant des composants à la place.

  Faire le rendu dynamique de code HTML arbitraire sur votre site web peut être très dangereux car cela peut mener facilement à des attaques XSS. Utilisez v-html uniquement avec du contenu de confiance et jamais avec du contenu fourni par les utilisateurs.

  Dans les composants monofichiers, les styles scoped ne seront pas appliqués aux contenus à l’intérieur de v-html, car ce HTML n’est pas gérer par le compilateur de template de Vue. Si vous voulez cibler le contenu v-html dans une CSS avec portée, vous devez utiliser à la place les modules CSS ou un élément <style> global supplémentaire avec une stratégie de portée manuelle comme avec BEM.

• Exemple :

  <div v-html="html"></div>

• Voir aussi : Syntaxe de liaison de données - Interpolations

v-show

• Attend comme valeur : any

• Utilisation :

  Permute l’affichage de l’élément avec la propriété CSS display selon si la valeur de l’expression est « truthy » ou non.

  Cette directive déclenche des transitions quand sa condition change.

• Voir aussi : Rendu conditionnel - v-show

v-if

• Attend comme valeur : any

• Utilisation :

  Fait le rendu conditionnel de l’élément selon si la valeur de l’expression est truthy ou non. L’élément et les directives / composants qu’il contient sont détruits et reconstruits durant la permutation. Si l’élément est un <template>, son contenu sera extrait en tant que bloc conditionnel.

  Cette directive déclenche des transitions quand sa condition change.

Quand utilisé avec v-if, v-for a une plus grande priorité par rapport à v-if. Voir le guide sur le rendu de listes pour plus de détails.

• Voir aussi : Rendu conditionnel - v-if

v-else

• N’attend aucune valeur

• Restriction : l’élément précédent doit avoir une directive v-if ou v-else-if.

• Utilisation :

  Dénote un bloc « else » pour v-if ou pour une chaine v-if / v-else-if.

  <div v-if="Math.random() > 0.5"> Là vous me voyez </div> <div v-else> Là vous ne me voyez pas </div>

• Voir aussi : Rendu conditionnel - v-else

v-else-if

Nouveauté en 2.1.0+

• Attend comme valeur : any

• Restriction : l’élément précédent doit avoir une directive v-if or v-else-if.

• Utilisation :

  Dénote un bloc « else if » pour v-if. Peut être enchainé plusieurs fois.

  <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Ni A, ni B, ni C </div>

• Voir aussi : Rendu conditionnel - v-else-if

v-for

• Attend comme valeur : Array | Object | number | string | Iterable (depuis 2.6)

• Utilisation :

  Fait le rendu de l’élément ou du bloc template plusieurs fois selon les données sources. La valeur de la directive doit utiliser la syntaxe spéciale alias in expression pour fournir un alias à l’élément courant dans l’itération:

  <div v-for="item in items"> {{ item.text }} </div>

  Comme alternative, vous pouvez aussi spécifier un alias pour l’index courant dans l’itération (ou la clé si utilisée sur un Object):

  <div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div>

  Le comportement par défaut de v-for est qu’il essaiera de patcher les éléments actuellement en place sans les déplacer. Pour le forcer à réordonner les éléments, vous devez fournir un indice de tri avec l’attribut spécial key :

  <div v-for="item in items" :key="item.id"> {{ item.text }} </div>

  En 2.6+, v-for peut également travailler sur des valeurs qui implémentent le protocole Iterable, incluant les natifs Map et Set. Cependant, il est à noter que Vue 2.x ne supporte pour le moment pas la réactivité sur les valeurs de Map et Set et ne pourra pas automatiquement détecter les changements.

  Quand utilisé conjointement avec v-if, v-for a une plus grande priorité que v-if. Consultez le guide de rendu de listes pour plus de détails.

  L’usage détaillé pour v-for est expliqué dans la section du guide indiquée ci-dessous.

• Voir aussi :

  • Rendu de liste
  • key

v-on

• Notation abrégée : @

• Attend comme valeur : Function | Inline Statement | Object

• Argument de la fonction de rappel (callback) : event

• Modificateurs :

  • .stop - appelle event.stopPropagation().
  • .prevent - appelle event.preventDefault().
  • .capture - ajoute l’écouteur d’évènement en mode capture.
  • .self - déclenche le gestionnaire d’évènement uniquement si l’évènement provient de cet élément.
  • .{keyCode | keyAlias} - déclenche le gestionnaire d’évènement uniquement pour certaines touches du clavier.
  • .native - écoute un évènement natif sur l’élément racine d’un composant.
  • .once - déclenche le gestionnaire d’évènement une seule fois maximum.
  • .left - (2.2.0+) déclenche le gestionnaire d’évènement uniquement pour les évènements du bouton gauche de la souris.
  • .right - (2.2.0+) déclenche le gestionnaire d’évènement uniquement pour les évènements du bouton droit de la souris.
  • .middle - (2.2.0+) déclenche le gestionnaire d’évènement uniquement pour les évènements du bouton du milieu de la souris.
  • .passive - (2.3.0+) attache un évènement du DOM avec { passive: true }.

• Utilisation :

  Attache un écouteur d’évènement à l’élément. Le type d’évènement écouté est indiqué comme argument. L’expression peut être soit un nom de méthode, soit une ligne d’instruction, ou simplement omise si des modificateurs sont présents.

  Quand utilisé sur un élément standard, il écoute uniquement les évènements natifs du DOM. Quand utilisé sur un élément personnalisé de composant, il écoute également les évènements personnalisés émis depuis ce composant enfant.

  Lorsque des évènements natifs du DOM sont écoutés, la méthode reçoit l’évènement natif comme unique argument. Si la valeur de la directive est une ligne d’instruction, l’instruction a accès à la propriété spéciale $event : v-on:click="handle('ok', $event)".

  À partir de la 2.4.0+, v-on supporte aussi la liaison à un objet de paires évènement/écouteur sans argument. Notez que lorsque vous utilisez la syntaxe objet, elle ne supporte aucun modificateur.

• Exemple :

  <!-- nom de méthode --> <button v-on:click="faireCeci"></button> <!-- évènement dynamique (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- ligne d'instruction --> <button v-on:click="faireCela('hello', $event)"></button> <!-- notation abrégée --> <button @click="faireCeci"></button> <!-- notation abrégée d'un évènement dynamique (2.6.0+) --> <button @[event]="doThis"></button> <!-- stoppe la propagation --> <button @click.stop="faireCeci"></button> <!-- empêche le comportement par défaut --> <button @click.prevent="faireCeci"></button> <!-- empêche le comportement par défaut sans expression --> <form @submit.prevent></form> <!-- enchainer les modificateurs --> <button @click.stop.prevent="faireCeci"></button> <!-- modificateur de touche avec un keyAlias --> <input @keyup.enter="onEnter"> <!-- modificateur de touche avec un keyCode --> <input @keyup.13="onEnter"> <!-- l'évènement click sera déclenché une seule fois maximum --> <button v-on:click.once="faireCeci"></button> <!-- syntaxe objet (2.4.0+) --> <button v-on="{ mousedown: faireCeci, mouseup: faireCela }"></button>

  Écouter des évènements personnalisés sur un composant enfant (le gestionnaire est appelé quand mon-evenement est émis depuis l’enfant):

  <mon-composant @mon-evenement="faireCeci"></mon-composant> <!-- ligne d'instruction --> <mon-composant @mon-evenement="faireCeci(123, $event)"></mon-composant> <!-- évènement natif sur le composant --> <mon-composant @click.native="onClick"></mon-composant>

• Voir aussi :

  • Gestion des évènements
  • Composants - Évènements personnalisés

v-bind

• Notation abrégée : :

• Attend comme valeur : any (avec argument) | Object (sans argument)

• Argument : attrOuProp (optionnel)

• Modificateurs :

  • .prop - Associe une propriété du DOM plutôt qu’un attribut. (Quelle différence ?). Si le tag est un composant, alors .prop assignera la propriété sur l’élément $el du composant.
  • .camel - (2.1.0+) transforme un nom d’attribut en kebab-case en sa version camelCase.
  • .sync - (2.3.0+) du sucre syntaxique pour ajouter un gestionnaire v-on qui met à jour la valeur liée.

• Utilisation :

  Lie dynamiquement un ou plusieurs attributs HTML ou props de composants à une expression.

  Quand utilisér pour lier un attribut class ou style, la directive supporte des types additionnels de valeur tels que Array ou Object. Consultez la section du guide en lien ci-dessous pour plus de détails.

  Quand utilisée pour lier à une prop de composant, la prop doit être bien déclarée dans le composant enfant.

  Utilisée sans argument, la directive peut lier un objet contenant des paires clé-valeur d’attributs. Notez que dans ce mode, class et style ne supportent pas les Array ou Object.

• Exemple :

  <!-- lie un attribut --> <img v-bind:src="imageSrc"> <!-- nom d'attribut dynamique (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- notation abrégée --> <img :src="imageSrc"> <!-- notation abrégée d'un nom d'attribut dynamique (2.6.0+) --> <button :[key]="value"></button> <!-- avec de la concaténation de chaines de caractères --> <img :src="'/path/to/images/' + fileName"> <!-- liaison de classes --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <!-- liaison de styles --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- lie un objet d'attributs --> <div v-bind="{ id: uneProp, 'autre-attr': uneAutreProp }"></div> <!-- lie un attribut du DOM avec le modificateur prop --> <div v-bind:text-content.prop="text"></div> <!-- liaison de prop. "prop" doit être déclaré dans mon-composant. --> <mon-composant :prop="uneValeur"></mon-composant> <!-- transmet les props parentes à un composant enfant --> <composant-enfant v-bind="$props"></composant-enfant> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>

  Le modificateur .camel permet de réécrire en camelCase un nom d’attribut de v-bind si vous déclarez vos templates dans le DOM, p. ex. l’attribut SVG viewBox :

  <svg :view-box.camel="viewBox"></svg>

  .camel n’est pas nécessaire si vous utilisez des templates en chaine de caractères ou si vous les compilez avec vue-loader/vueify.

• Voir aussi :

  • Liaisons de classe et de style
  • Composants - Props de composant
  • Composants - Modificateur .sync

v-model

• Attend comme valeur : variable selon les éléments des champs de formulaire ou les valeurs en sortie de composants

• Limité à :

  • <input>
  • <select>
  • <textarea>
  • composants

• Modificateurs :

  • .lazy - écoute les évènements change au lieu de input
  • .number - convertit les chaines de caractères d’entrée en nombres
  • .trim - retire les blancs autour des chaines de caractères en entrée

• Utilisation :

  Crée une liaison bidirectionnelle sur un élément de saisie d’un formulaire ou sur un composant. Pour une utilisation détaillée et d’autres notes, consultez la section du guide en lien ci-dessous.

• Voir aussi :

  • Liaisons sur les champs de formulaire
  • Composants - Composants de champ de formulaire utilisant les évènements personnalisés

v-slot

• Notation abrégée : #

• Attend comme valeur : Une expression JavaScript qui est valide a une position d’argument dans une fonction (supporte la décomposition dans les environnements la supportant). Optionnel - seulement nécessaire si le passage des props est attendu par le slot.

• Argument : nom du slot (optionel, default par défaut)

• Limité à :

  • <template>
  • composants (pour les slot par défaut avec props)

• Utilisation :

  Indiquez les slots nommés ou slots qui attendent de recevoir des props.

• Exemple :

  <!-- Slots nommés --> <base-layout> <template v-slot:header> Contenu d'en-tête </template> Contenu par défaut de slot <template v-slot:footer> Contenu de pied de page </template> </base-layout> <!-- Slot nommé recevant des props --> <infinite-scroll> <template v-slot:item="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </infinite-scroll> <!-- Slot par défaut recevant des props, avec décomposition --> <mouse-position v-slot="{ x, y }"> Mouse position: {{ x }}, {{ y }} </mouse-position>

  Pour plus de détails, voir les liens ci-dessous.

• Voir aussi :

  • Composants - Slots
  • RFC-0001

v-pre

• N’attend aucune valeur

• Utilisation :

  Omet la compilation pour cet élément et tous ses enfants. Vous pouvez utiliser ceci pour afficher à l’utilisateur des expressions {{ moustache }}. Utilisé sur un grand nombre de nœuds sans directives, cela peut aussi accélérer la compilation.

• Exemple :

  <span v-pre>{{ ceci ne sera pas compilé }}</span>

v-cloak

• N’attend aucune valeur

• Utilisation :

  Cette directive restera sur l’élément jusqu’à ce que l’instance de Vue associée ait fini sa compilation. Combiné avec des règles CSS telles que [v-cloak] { display: none }, cette directive peut être utilisée pour cacher des liaisons moustaches encore non compilées jusqu’à ce que l’instance de Vue soit prête.

• Exemple :

  [v-cloak] { display: none; }

  <div v-cloak> {{ message }} </div>

  L’élément <div> ne sera pas visible jusqu’à ce que la compilation soit terminée.

v-once

• N’attend aucune valeur

• Détails :

  Fait le rendu de l’élément ou du composant qu’une seule fois seulement. Lors des nouveaux rendus par la suite, l’élément/composant et tous ses enfants seront traités comme du contenu statique et ignorés. Cela peut être utilisé pour optimiser les performances à la mise à jour d’un composant.

  <!-- sur un seul élément --> <span v-once>Ceci ne changera jamais : {{msg}}</span> <!-- l'élément a des enfants --> <div v-once> <h1>commentaire</h1> <p>{{msg}}</p> </div> <!-- composant --> <mon-composant v-once :commentaire="msg"></mon-composant> <!-- directive `v-for` --> <ul> <li v-for="i in liste" v-once>{{i}}</li> </ul>

• Voir aussi :

  • Syntaxe de liaison de données - Interpolations
  • Composants - Composants statiques peu couteux avec v-once

Attributs spéciaux

key

• Attend comme valeur : number | string | boolean (depuis 2.4.2) | symbol (depuis 2.5.12)

  L’attribut spécial key est principalement utilisé comme marqueur pour l’algorithme de DOM virtuel de Vue afin d’identifier les VNodes lors du différentiel entre la nouvelle liste des nœuds et la liste précédente. Sans clés, Vue utilise un algorithme qui minimise le déplacement de nœuds et essaie de patcher/réutiliser le plus possible les éléments présents du même type. Avec des clés, cela réordonnera les éléments en se basant sur le nouvel ordre de clés, et les éléments avec des clés qui ne sont plus présentes seront toujours supprimés/détruits.

  Les enfants d’un même parent commun doivent avoir des clés uniques. Des clés en doublons causeront des erreurs de rendu.

  Le cas d’utilisation le plus classique est la combinaison avec v-for:

  <ul> <li v-for="item in items" :key="item.id">...</li> </ul>

  Il peut aussi être utilisé pour forcer le remplacement d’un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous voulez :

  • Déclencher correctement les hooks de cycle de vie d’un composant
  • Déclencher des transitions

  Par exemple :

  <transition> <span :key="texte">{{ texte }}</span> </transition>

  Quand texte change, le <span> sera toujours remplacé plutôt que d’être patché, afin qu’une transition soit déclenchée.

ref

• Attend comme valeur : string

  ref est utilisé pour inscrire une référence à un élément ou à un composant enfant. La référence sera inscrite sous l’objet $refs du composant parent. Lorsqu’utilisée sur un élément du DOM, la référence sera cet élément; lorsqu’utilisée sur un composant enfant, la référence sera l’instance du composant :

  <!-- vm.$refs.p sera le nœud du DOM --> <p ref="p">hello</p> <!-- vm.$refs.enfant sera l'instance du composant enfant --> <comp-enfant ref="enfant"></comp-enfant>

  Quand utilisé sur des éléments/composants avec v-for, la référence inscrite sera un Array contenant les nœuds du DOM ou les instances de composant.

  Une note importante à propos du timing de l’inscription de la référence: étant donné que les refs elles-mêmes résultent de la fonction de rendu, vous ne pouvez pas y accéder au rendu initial - elles n’existent pas encore ! $refs est également non réactif, c’est pourquoi vous ne devriez pas essayer de les utiliser dans des templates pour de la liaison de données.

• Voir aussi : Les refs des composants enfants

is

• Attend comme valeur : string | Object (un objet d'options de composant)

  Utilisé pour les composants dynamiques et pour contourner les limitations des templates dans le DOM.

  Par exemple :

  <!-- le composant change quand la vue actuelle change --> <component v-bind:is="vueActuelle"></component> <!-- nécessaire car `<ma-ligne>` sera invalide à l'intérieur --> <!-- d'un élément `<table>` et donc sera écarté --> <table> <tr is="ma-ligne"></tr> </table>

  Pour un usage détaillé, suivez les liens dans la description ci-dessus.

• Voir aussi :

  • Composants dynamiques
  • Limitations de l’analyse d’un template à partir du DOM

slot ^déprécié

Préférez v-slot en 2.6.0+.

• Attend comme valeur : string

  Utilisez sur un contenu inséré dans un composant enfant pour indiquer à quel slot nommé le contenu appartient.

• Voir aussi : Slots nommés avec slot

slot-scope ^déprécié

Prefer v-slot in 2.6.0+.

• Attend comme valeur : function argument expression

• Utilisation :

  Utilisé pour indiquer qu’un élément ou un composant a un slot avec portée. La valeur de l’attribut doit être une expression JavaScript valide qui apparaît à la position d’un argument dans la déclaration d’une fonction. Cela signifie que dans les environnements qui la supportent, vous pouvez utiliser une expression de destructuration dans l’expression. Remplace scope dans la 2.5.0+.

  Cet attribut ne supporte pas les liaisons dynamiques.

• Voir aussi : Slots avec portée with slot-scope

scope ^supprimé

Remplacé par slot-scope dans la 2.5.0+. Préférez v-slot dans la 2.6.0+.

Utilisé pour indiquer un élément <template> en tant que slot avec portée.

• utilisation :

  Identique à slot-scope à l’exception que scope peut uniquement être utilisé sur des éléments <template> elements.

Composants intégrés par défaut

component

• Props:

  • is - string | ComponentDefinition | ComponentConstructor
  • inline-template - booléen

• Utilisation :

  Un « métacomposant » pour le rendu de composants dynamiques. Le composant réel obtenu est déterminé par la prop is :

  <!-- un composant dynamique contrôlé par --> <!-- la propriété `idComposant` de l'instance de vue --> <component :is="idComposant"></component> <!-- peut aussi faire le rendu de composants inscrits globalement ou passés comme prop --> <component :is="$options.components.enfant"></component>

• Voir aussi : Composants dynamiques

transition

• Props:

  • name - string, utilisé pour générer automatiquement des noms de classes CSS pour les transitions. p. ex. name: 'fade' donnera .fade-enter, .fade-enter-active, etc. Valeur par défaut : "v".
  • appear - booléen, indique si la transition doit être appliquée ou non au rendu initial. Valeur par défaut: false.
  • css - booléen, indique si les classes CSS de transition doivent être appliquées ou non. Valeur par défaut: true. Si assigné à false, seuls les hooks JavaScript inscrits via les évènements du composant seront déclenchés.
  • type - string, spécifie le type d’évènement de transition à attendre pour déterminer le timing de fin de transition. Les valeurs disponibles sont "transition" and "animation". Par défaut, il détectera automatiquement le type ayant la durée la plus longue.
  • mode - string, contrôle la séquence de timing des transitions entrantes/sortantes. Les modes disponibles sont "out-in" et "in-out"; par défaut en simultané.
  • duration - number | { enter: number, leave: number }, spécifie la durée de la transition. Par défaut, Vue attend le premier évènement transitionend ou animationend de l’élément de transition racine.
  • enter-class - string
  • leave-class - string
  • appear-class - string
  • enter-to-class - string
  • leave-to-class - string
  • appear-to-class - string
  • enter-active-class - string
  • leave-active-class - string
  • appear-active-class - string

• Events:

  • before-enter
  • before-leave
  • before-appear
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled (v-show uniquement)
  • appear-cancelled

• Utilisation :

  <transition> sert d’effets de transition pour un unique élément / composant. Le rendu de <transition> ne donne pas un élément supplémentaire dans le DOM, et n’apparait pas non plus dans la hiérarchie du composant inspecté. Il applique simplement le comportement de transition au contenu imbriqué à l’intérieur.

  <!-- élément simple --> <transition> <div v-if="ok">contenu permuté</div> </transition> <!-- composant dynamique --> <transition name="fade" mode="out-in" appear> <component :is="view"></component> </transition> <!-- hooks d'évènement --> <div id="transition-demo"> <transition @after-enter="transitionComplete"> <div v-show="ok">contenu permuté</div> </transition> </div>

  new Vue({ ... methods: { transitionComplete: function (el) { // pour l'élément du DOM 'el' passé en argument, faire quelque-chose... } } ... }).$mount('#transition-demo')

• Voir aussi : Transitions : entrantes, sortantes et de listes

transition-group

• Props:

  • tag - string, par défaut span.
  • move-class - surcharge la classe CSS appliquée durant le mouvement de transition.
  • expose les mêmes props que <transition> à l’exception de mode.

• Évènements:

  • expose les mêmes évènements que <transition>.

• Utilisation :

  <transition-group> sert d’effets de transition pour de multiples éléments / composants. Le rendu de <transition-group> donne un nouvel élément dans le DOM. Par défaut, il s’agit d’un <span>, mais vous pouvez configurer le type d’élément en sortie via l’attribut tag.

  Notez que chaque enfant dans un <transition-group> doit avoir une clé unique pour que les animations fonctionnent correctement.

  <transition-group> supporte les déplacements de transition via les transformations CSS. Quand la position à l’écran d’un élément enfant a changé après une mise à jour, une classe CSS de déplacement (auto générée à partir de l’attribut name ou configurée via l’attribut move-class) est appliquée. Si la propriété CSS transform permet les transitions quand la classe de déplacement est appliquée, l’élément sera animé de façon fluide jusqu’à sa destination en utilisant la technique FLIP.

  <transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>

• Voir aussi : Transition : entrantes, sortantes et de listes

keep-alive

• Props:

  • include - string ou RegExp. Seuls les composants correspondants seront mis en cache.
  • exclude - string ou RegExp. Les composants correspondants ne seront pas mis en cache.
  • max - number. Le nombre maximum d’instances de composant à mettre en cache.

• Utilisation :

  Quand il entoure un composant dynamique, <keep-alive> met en cache les instances de composant inactives sans les détruire. Tout comme <transition>, <keep-alive> est un composant abstrait : le rendu ne donne pas d’élément supplémentaire dans le DOM, et il n’apparait pas dans la chaine de composants du parent.

  Lorsqu’un composant est permuté à l’intérieur de <keep-alive>, ses hooks de cycle de vie activated et deactivated seront appelés en conséquence.

  À partir de la 2.2.0+, activated et deactivated se déclencheront pour tous les composants imbriqués dans une arborescence <keep-alive>.

  Principalement utilisé pour préserver l’état du composant ou éviter un nouveau rendu.

  <!-- basique --> <keep-alive> <component :is="view"></component> </keep-alive> <!-- de multiples enfants conditionnels --> <keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive> <!-- utilisé avec `<transition>` --> <transition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>

  Notez que <keep-alive> est conçu pour le cas où il a un seul composant enfant direct qui est permuté. Il ne fonctionne pas si vous avez v-for à l’intérieur. Quand il y a de multiples enfants conditionnels, comme ci-dessus, <keep-alive> requiert qu’un seul enfant soit visible à la fois.

• include et exclude

  Nouveauté de la 2.1.0+

  Les props include et exclude définissent les conditions de mise en cache des composants. Les deux props peuvent être soit une liste délimitée par des virgules, soit une expression régulière, soit une Array :

  <!-- liste délimitée par des virgules --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- expression régulière (utiliser `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (utiliser `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>

  La correspondance est d’abord faite avec l’option name propre au composant, puis avec son nom d’inscription locale (la clé dans l’option components du parent) si l’option name n’est pas disponible. Les composants anonymes ne peuvent pas être mis en correspondance.

• max

  Nouveauté de la 2.5.0+

  Le nombre maximum d’instances de composant à mettre en cache. Une fois que ce nombre est atteind, l’instance du composant en cache qui a été le plus récemment accédé est détruit avant que la nouvelle instance soit créée.

  <keep-alive :max="10"> <component :is="view"></component> </keep-alive>

  <keep-alive> ne fonctionne pas avec les composants fonctionnels puisqu’ils n’ont pas d’instances à mettre en cache.

• Voir aussi : Composants dynamiques - keep-alive

slot

• Props:

  • name - string, utilisé pour nommer le slot.

• Utilisation :

  <slot> sert d’emplacement de distribution de contenu dans les templates de composant. L’élement <slot> lui-même sera remplacé par le contenu.

  Pour un usage détaillé, consultez la section du guide en lien ci-dessous.

• Voir aussi : Distribution de contenu avec des slots

Interface VNode

• Veuillez vous référer à la déclaration de classe VNode.

Rendu côté serveur

• Veuillez vous référer à la documentation du package vue-server-renderer.