Configuration globale

Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou participez à la traduction française ici.

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._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_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égies personnalisées de fusion d’options

### 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` is a Vue-specific error info, e.g. which lifecycle hook
// the error was found in. Only available in 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.

> In 2.2.0, this hook also captures errors in component lifecycle hooks. Also, when this hook is undefined, captured errors will be logged with console.error instead of crashing the app.

> Sentry, un service de traçage d’erreur, fournit une intégration officielle utilisant cette option.

### ignoredElements

- Type : Array<string>

- Par défaut : []

- Utilisation :

Vue.config.ignoredElements = [
'my-custom-web-component', 'another-web-component'
]


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,
// camelCase won`t work
mediaPlayPause: 179,
// instead you can use kebab-case with double quotation marks
"media-play-pause" : 179,
up: [38, 87]
}


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



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

### performance

> New in 2.2.0

- Type: boolean

- Default: false (from 2.2.3)

- Usage:

Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool timeline. Only works in development mode and in browsers that support the performance.mark API.

### productionTip

> New in 2.2.0

- Type: boolean

- Default: true

- Usage:

Set this to false to prevent the production tip on Vue startup.

## 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="mount-point"></div>


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


Cela donnera comme résultat :

<p>Walter White aka Heisenberg</p>


- Voir aussi : Composants

Vue.nextTick( [callback, context] )



- Arguments :
- {Function} [callback]
- {Object} [context]

- Utilisation :

Reporte l’exécution du callback 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 = 'Hello'
// le DOM n'a pas encore été mis à jour
Vue.nextTick(function () {
// le DOM est à jour
})


> Nouveauté de la 2.1.0: retourne une Promise si aucune fonction de callback n’est fournie et si Promise est supporté par l’environnement d’exécution.

- Voir aussi : File de mise à jour asynchrone

Vue.set( target, key, value )



- Arguments :
- {Object | Array} target
- {string | number} key
- {any} value

- Retourne: la valeur assignée.

- Utilisation :

Assigne une propriété à un objet. Si l’objet est réactif, cette méthode s’assure que la propriété est créée en tant que propriété réactive et 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 l’ajout de nouvelles propriétés.

Notez que 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( target, key )



- Arguments :
- {Object | Array} target
- {string | number} key

- Utilisation :

Supprime une propriété d’un objet. 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.

> Also works with on Array + index in 2.2.0+.

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

Vue.directive( id, [definition] )

Vue.filter( id, [definition] )

Vue.component( id, [definition] )

Vue.use( plugin )

Vue.mixin( mixin )

Vue.compile( template )

Vue.version

var version = Number(Vue.version.split('.')[0])
if (version === 2) {
// Vue v2.x.x
} else if (version === 1) {
// Vue v1.x.x
} else {
// Unsupported versions of Vue
}

Options / Data

data

props

propsData

computed

methods

watch

Notez que vous ne devriez pas utiliser de fonctions fléchées pour définir un observateur (exemple: searchQuery: newValue => this.updateAutocomplete(newValue)). 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.updateAutocomplete vaudra undefined.

Options / DOM

el

template

render

renderError

New in 2.2.0

Options / Lifecycle Hooks

All lifecycle hooks automatically have their this context bound to the instance, so that you can access data, computed properties, and methods. This means you should not use an arrow function to define a lifecycle method (e.g. created: () => this.fetchTodos()). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.fetchTodos will be undefined.

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

Options / Assets

directives

filters

components

Options / Composition

parent

mixins

extends

provide / inject

New in 2.2.0

Options / Misc

name

delimiters

functional

model

New in 2.2.0

Instance Properties

vm.$data

vm.$props

New in 2.2.0

vm.$el

vm.$options

vm.$parent

vm.$root

vm.$children

vm.$slots

vm.$scopedSlots

New in 2.1.0

vm.$refs

vm.$isServer

Instance Methods / Data

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

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

vm.$set( target, key, value )

vm.$delete( target, key )

Instance Methods / Events

vm.$on( event, callback )

vm.$once( event, callback )

vm.$off( [event, callback] )

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

Instance Methods / Lifecycle

vm.$mount( [elementOrSelector] )

vm.$forceUpdate()

vm.$nextTick( [callback] )

vm.$destroy()

Directives

v-text

v-html

v-show

v-if

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.

v-else

v-else-if

New in 2.1.0

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

Special Attributes

key

ref

slot

Built-In Components

component

transition

transition-group

keep-alive

slot

VNode Interface

Server-Side Rendering