diff --git a/src/v2/api/index.md b/src/v2/api/index.md
index 93f10e8460..07d8105f9c 100644
--- a/src/v2/api/index.md
+++ b/src/v2/api/index.md
@@ -2,31 +2,31 @@
type: api
---
-## Global Config
+## 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](https://github.com/vuejs-fr/vuejs.org).**
`Vue.config` is an object containing Vue's global configurations. You can modify its properties listed below before bootstrapping your application:
+`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`
+- **Type :** `boolean`
-- **Default:** `false`
+- **Par défaut :** `false`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.silent = true
```
- Suppress all Vue logs and warnings.
+ Supprime tous les logs et warnings de Vue.js.
### optionMergeStrategies
-- **Type:** `{ [key: string]: Function }`
+- **Type :** `{ [key: string]: Function }`
-- **Default:** `{}`
+- **Par défaut :** `{}`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
@@ -40,52 +40,52 @@ type: api
// Profile.options._my_option = 2
```
- Define custom merging strategies for options.
+ Définit des stratégies personnalisées de fusion pour les options.
- The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context Vue instance is passed as the third argument.
+ 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.
-- **See also:** [Custom Option Merging Strategies](../guide/mixins.html#Custom-Option-Merge-Strategies)
+- **Voir aussi**: [Stratégies personnalisées de fusion d'options](../guide/mixins.html#Custom-Option-Merge-Strategies)
### devtools
-- **Type:** `boolean`
+- **Type :** `boolean`
-- **Default:** `true` (`false` in production builds)
+- **Par défaut :** `true` (`false` dans les versions de production)
-- **Usage:**
+- **Utilisation :**
``` js
- // make sure to set this synchronously immediately after loading Vue
+ // assurez-vous d'assigner ça de manière synchrone immédiatement après avoir chargé Vue
Vue.config.devtools = true
```
- Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds.
+ Autorise ou non l'inspection des [vue-devtools](https://github.com/vuejs/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`
+- **Type :** `Function`
-- **Default:** Error is thrown in place
+- **Par défaut :** les exceptions ne sont pas interceptées
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.errorHandler = function (err, vm) {
- // handle error
+ // gérer le cas d'erreur
}
```
- Assign a handler for uncaught errors during component render and watchers. The handler gets called with the error and the Vue instance.
+ 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.
- > [Sentry](https://sentry.io), an error tracking service, provides [official integration](https://sentry.io/for/vue/) using this option.
+ > [Sentry](https://sentry.io), un service de traçage d'erreur, fournit une [intégration officielle](https://sentry.io/for/vue/) utilisant cette option.
### ignoredElements
-- **Type:** `Array`
+- **Type :** `Array`
-- **Default:** `[]`
+- **Par défaut :** `[]`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.ignoredElements = [
@@ -93,15 +93,15 @@ type: api
]
```
- Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an `Unknown custom element`, assuming that you forgot to register a global component or misspelled a component name.
+ 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 }`
+- **Type :** `{ [key: string]: number | Array }`
-- **Default:** `{}`
+- **Par défaut :** `{}`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.keyCodes = {
@@ -112,27 +112,27 @@ type: api
}
```
- Define custom key alias(es) for v-on.
+ Définit des alias pour les touches du clavier avec `v-on`.
-## Global API
+## API globale
Vue.extend( options )
-- **Arguments:**
+- **Arguments :**
- `{Object} options`
-- **Usage:**
+- **Utilisation :**
- Create a "subclass" of the base Vue constructor. The argument should be an object containing component options.
+ Crée une « sous-classe » du constructeur de base Vue. L'argument doit être un objet contenant les options du composant.
- The special case to note here is the `data` option - it must be a function when used with `Vue.extend()`.
+ Le cas spécial à noter ici est l'option `data` - il doit s'agir d'une fonction quand utilisé avec `Vue.extend()`.
``` html
```
``` js
- // create constructor
+ // crée un constructeur réutilisable
var Profile = Vue.extend({
template: '
{{firstName}} {{lastName}} aka {{alias}}
',
data: function () {
@@ -143,84 +143,84 @@ type: api
}
}
})
- // create an instance of Profile and mount it on an element
+ // crée une instance de Profile et la monte sur un élément
new Profile().$mount('#mount-point')
```
- Will result in:
+ Cela donnera comme résultat :
``` html
Walter White aka Heisenberg
```
-- **See also:** [Components](../guide/components.html)
+- **Voir aussi :** [Composants](../guide/components.html)
Vue.nextTick( [callback, context] )
-- **Arguments:**
+- **Arguments :**
- `{Function} [callback]`
- `{Object} [context]`
-- **Usage:**
+- **Utilisation :**
- Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update.
+ 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.
``` js
- // modify data
+ // modification de données
vm.msg = 'Hello'
- // DOM not updated yet
+ // le DOM n'a pas encore été mis à jour
Vue.nextTick(function () {
- // DOM updated
+ // le DOM est à jour
})
```
- > New in 2.1.0: returns a Promise if no callback is provided and Promise is supported in the execution environment.
+ > 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.
-- **See also:** [Async Update Queue](../guide/reactivity.html#Async-Update-Queue)
+- **Voir aussi :** [File de mise à jour asynchrone](../guide/reactivity.html#Async-Update-Queue)
Vue.set( object, key, value )
-- **Arguments:**
+- **Arguments :**
- `{Object} object`
- `{string} key`
- `{any} value`
-- **Returns:** the set value.
+- **Retourne:** la valeur assignée.
-- **Usage:**
+- **Utilisation :**
- Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Vue cannot detect property additions.
+ 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.
- **Note the object cannot be a Vue instance, or the root data object of a Vue instance.**
+ **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.**
-- **See also:** [Reactivity in Depth](../guide/reactivity.html)
+- **Voir aussi :** [Réactivité en détail](../guide/reactivity.html)
Vue.delete( object, key )
-- **Arguments:**
+- **Arguments :**
- `{Object} object`
- `{string} key`
-- **Usage:**
+- **Utilisation :**
- Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it.
+ 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.
- **Note the object cannot be a Vue instance, or the root data object of a Vue instance.**
+**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.**
-- **See also:** [Reactivity in Depth](../guide/reactivity.html)
+- **Voir aussi :** [Réactivité en détail](../guide/reactivity.html)
Vue.directive( id, [definition] )
-- **Arguments:**
+- **Arguments :**
- `{string} id`
- `{Function | Object} [definition]`
-- **Usage:**
+- **Utilisation :**
- Register or retrieve a global directive.
+ Inscrit ou récupère une directive globale.
``` js
- // register
+ // inscrit une directive
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
@@ -229,92 +229,92 @@ type: api
unbind: function () {}
})
- // register (simple function directive)
+ // inscrit une directive comme simple fonction
Vue.directive('my-directive', function () {
- // this will be called as `bind` and `update`
+ // cette fonction sera appelée comme `bind` et `update` ci-dessus
})
- // getter, return the directive definition if registered
+ // accesseur, retourne la définition de la directive si inscrite
var myDirective = Vue.directive('my-directive')
```
-- **See also:** [Custom Directives](../guide/custom-directive.html)
+- **Voir aussi :** [Directives personnalisées](../guide/custom-directive.html)
Vue.filter( id, [definition] )
-- **Arguments:**
+- **Arguments :**
- `{string} id`
- `{Function} [definition]`
-- **Usage:**
+- **Utilisation :**
- Register or retrieve a global filter.
+ Inscrit ou récupère un filtre global.
``` js
- // register
+ // inscrit un filtre
Vue.filter('my-filter', function (value) {
- // return processed value
+ // retourne la valeur modifiée
})
- // getter, return the filter if registered
+ // accesseur, retourne le filtre si inscrit
var myFilter = Vue.filter('my-filter')
```
Vue.component( id, [definition] )
-- **Arguments:**
+- **Arguments :**
- `{string} id`
- `{Function | Object} [definition]`
-- **Usage:**
+- **Utilisation :**
- Register or retrieve a global component. Registration also automatically sets the component's `name` with the given `id`.
+ Inscrit ou récupère un composant global. L'inscription assigne aussi automatiquement la propriété `name` du composant au paramètre `id` donné.
``` js
- // register an extended constructor
+ // inscrit un constructeur étendu
Vue.component('my-component', Vue.extend({ /* ... */ }))
- // register an options object (automatically call Vue.extend)
+ // inscrit un composant avec un objet options (appelle automatiquement Vue.extend)
Vue.component('my-component', { /* ... */ })
- // retrieve a registered component (always return constructor)
+ // récupère un composant inscrit (retourne toujours le constructeur)
var MyComponent = Vue.component('my-component')
```
-- **See also:** [Components](../guide/components.html)
+- **Voir aussi :** [Composants](../guide/components.html).
Vue.use( plugin )
-- **Arguments:**
+- **Arguments :**
- `{Object | Function} plugin`
-- **Usage:**
+- **Utilisation :**
- Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument.
+ 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.
- When this method is called on the same plugin multiple times, the plugin will be installed only once.
+ Quand cette méthode est appelée avec le même plugin plusieurs fois, le plugin ne sera installée qu'une seule fois.
-- **See also:** [Plugins](../guide/plugins.html)
+- **Voir aussi :** [Plugins](../guide/plugins.html).
Vue.mixin( mixin )
-- **Arguments:**
+- **Arguments :**
- `{Object} mixin`
-- **Usage:**
+- **Utilisation :**
- Apply a mixin globally, which affects every Vue instance created afterwards. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
+ 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**.
-- **See also:** [Global Mixins](../guide/mixins.html#Global-Mixin)
+- **Voir aussi :** [Mixins globales](../guide/mixins.html#Global-Mixin)
Vue.compile( template )
-- **Arguments:**
+- **Arguments :**
- `{string} template`
-- **Usage:**
+- **Utilisation :**
- Compiles a template string into a render function. **Only available in the standalone build.**
+ Compile une string template en une fonction de rendu. **Disponible uniquement sur la version standalone.**
``` js
var res = Vue.compile('
{{ msg }}
')
@@ -328,43 +328,43 @@ type: api
})
```
-- **See also:** [Render Functions](../guide/render-function.html)
+- **Voir aussi :** [Fonctions de rendu](../guide/render-function.html)
## Options / Data
### data
-- **Type:** `Object | Function`
+- **Type :** `Object | Function`
-- **Restriction:** Only accepts `Function` when used in a component definition.
+- **Restriction :** accepte uniquement une fonction lorsqu'utilisé dans une définition de composant.
-- **Details:**
+- **Détails :**
- The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it "reactive". **The object must be plain**: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with its own stateful behavior.
+ 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.
- Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance.
+ 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.
- After the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`.
+ Après que l'instance ait é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`.
- Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`.
+ 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._property`.
- When defining a **component**, `data` must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we still use a plain object for `data`, that same object will be **shared by reference** across all instances created! By providing a `data` function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.
+ 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 fraîche des données initiales.
- If required, a deep clone of the original object can be obtained by passing `vm.$data` through `JSON.parse(JSON.stringify(...))`.
+ Si nécessaire, un clône profond de l'objet original peut être obtenu en passant `vm.$data` à travers `JSON.parse(JSON.stringify(...))`.
-- **Example:**
+- **Exemple :**
``` js
var data = { a: 1 }
- // direct instance creation
+ // création directe d'instance
var vm = new Vue({
data: data
})
vm.a // -> 1
vm.$data === data // -> true
- // must use function when in Vue.extend()
+ // data doit être une fonction lorsqu'utilisée dans Vue.extend()
var Component = Vue.extend({
data: function () {
return { a: 1 }
@@ -372,32 +372,32 @@ type: api
})
```
-
Note that __you should not use an arrow function with the `data` property__ (e.g. `data: () => { return { a: this.myProp }}`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.myProp` will be undefined.
+
Notez que __vous ne devriez pas utiliser de fonctions fléchées pour la propriété `data`__ (exemple: `data: () => { return { a: this.myProp }}`). 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.myProp` vaudra `undefined`.
-- **See also:** [Reactivity in Depth](../guide/reactivity.html)
+- **Voir aussi :** [Réactivité en détail](../guide/reactivity.html).
### props
-- **Type:** `Array | Object`
+- **Type :** `Array | Object`
-- **Details:**
+- **Détails :**
- A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.
+ 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 `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.
-- **Example:**
+- **Exemple :**
``` js
- // simple syntax
+ // syntaxe simple
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
- // object syntax with validation
+ // syntaxe avancée avec validation
Vue.component('props-demo-advanced', {
props: {
- // just type check
+ // juste une vérification de type
height: Number,
- // type check plus other validations
+ // vérification du type ainsi que d'autres validations
age: {
type: Number,
default: 0,
@@ -410,17 +410,17 @@ type: api
})
```
-- **See also:** [Props](../guide/components.html#Props)
+- **Voir aussi :** [Attributs](../guide/components.html#Props)
### propsData
-- **Type:** `{ [key: string]: any }`
+- **Type :** `{ [key: string]: any }`
-- **Restriction:** only respected in instance creation via `new`.
+- **Restriction :** utilisé uniquement si l'instance est créée via `new`.
-- **Details:**
+- **Détails :**
- Pass props to an instance during its creation. This is primarily intended to make unit testing easier.
+ Passe des valeurs d'attribut à l'instance durant sa création. Cette propriété a pour but principal de faciliter les tests unitaires.
- **Example:**
@@ -439,27 +439,27 @@ type: api
### computed
-- **Type:** `{ [key: string]: Function | { get: Function, set: Function } }`
+- **Type :** `{ [key: string]: Function | { get: Function, set: Function } }`
-- **Details:**
+- **Détails :**
- Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance.
+ 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.
-
Note that __you should not use an arrow function to define a computed property__ (e.g. `aDouble: () => this.a * 2`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.
+
Notez que __vous ne devriez pas utiliser de fonctions fléchées pour définir une propriété calculée__ (exemple: `aDouble: () => this.a * 2`). 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`.
- Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance's scope (i.e. not reactive), the computed property will __not__ be updated.
+ 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.
-- **Example:**
+- **Exemple :**
```js
var vm = new Vue({
data: { a: 1 },
computed: {
- // get only, just need a function
+ // accesseur uniquement, on a juste besoin d'une fonction
aDouble: function () {
return this.a * 2
},
- // both get and set
+ // accesseur et mutateur à la fois
aPlus: {
get: function () {
return this.a + 1
@@ -476,20 +476,20 @@ type: api
vm.aDouble // -> 4
```
-- **See also:**
- - [Computed Properties](../guide/computed.html)
+- **Voir aussi :**
+ - [Propriétés calculées](../guide/computed.html)
### methods
-- **Type:** `{ [key: string]: Function }`
+- **Type :** `{ [key: string]: Function }`
-- **Details:**
+- **Détails :**
- Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance.
+ 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`.
-
Note that __you should not use an arrow function to define a method__ (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.
-
-- **Example:**
+- **Exemple :**
```js
var vm = new Vue({
@@ -504,17 +504,17 @@ type: api
vm.a // 2
```
-- **See also:** [Methods and Event Handling](../guide/events.html)
+- **Voir aussi :** [Méthodes et gestion d'évènements](../guide/events.html)
### watch
-- **Type:** `{ [key: string]: string | Function | Object }`
+- **Type :** `{ [key: string]: string | Function | Object }`
-- **Details:**
+- **Détails :**
- An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation.
+ Un objet où les clés sont des expressions à surveiller et où la valeur associée est la fonction de callback 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 appelera `$watch()` pour chaque clé de l'objet à l'initialisation.
-- **Example:**
+- **Exemple :**
``` js
var vm = new Vue({
@@ -527,9 +527,9 @@ type: api
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
- // string method name
+ // nom d'une méthode
b: 'someMethod',
- // deep watcher
+ // observateur profond (deep watcher)
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
@@ -538,36 +538,36 @@ type: api
})
vm.a = 2 // -> new: 2, old: 1
```
+
+
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`.
-
Note that __you should not use an arrow function to define a watcher__ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined.
-
-- **See also:** [Instance Methods - vm.$watch](#vm-watch)
+- **Voir aussi :** [Méthodes d'instance - vm.$watch](#vm-watch)
## Options / DOM
### el
-- **Type:** `string | HTMLElement`
+- **Type :** `string | HTMLElement`
-- **Restriction:** only respected in instance creation via `new`.
+- **Restriction :** uniquement respecté quand l'instance est créée via `new`.
-- **Details:**
+- **Détails :**
- Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.
+ 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`.
- After the instance is mounted, the resolved element will be accessible as `vm.$el`.
+ Une fois l'instance montée, l'élément correspondant sera accessible via `vm.$el`.
- If this option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call `vm.$mount()` to manually start the compilation.
+ 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.
-
The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to `` or `
`.
+
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 `` ou `
`.
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Diagramme du Cycle de Vie](../guide/instance.html#Lifecycle-Diagram)
### template
-- **Type:** `string`
+- **Type :** `string`
-- **Details:**
+- **Détails :**
A string template to be used as the markup for the Vue instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
@@ -575,21 +575,21 @@ type: api
From a security perspective, you should only use Vue templates that you can trust. Never use user-generated content as your template.
-- **See also:**
+- **Voir aussi :**
- [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
- [Content Distribution](../guide/components.html#Content-Distribution-with-Slots)
### render
- - **Type:** `Function`
+ - **Type :** `Function`
- - **Details:**
+ - **Détails :**
An alternative to string templates allowing you to leverage the full programmatic power of JavaScript. The render function receives a `createElement` method as it's first argument used to create `VNode`s.
If the component is a functional component, the render function also receives an extra argument `context`, which provides access to contextual data since functional components are instance-less.
- - **See also:**
+ - **Voir aussi :**
- [Render Functions](../guide/render-function)
## Options / Lifecycle Hooks
@@ -598,53 +598,53 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
### beforeCreate
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called synchronously after the instance has just been initialized, before data observation and event/watcher setup.
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### created
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the `$el` property will not be available yet.
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### beforeMount
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called right before the mounting begins: the `render` function is about to be called for the first time.
**This hook is not called during server-side rendering.**
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### mounted
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called after the instance has just been mounted where `el` is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el` will also be in-document when `mounted` is called.
**This hook is not called during server-side rendering.**
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### beforeUpdate
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called when the data changes, before the virtual DOM is re-rendered and patched.
@@ -652,13 +652,13 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
**This hook is not called during server-side rendering.**
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### updated
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called after a data change causes the virtual DOM to be re-rendered and patched.
@@ -666,103 +666,103 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
**This hook is not called during server-side rendering.**
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### activated
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called when a kept-alive component is activated.
**This hook is not called during server-side rendering.**
-- **See also:**
+- **Voir aussi :**
- [Built-in Components - keep-alive](#keep-alive)
- [Dynamic Components - keep-alive](../guide/components.html#keep-alive)
### deactivated
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called when a kept-alive component is deactivated.
**This hook is not called during server-side rendering.**
-- **See also:**
+- **Voir aussi :**
- [Built-in Components - keep-alive](#keep-alive)
- [Dynamic Components - keep-alive](../guide/components.html#keep-alive)
### beforeDestroy
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.
**This hook is not called during server-side rendering.**
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
### destroyed
-- **Type:** `Function`
+- **Type :** `Function`
-- **Details:**
+- **Détails :**
Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed.
**This hook is not called during server-side rendering.**
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
## Options / Assets
### directives
-- **Type:** `Object`
+- **Type :** `Object`
-- **Details:**
+- **Détails :**
A hash of directives to be made available to the Vue instance.
-- **See also:**
+- **Voir aussi :**
- [Custom Directives](../guide/custom-directive.html)
- [Assets Naming Convention](../guide/components.html#Assets-Naming-Convention)
### filters
-- **Type:** `Object`
+- **Type :** `Object`
-- **Details:**
+- **Détails :**
A hash of filters to be made available to the Vue instance.
-- **See also:**
+- **Voir aussi :**
- [`Vue.filter`](#Vue-filter)
### components
-- **Type:** `Object`
+- **Type :** `Object`
-- **Details:**
+- **Détails :**
A hash of components to be made available to the Vue instance.
-- **See also:**
+- **Voir aussi :**
- [Components](../guide/components.html)
## Options / Misc
### parent
-- **Type:** `Vue instance`
+- **Type :** `Vue instance`
-- **Details:**
+- **Détails :**
Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as `this.$parent` for the child, and the child will be pushed into the parent's `$children` array.
@@ -770,9 +770,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
### mixins
-- **Type:** `Array