- Want to feature your themes here?
- Contact us!
+ Vous souhaitez mettre en avant votre thème ici ?
+ Contactez-nous (EN)!
diff --git a/src/v2/api/index.md b/src/v2/api/index.md
index 2e073bbcb6..6df855f7c7 100644
--- a/src/v2/api/index.md
+++ b/src/v2/api/index.md
@@ -3,144 +3,144 @@ title: API
type: api
---
-## Global Config
+## Configuration globale
-`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) {
- return child + 1
+ Vue.config.optionMergeStrategies._mon_option = function (parent, enfant, vm) {
+ return enfant + 1
}
- const Profile = Vue.extend({
- _my_option: 1
+ const Profil = Vue.extend({
+ _mon_option: 1
})
- // Profile.options._my_option = 2
+ // Profil.options._mon_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égie de fusion des options personnalisées](../guide/mixins.html#Strategie-de-fusion-des-options-personnalisees)
### 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:** `undefined`
+- **Par défaut :** `undefined`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.errorHandler = function (err, vm, info) {
- // handle error
- // `info` is a Vue-specific error info, e.g. which lifecycle hook
- // the error was found in. Only available in 2.2.0+
+ // 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+
}
```
- Assign a handler for uncaught errors during component render function 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.
- > 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.
+ > 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.
- > In 2.4.0+, this hook also captures errors thrown inside Vue custom event handlers.
+ > En 2.4.0+ ce hook capture également les erreurs lancées depuis un gestionnaire d'évènement Vue personnalisé.
- > In 2.6.0+, this hook also captures errors thrown inside `v-on` DOM listeners. In addition, if any of the covered hooks or handlers returns a Promise chain (e.g. async functions), the error from that Promise chain will also be handled.
+ > 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.
- > Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option.
+ > [Sentry](https://sentry.io/for/vue/) et [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) fournissent une intégration officielle utilisant cette option.
### warnHandler
-> New in 2.4.0+
+> Nouveau dans la 2.4.0+
-- **Type:** `Function`
+- **Type :** `Function`
-- **Default:** `undefined`
+- ***Par défaut :** `undefined`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.warnHandler = function (msg, vm, trace) {
- // `trace` is the component hierarchy trace
+ // `trace` est la trace de hiérarchie de composant
}
```
- Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production.
+ 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`
+- **Type :** `Array`
-- **Default:** `[]`
+- **Par défaut :** `[]`
-- **Usage:**
+- **Utilisation :**
``` js
Vue.config.ignoredElements = [
- 'my-custom-web-component',
- 'another-web-component',
- // Use a `RegExp` to ignore all elements that start with "ion-"
- // 2.5+ only
+ 'mon-web-component',
+ 'un-autre-web-component',
+ // Utilisez une `RegExp` pour ignorer tous les éléments qui commencent par « ion- »
+ // 2.5+ seulement
/^ion-/
]
```
- 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
+ ```js
Vue.config.keyCodes = {
v: 86,
f1: 112,
- // camelCase won`t work
+ // La camelCase ne marche pas
mediaPlayPause: 179,
- // instead you can use kebab-case with double quotation marks
+ // à la place vous devez utiliser la kebab-case avec des guillemets doubles
"media-play-pause": 179,
up: [38, 87]
}
@@ -150,148 +150,148 @@ type: api
```
- Define custom key alias(es) for `v-on`.
+ Définit des alias pour les touches avec `v-on`.
### performance
-> New in 2.2.0+
+> Nouveau dans la 2.2.0+
-- **Type:** `boolean`
+- **Type :** `boolean`
-- **Default:** `false (from 2.2.3+)`
+- **Par défaut :** `false` (à partir de la 2.2.3+)
-- **Usage**:
+- **Utilisation :**
- Set this to `true` to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API.
+ 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](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark).
### productionTip
-> New in 2.2.0+
+> Nouveau dans la 2.2.0+
-- **Type:** `boolean`
+- **Type :** `boolean`
-- **Default:** `true`
+- **Par défaut :** `true`
-- **Usage**:
+- **Utilisation :**
- Set this to `false` to prevent the production tip on Vue startup.
+ Assignez ceci à `false` pour ne plus avoir la notification de production au démarrage de Vue.
-## 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
- var Profile = Vue.extend({
- template: '
{{firstName}} {{lastName}} aka {{alias}}
',
+ // crée un constructeur réutilisable
+ var Profil = Vue.extend({
+ template: '
{{prenom}} {{nom}} alias {{alias}}
',
data: function () {
return {
- firstName: 'Walter',
- lastName: 'White',
+ prenom: 'Walter',
+ nom: 'White',
alias: 'Heisenberg'
}
}
})
- // create an instance of Profile and mount it on an element
- new Profile().$mount('#mount-point')
+ // crée une instance de Profil et la monte sur un élément
+ new Profil().$mount('#point-de-montage')
```
- 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] )
+### Vue.nextTick( [callback, contexte] )
-- **Arguments:**
+- **Arguments :**
- `{Function} [callback]`
- - `{Object} [context]`
+ - `{Object} [contexte]`
-- **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 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.
``` js
- // modify data
- vm.msg = 'Hello'
- // DOM not updated yet
+ // modification de données
+ vm.msg = 'Salut'
+ // le DOM n'a pas encore été mis à jour
Vue.nextTick(function () {
- // DOM updated
+ // le DOM est à jour
})
- // usage as a promise (2.1.0+, see note below)
+ // utilisation en tant que promesse (2.1.0+, voir la note ci-dessous)
Vue.nextTick()
.then(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. Please note that Vue does not come with a Promise polyfill, so if you target browsers that don't support Promises natively (looking at you, IE), you will have to provide a polyfill yourself.
+ > 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.
-- **See also:** [Async Update Queue](../guide/reactivity.html#Async-Update-Queue)
+- **Voir aussi :** [File d’attente de mise à jour asynchrone](../guide/reactivity.html#File-d’attente-de-mise-a-jour-asynchrone)
-### Vue.set( target, propertyName/index, value )
+### Vue.set( cible, nomDePropriete/index, valeur )
-- **Arguments:**
- - `{Object | Array} target`
- - `{string | number} propertyName/index`
- - `{any} value`
+- **Arguments :**
+ - `{Object | Array} cible`
+ - `{string | number} nomDePropriete/index`
+ - `{any} valeur`
-- **Returns:** the set value.
+- **Retourne:** la valeur assignée.
-- **Usage:**
+- **Utilisation :**
- Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. `this.myObject.newProperty = 'hi'`).
+ 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'`).
-
The target object cannot be a Vue instance, or the root data object of a Vue instance.
+
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( target, propertyName/index )
+### Vue.delete( cible, nomDePropriete/index )
-- **Arguments:**
- - `{Object | Array} target`
- - `{string | number} propertyName/index`
+- **Arguments :**
+ - `{Object | Array} cible`
+ - `{string | number} nomDePropriete/index`
- > Only in 2.2.0+: Also works with Array + index.
+ > Seulement dans la 2.2.0+ : fonctionne aussi avec Array + index.
-- **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 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.
-
The target object cannot be a Vue instance, or the root data object of a Vue instance.
+
L'objet cible 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] )
+### Vue.directive( id, [définition] )
-- **Arguments:**
+- **Arguments :**
- `{string} id`
- - `{Function | Object} [definition]`
+ - `{Function | Object} [définition]`
-- **Usage:**
+- **Utilisation :**
- Register or retrieve a global directive.
+ Inscrit ou récupère une directive globale.
``` js
- // register
- Vue.directive('my-directive', {
+ // inscrit une directive
+ Vue.directive('ma-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
@@ -299,123 +299,123 @@ type: api
unbind: function () {}
})
- // register (function directive)
- Vue.directive('my-directive', function () {
- // this will be called as `bind` and `update`
+ // inscription (directive comme simple fonction)
+ Vue.directive('ma-directive', function () {
+ // cette fonction sera appelée comme `bind` et `update` ci-dessus
})
- // getter, return the directive definition if registered
- var myDirective = Vue.directive('my-directive')
+ // accesseur, retourne la définition de la directive si inscrite
+ var maDirective = Vue.directive('ma-directive')
```
-- **See also:** [Custom Directives](../guide/custom-directive.html)
+- **Voir aussi :** [Directives personnalisées](../guide/custom-directive.html)
-### Vue.filter( id, [definition] )
+### Vue.filter( id, [définition] )
-- **Arguments:**
+- **Arguments :**
- `{string} id`
- - `{Function} [definition]`
+ - `{Function} [définition]`
-- **Usage:**
+- **Utilisation :**
- Register or retrieve a global filter.
+ Inscrit ou récupère un filtre global.
``` js
- // register
- Vue.filter('my-filter', function (value) {
- // return processed value
+ // inscrit un filtre
+ Vue.filter('mon-filtre', function (value) {
+ // retourne la valeur modifiée
})
- // getter, return the filter if registered
- var myFilter = Vue.filter('my-filter')
+ // accesseur, retourne le filtre si inscrit
+ var monFiltre = Vue.filter('mon-filtre')
```
-- **See also:** [Filters](../guide/filters.html)
+- **Voir aussi :** [Filtres](../guide/filters.html)
-### Vue.component( id, [definition] )
+### Vue.component( id, [définition] )
-- **Arguments:**
+- **Arguments :**
- `{string} id`
- - `{Function | Object} [definition]`
+ - `{Function | Object} [définition]`
-- **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
- Vue.component('my-component', Vue.extend({ /* ... */ }))
+ // inscrit un constructeur étendu
+ Vue.component('mon-composant', Vue.extend({ /* ... */ }))
- // register an options object (automatically call Vue.extend)
- Vue.component('my-component', { /* ... */ })
+ // inscrit un composant avec un objet options (appelle automatiquement Vue.extend)
+ Vue.component('mon-composant', { /* ... */ })
- // retrieve a registered component (always return constructor)
- var MyComponent = Vue.component('my-component')
+ // récupère un composant inscrit (retourne toujours le constructeur)
+ var MonComposant = Vue.component('mon-composant')
```
-- **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.
+ Cette méthode doit être appelée avant d'appeler `new Vue()`
- This method has to be called before calling `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.
- 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é 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 Mixin](../guide/mixins.html#Global-Mixin)
+- **Voir aussi :** [Mixin global](../guide/mixins.html#Mixin-global)
### Vue.compile( template )
-- **Arguments:**
+- **Arguments :**
- `{string} template`
-- **Usage:**
+- **Utilisation :**
- Compiles a template string into a render function. **Only available in the full build.**
+ Compile une string template en une fonction de rendu. **Disponible uniquement sur la version complète.**
``` js
var res = Vue.compile('
{{ msg }}
')
new Vue({
data: {
- msg: 'hello'
+ msg: 'salut'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
```
-- **See also:** [Render Functions](../guide/render-function.html)
+- **Voir aussi :** [Fonctions de rendu](../guide/render-function.html)
### Vue.observable( object )
-> New in 2.6.0+
+> Nouveau en 2.6.0+
-- **Arguments:**
+- **Arguments :**
- `{Object} object`
-- **Usage:**
+- **Utilisation :**
- Make an object reactive. Internally, Vue uses this on the object returned by the `data` function.
+ Rend un objet réactif. En interne, Vue l'utilise sur l'objet retourné par la fonction `data`.
- The returned object can be used directly inside [render functions](../guide/render-function.html) and [computed properties](../guide/computed.html), and will trigger appropriate updates when mutated. It can also be used as a minimal, cross-component state store for simple scenarios:
+ L'objet retourné peut être directement utilisé à l'intérieur des [fonctions de rendu](../guide/render-function.html) ainsi que des [propriétés calculées](../guide/computed.html). 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 :
``` js
const state = Vue.observable({ count: 0 })
@@ -424,20 +424,20 @@ type: api
render(h) {
return h('button', {
on: { click: () => { state.count++ }}
- }, `count is: ${state.count}`)
+ }, `le compteur est : ${state.count}`)
}
}
```
-
In Vue 2.x, `Vue.observable` directly mutates the object passed to it, so that it is equivalent to the object returned, as [demonstrated here](../guide/instance.html#Data-and-Methods). In Vue 3.x, a reactive proxy will be returned instead, leaving the original object non-reactive if mutated directly. Therefore, for future compatibility, we recommend always working with the object returned by `Vue.observable`, rather than the object originally passed to it.
+
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](../guide/instance.html#Donnees-et-methodes). 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.
-- **See also:** [Reactivity in Depth](../guide/reactivity.html)
+- **Voir aussi :** [Réactivité en détail](../guide/reactivity.html)
### Vue.version
-- **Details**: Provides the installed version of Vue as a string. This is especially useful for community plugins and components, where you might use different strategies for different versions.
+- **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.
-- **Usage**:
+- **Utilisation :**
```js
var version = Number(Vue.version.split('.')[0])
@@ -447,7 +447,7 @@ type: api
} else if (version === 1) {
// Vue v1.x.x
} else {
- // Unsupported versions of Vue
+ // Versions non supportées de Vue
}
```
@@ -455,108 +455,108 @@ type: api
### 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 their 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 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`.
- 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._propriete`.
- 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 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 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 fraiche 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 clone 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'instances
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
- // must use function when in Vue.extend()
- var Component = Vue.extend({
+ // data doit être une fonction lorsqu'utilisée dans Vue.extend()
+ var Composant = Vue.extend({
data: function () {
return { a: 1 }
}
})
```
- Note that if you use an arrow function with the `data` property, `this` won't be the component's instance, but you can still access the instance as the function's first argument:
+ 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 :
```js
data: vm => ({ a: vm.myProp })
```
-- **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 an Array-based simple 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 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.
- With Object-based syntax, you can use following options:
- - `type`: can be one of the following native constructors: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, any custom constructor function or an array of those. Will check if a prop has a given type, and will throw a warning if it doesn't. [More information](../guide/components-props.html#Prop-Types) on prop types.
- - `default`: `any`
- Specifies a default value for the prop. If the prop is not passed, this value will be used instead. Object or array defaults must be returned from a factory function.
- - `required`: `Boolean`
- Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.
- - `validator`: `Function`
- Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation [here](../guide/components-props.html#Prop-Validation).
+ 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](../guide/components-props.html#Types-des-props) 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](../guide/components-props.html#Validation-des-props).
-- **Example:**
+- **Exemple :**
``` js
- // simple syntax
- Vue.component('props-demo-simple', {
- props: ['size', 'myMessage']
+ // syntaxe simple
+ Vue.component('props-démo-simple', {
+ props: ['taille', 'monMessage']
})
- // object syntax with validation
- Vue.component('props-demo-advanced', {
+ // syntaxe avancée avec validation
+ Vue.component('props-démo-avancée', {
props: {
- // type check
- height: Number,
- // type check plus other validations
- age: {
- type: Number,
+ // 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 (value) {
- return value >= 0
+ validator: function (valeur) {
+ return valeur >= 0
}
}
}
})
```
-- **See also:** [Props](../guide/components-props.html)
+- **Voir aussi :** [Props](../guide/components-props.html)
### 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:**
+- **Exemple :**
``` js
var Comp = Vue.extend({
@@ -566,20 +566,20 @@ type: api
var vm = new Comp({
propsData: {
- msg: 'hello'
+ msg: 'salut'
}
})
```
### 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 if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument:
+ 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 :
```js
computed: {
@@ -587,19 +587,19 @@ type: api
}
```
- 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
+ // accesseur uniquement
aDouble: function () {
return this.a * 2
},
- // both get and set
+ // accesseur et mutateur à la fois
aPlus: {
get: function () {
return this.a + 1
@@ -616,19 +616,19 @@ 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.
-
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.
+
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`.
-- **Example:**
+- **Exemple :**
```js
var vm = new Vue({
@@ -643,17 +643,17 @@ type: api
vm.a // 2
```
-- **See also:** [Event Handling](../guide/events.html)
+- **Voir aussi :** [Gestion des évènements](../guide/events.html)
### watch
-- **Type:** `{ [key: string]: string | Function | Object | Array}`
+- **Type :** `{ [key: string]: string | Function | Object | Array }`
-- **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 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.
-- **Example:**
+- **Exemple :**
``` js
var vm = new Vue({
@@ -669,115 +669,115 @@ type: api
}
},
watch: {
- a: function (val, oldVal) {
- console.log('new: %s, old: %s', val, oldVal)
+ a: function (valeur, ancienneValeur) {
+ console.log('nouveau: %s, ancien: %s', valeur, ancienneValeur)
},
- // string method name
- b: 'someMethod',
- // the callback will be called whenever any of the watched object properties change regardless of their nested depth
+ // 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 (val, oldVal) { /* ... */ },
+ handler: function (valeur, ancienneValeur) { /* ... */ },
deep: true
},
- // the callback will be called immediately after the start of the observation
+ // la fonction de rappel va être appelée immédiatement après le début de l'observation
d: {
- handler: 'someMethod',
+ handler: 'uneMéthode',
immediate: true
},
- // you can pass array of callbacks, they will be called one-by-one
+ // vous pouvez passer un tableau de fonctions de rappel, elles seront appelées une par une
e: [
'handle1',
- function handle2 (val, oldVal) { /* ... */ },
+ function handle2 (valeur, ancienneValeur) { /* ... */ },
{
- handler: function handle3 (val, oldVal) { /* ... */ },
+ handler: function handle3 (valeur, ancienneValeur) { /* ... */ },
/* ... */
}
],
- // watch vm.e.f's value: {g: 5}
- 'e.f': function (val, oldVal) { /* ... */ }
+ // observe la valeur de `vm.e.f` : `{g: 5}`
+ 'e.f': function (valeur, ancienneValeur) { /* ... */ }
}
})
- vm.a = 2 // => new: 2, old: 1
+ vm.a = 2 // => nouveau : 2, ancien : 1
```
-
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.
+
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`.
-- **See also:** [Instance Methods / Data - vm.$watch](#vm-watch)
+- **Voir aussi :** [Méthodes et données d'instance - vm.$watch](#vm-watch)
## Options / DOM
### el
-- **Type:** `string | Element`
+- **Type :** `string | Element`
-- **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 `
`.
-
If neither `render` function nor `template` option is present, the in-DOM HTML of the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.
+
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.
-- **See also:**
- - [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
- - [Runtime + Compiler vs. Runtime-only](../guide/installation.html#Runtime-Compiler-vs-Runtime-only)
+- **Voir aussi :**
+ - [Diagramme du cycle de vie](../guide/instance.html#Diagramme-du-cycle-de-vie)
+ - [Runtime + Compiler vs. Runtime seul](../guide/installation.html#Runtime-Compiler-vs-Runtime-seul)
### 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.
+ 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.
- If the string starts with `#` it will be used as a querySelector and use the selected element's innerHTML as the template string. This allows the use of the common `
{% endraw %}
- Using `$emit` with additional arguments:
+ Utiliser `$emit` avec des arguments additionnels :
```js
Vue.component('magic-eight-ball', {
data: function () {
return {
- possibleAdvice: ['Yes', 'No', 'Maybe']
+ possibleAdvice: ['Oui', 'Non', 'Peut-être']
}
},
methods: {
@@ -1759,7 +1759,7 @@ type: api
},
template: `
`
})
@@ -1790,7 +1790,7 @@ type: api
Vue.component('magic-eight-ball', {
data: function () {
return {
- possibleAdvice: ['Yes', 'No', 'Maybe']
+ possibleAdvice: ['Oui', 'Non', 'Peut-être']
}
},
methods: {
@@ -1801,7 +1801,7 @@ type: api
},
template: `
`
})
@@ -1816,198 +1816,198 @@ type: api
{% endraw %}
-## Instance Methods / Lifecycle
+## Méthodes d'Instance / Cycle de Vie
-### vm.$mount( [elementOrSelector] )
+### vm.$mount( [élémentOuSelecteur] )
-- **Arguments:**
- - `{Element | string} [elementOrSelector]`
- - `{boolean} [hydrating]`
+- **Arguments :**
+ - `{Element | string} [élémentOuSelecteur]`
+ - `{boolean} [hydratation]`
-- **Returns:** `vm` - the instance itself
+- **Retourne :** `vm` - l'instance elle-même
-- **Usage:**
+- **Utilisation :**
- If a Vue instance didn't receive the `el` option at instantiation, it will be in "unmounted" state, without an associated DOM element. `vm.$mount()` can be used to manually start the mounting of an unmounted Vue instance.
+ 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.
- If `elementOrSelector` argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.
+ 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.
- The method returns the instance itself so you can chain other instance methods after it.
+ La méthode retourne l'instance elle-même afin que vous puissiez chainer d'autres méthodes d'instance ensuite.
-- **Example:**
+- **Exemple :**
``` js
- var MyComponent = Vue.extend({
- template: '
Hello!
'
+ var MonComposant = Vue.extend({
+ template: '
Salut!
'
})
- // create and mount to #app (will replace #app)
- new MyComponent().$mount('#app')
+ // crée et monte sur #app (remplacera #app)
+ new MonComposant().$mount('#app')
- // the above is the same as:
- new MyComponent({ el: '#app' })
+ // le code ci-dessus est l'équivalent de :
+ new MonComposant({ el: '#app' })
- // or, render off-document and append afterwards:
- var component = new MyComponent().$mount()
- document.getElementById('app').appendChild(component.$el)
+ // 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)
```
-- **See also:**
- - [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
- - [Server-Side Rendering](../guide/ssr.html)
+- **Voir aussi :**
+ - [Diagramme du cycle de vie](../guide/instance.html#Diagramme-du-cycle-de-vie)
+ - [Rendu côté serveur](../guide/ssr.html)
### vm.$forceUpdate()
-- **Usage:**
+- **Utilisation :**
- Force the Vue instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content.
+ 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:**
+- **Arguments :**
- `{Function} [callback]`
-- **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. This is the same as the global `Vue.nextTick`, except that the callback's `this` context is automatically bound to the instance calling this method.
+ 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.
- > New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment. Please note that Vue does not come with a Promise polyfill, so if you target browsers that don't support Promises natively (looking at you, IE), you will have to provide a polyfill yourself.
+ > 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.
-- **Example:**
+- **Exemple :**
``` js
new Vue({
// ...
methods: {
// ...
- example: function () {
- // modify data
- this.message = 'changed'
- // DOM is not updated yet
+ exemple: function () {
+ // modifie des données
+ this.message = 'changé'
+ // le DOM n'est pas encore mis à jour
this.$nextTick(function () {
- // DOM is now updated
- // `this` is bound to the current instance
- this.doSomethingElse()
+ // le DOM est maintenant à jour
+ // `this` est lié à l'instance courante
+ this.faireAutreChose()
})
}
}
})
```
-- **See also:**
+- **Voir aussi :**
- [Vue.nextTick](#Vue-nextTick)
- - [Async Update Queue](../guide/reactivity.html#Async-Update-Queue)
+ - [File d’attente de mise à jour asynchrone](../guide/reactivity.html#File-d’attente-de-mise-a-jour-asynchrone)
### vm.$destroy()
-- **Usage:**
+- **Utilisation :**
- Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners.
+ 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.
- Triggers the `beforeDestroy` and `destroyed` hooks.
+ Déclenche les hooks `beforeDestroy` et `destroyed`.
-
In normal use cases you shouldn't have to call this method yourself. Prefer controlling the lifecycle of child components in a data-driven fashion using `v-if` and `v-for`.
+
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`.
-- **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram)
+- **Voir aussi :** [Diagramme du cycle de vie](../guide/instance.html#Diagramme-du-cycle-de-vie)
## Directives
### v-text
-- **Expects:** `string`
+- **Attend comme valeur :** `string`
-- **Details:**
+- **Détails :**
- Updates the element's `textContent`. If you need to update the part of `textContent`, you should use `{% raw %}{{ Mustache }}{% endraw %}` interpolations.
+ 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 `{% raw %}{{ Mustache }}{% endraw %}`.
-- **Example:**
+- **Exemple :**
```html
-
+
{{msg}}
```
-- **See also:** [Data Binding Syntax - Interpolations](../guide/syntax.html#Text)
+- **Voir aussi :** [Syntaxe de liaison de données - Interpolations](../guide/syntax.html#Texte)
### v-html
-- **Expects:** `string`
+- **Attend comme valeur :** `string`
-- **Details:**
+- **Détails :**
- Updates the element's `innerHTML`. **Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates**. If you find yourself trying to compose templates using `v-html`, try to rethink the solution by using components instead.
+ 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.
-
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.
+
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](https://fr.wikipedia.org/wiki/Cross-site_scripting). Utilisez `v-html` uniquement avec du contenu de confiance et **jamais** avec du contenu fourni par les utilisateurs.
-
In [single-file components](../guide/single-file-components.html), `scoped` styles will not apply to content inside `v-html`, because that HTML is not processed by Vue's template compiler. If you want to target `v-html` content with scoped CSS, you can instead use [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html) or an additional, global `
```
-The optional `scoped` attribute automatically scopes this CSS to your component by adding a unique attribute (such as `data-v-21e5b78`) to elements and compiling `.list-container:hover` to something like `.list-container[data-v-21e5b78]:hover`.
+L'attribut optionnel `scoped` encapsule automatiquement ce CSS dans votre composant en ajoutant un unique attribut (par exemple `data-v-21e5b78`) à l'élément en compilant `.list-container:hover` en `.list-container[data-v-21e5b78]:hover`.
-Lastly, the styling in Vue's single-file components is very flexible. Through [vue-loader](https://github.com/vuejs/vue-loader), you can use any preprocessor, post-processor, and even deep integration with [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html) -- all within the `
{% endraw %}
-You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the `currentTabComponent`.
+Vous remarquerez que si vous sélectionnez un post, puis basculez sur l'onglet _Archive_, puis rebasculer à nouveau sur _Posts_, il n'affiche plus le post que vous avez initialement sélectionné. En effet, chaque fois que vous basculez vers un nouvel onglet, Vue crée une nouvelle instance du `composantOngletActuel`.
-Recreating dynamic components is normally useful behavior, but in this case, we'd really like those tab component instances to be cached once they're created for the first time. To solve this problem, we can wrap our dynamic component with a `` element:
+Recréer des composants dynamiques est d'habitude un comportement utile, mais dans ce cas précis, nous aimerions bien que ces instances de composants onglets soient mises en cache après qu'elles aient été créées pour la première fois. Pour résoudre ce problème, nous pouvons envelopper notre composant dynamique dans un élément `` :
``` html
-
+
-
+
```
-Check out the result below:
+Observez le résultat ci-dessous :
{% raw %}
@@ -179,7 +179,7 @@ Check out the result below:
>{{ tab }}
@@ -192,7 +192,7 @@ new Vue({
tabs: ['Posts', 'Archive']
},
computed: {
- currentTabComponent: function () {
+ composantOngletActuel: function () {
return 'tab-' + this.currentTab.toLowerCase()
}
}
@@ -200,83 +200,83 @@ new Vue({
{% endraw %}
-Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components) for the complete code.
+Désormais, l'onglet _Posts_ conserve son état (le post sélectionné) même lorsqu'il n'est pas dessiné. Consultez [ce fiddle](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components) pour le code complet.
-
Note that `` requires the components being switched between to all have names, either using the `name` option on a component, or through local/global registration.
+
Notez que `` requiert que tous les sous-composants aient un nom, soit via l'option `name` des composants, soit via une inscription locale/globale de ces composants.
-Check out more details on `` in the [API reference](../api/#keep-alive).
+Pour plus de détails sur ``, consultez la [référence API](../api/#keep-alive).
-## Async Components
+## Composants asynchrones
-
-In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
+Dans de grosses applications, nous pouvons avoir besoin de diviser l'application en morceaux plus petits et charger un composant depuis le serveur seulement lorsque celui-ci est requis. Pour rendre cela plus facile, Vue vous permet de définir un composant en tant que fonction usine qui va résoudre de façon asynchrone la définition de votre composant. Vue déclenchera la fonction usine seulement lorsque le rendu du composant est nécessaire, et mettra en cache le résultat pour les futurs nouveaux rendus. Par exemple :
``` js
-Vue.component('async-example', function (resolve, reject) {
+Vue.component('exemple-async', function (resolve, reject) {
setTimeout(function () {
- // Pass the component definition to the resolve callback
+ // Passe la définition du composant à la fonction de rappel `resolve`
resolve({
- template: '
I am async!
'
+ template: '
Je suis asynchrone !
'
})
}, 1000)
})
```
-As you can see, the factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is for demonstration; how to retrieve the component is up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting/):
+Comme vous pouvez le voir, la fonction usine reçoit en paramètre `resolve`, une fonction de rappel (*callback*) qui sera appelée lorsque vous aurez récupéré la définition du composant depuis le serveur. Vous pouvez également appeler `reject(raison)` pour indiquer que le chargement a échoué pour une certaine raison. Le `setTimeout` est là en guise de démonstration ; à vous de décider comment vous souhaitez récupérer le composant. Une approche recommandée est d'utiliser les composants asynchrones conjointement avec la [fonctionnalité de découpage de code de webpack](https://webpack.js.org/guides/code-splitting/):
``` js
-Vue.component('async-webpack-example', function (resolve) {
- // This special require syntax will instruct Webpack to
- // automatically split your built code into bundles which
- // are loaded over Ajax requests.
- require(['./my-async-component'], resolve)
+Vue.component('exemple-webpack-async', function (resolve) {
+ // Cette syntaxe spéciale `require` indique à webpack de
+ // diviser automatiquement votre code en sortie en paquets
+ // qui seront chargés via des requêtes AJAX.
+ require(['./mon-composant-async'], resolve)
})
```
-You can also return a `Promise` in the factory function, so with Webpack 2 and ES2015 syntax you can make use of dynamic imports:
+Vous pouvez également retourner une `Promise` dans la fonction usine, ainsi avec webpack 2 et la syntaxe ES2015 vous pourrez écrire :
``` js
Vue.component(
- 'async-webpack-example',
- // A dynamic import returns a Promise.
- () => import('./my-async-component')
+ 'exemple-webpack-async',
+ // La fonction `import` dynamique retourne une `Promise`.
+ () => import('./mon-composant-async')
)
```
-When using [local registration](components-registration.html#Local-Registration), you can also directly provide a function that returns a `Promise`:
+Quand vous utilisez [l'inscription locale](components-registration.html#Local-Registration) de composant, vous pouvez aussi fournir directement une fonction qui retourne une `Promise` :
``` js
new Vue({
// ...
components: {
- 'my-component': () => import('./my-async-component')
+ 'mon-composant': () => import('./mon-composant-async')
}
})
```
-
If you're a Browserify user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/v2.vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.
+
Si vous êtes un utilisateur de Browserify et souhaitez utiliser les composants asynchrones, son créateur a malheureusement [été très clair](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) sur le fait que le chargement asynchrone n'est pas quelque-chose que Browserify supportera un jour. Officiellement du moins. La communauté Browserify a trouvé [quelques solutions de contournement](https://github.com/vuejs/v2.vuejs.org/issues/620), qui peuvent s'avérer utiles pour les applications complexes existantes. Pour tous les autres scénarios, nous recommandons d'utiliser webpack pour un support natif et de première classe de l'asynchrone.
-### Handling Loading State
+### Gérer l'état de chargement
-> New in 2.3.0+
+> Nouveauté de la 2.3.0+
-The async component factory can also return an object of the following format:
+La fabrique de composants asynchrones peut aussi retourner un objet avec le format suivant :
``` js
const AsyncComponent = () => ({
- // The component to load (should be a Promise)
- component: import('./MyComponent.vue'),
- // A component to use while the async component is loading
+ // Le composant à charger (doit être une `Promise`)
+ component: import('./MonComposant.vue'),
+ // Un composant à utiliser pendant que le composant asynchrone se charge
loading: LoadingComponent,
- // A component to use if the load fails
+ // Un composant d'erreur à utiliser au cas où le chargement échoue
error: ErrorComponent,
- // Delay before showing the loading component. Default: 200ms.
+ // Le délai à patienter avant d'afficher le composant de chargement. Par défaut : 200ms.
delay: 200,
- // The error component will be displayed if a timeout is
- // provided and exceeded. Default: Infinity.
+ // Le composant d'erreur sera affiché si un délai de timeout est fourni et dépassé.
+ // Par défaut: délai infini.
timeout: 3000
})
```
-> Note that you must use [Vue Router](https://github.com/vuejs/vue-router) 2.4.0+ if you wish to use the above syntax for route components.
+> Notez que vous devez utiliser [Vue Router](https://github.com/vuejs/vue-router) en version 2.4.0+ si vous souhaitez utiliser la syntaxe ci-dessus pour des composants de routes.
diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md
index ce67f1b0e5..a66d2b6f93 100644
--- a/src/v2/guide/components-edge-cases.md
+++ b/src/v2/guide/components-edge-cases.md
@@ -1,23 +1,23 @@
---
-title: Handling Edge Cases
+title: Gérer les cas limites
type: guide
order: 106
---
-> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
-
All the features on this page document the handling of edge cases, meaning unusual situations that sometimes require bending Vue's rules a little. Note however, that they all have disadvantages or situations where they could be dangerous. These are noted in each case, so keep them in mind when deciding to use each feature.
+
Toutes les fonctionnalités sur cette page documentent la gestion de cas limites, c'est-à-dire des situations peu ordinaires qui requièrent parfois de contourner légèrement les règles de Vue. Notez cependant qu'elles ont toutes des inconvénients ou des situations où elles peuvent s'avérer dangereuses. Celles-si sont décrites dans chaque cas, donc gardez-les en tête quand vous décidez d'utiliser chaque fonctionnalité.
-## Element & Component Access
+## Élément et accès au composant
-In most cases, it's best to avoid reaching into other component instances or manually manipulating DOM elements. There are cases, however, when it can be appropriate.
+Dans la plupart des cas, il vaut mieux éviter d'accéder à d'autres instances de composant ou de manipuler manuellement des éléments du DOM. Cependant, il y a des cas où cela peut être approprié.
-### Accessing the Root Instance
+### Accéder à l'instance racine
-In every subcomponent of a `new Vue` instance, this root instance can be accessed with the `$root` property. For example, in this root instance:
+Dans chaque sous-composant d'une nouvelle instance de Vue (`new Vue`), on peut accéder à cette instance racine via la propriété `$root`. Par exemple, dans cette instance racine :
```js
-// The root Vue instance
+// l'instance Vue racine
new Vue({
data: {
foo: 1
@@ -31,31 +31,31 @@ new Vue({
})
```
-All subcomponents will now be able to access this instance and use it as a global store:
+Tous les sous-composants pourront accéder à cette instance et l'utiliser comme un espace de stockage global :
```js
-// Get root data
+// Récupérer une donnée de la racine
this.$root.foo
-// Set root data
+// Affecter une donnée de la racine
this.$root.foo = 2
-// Access root computed properties
+// Accéder aux propriétés calculées de la racine
this.$root.bar
-// Call root methods
+// Appeler des méthodes de la racine
this.$root.baz()
```
-
This can be convenient for demos or very small apps with a handful of components. However, the pattern does not scale well to medium or large-scale applications, so we strongly recommend using Vuex to manage state in most cases.
+
Cela peut être pratique pour des démos ou des applications très petites avec une poignée de composants. Cependant, ce pattern se prête mal aux applications de moyenne à grande échelle, c'est pourquoi nous recommandons fortement d'utiliser Vuex pour gérer l'état dans la plupart des cas.
-### Accessing the Parent Component Instance
+### Accéder à l'instance de composant parente
-Similar to `$root`, the `$parent` property can be used to access the parent instance from a child. This can be tempting to reach for as a lazy alternative to passing data with a prop.
+Comme `$root`, la propriété `$parent` peut être utilisée pour accéder à l'instance parente à partir d'un enfant. Il peut être tentant de l'utiliser par fainéantise plutôt que de passer les données via une prop.
-
In most cases, reaching into the parent makes your application more difficult to debug and understand, especially if you mutate data in the parent. When looking at that component later, it will be very difficult to figure out where that mutation came from.
+
Dans la plupart des cas, accéder au parent rend votre application plus difficile à déboguer et à comprendre, surtout si vous mutez des données dans le parent. En regardant ce composant plus tard, il sera très difficile de découvrir d'où vient cette mutation.
-There are cases however, particularly shared component libraries, when this _might_ be appropriate. For example, in abstract components that interact with JavaScript APIs instead of rendering HTML, like these hypothetical Google Maps components:
+Il y a des cas cependant où cela _pourrait_ être approprié, notamment dans des bibliothèques de composants liés entre eux. Par exemple, dans des composants abstraits qui interagissent avec des APIs JavaScript plutôt que de produire du HTML, tels que ces composants Google Maps :
```html
@@ -63,9 +63,9 @@ There are cases however, particularly shared component libraries, when this _mig
```
-The `` component might define a `map` property that all subcomponents need access to. In this case `` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance).
+Le composant `` peut définir une propriété `map` à laquelle tous les sous-composants ont besoin d'accéder. Dans ce cas, `` peut vouloir accéder à cette carte avec quelque-chose comme `this.$parent.getMap`, afin d'ajouter des marqueurs dessus. Vous pouvez voir ce pattern [en démonstration ici](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance).
-Keep in mind, however, that components built with this pattern are still inherently fragile. For example, imagine we add a new `` component and when `` appears within that, it should only render markers that fall within that region:
+Gardez en tête, toutefois, que les composants conçus avec ce pattern sont toujours intrinsèquement fragiles. Par exemple, imaginons que nous ajoutons un nouveau composant `` et que lorsque `` apparaît à l'intérieur, il affiche uniquement les marqueurs de cette région :
```html
@@ -75,58 +75,58 @@ Keep in mind, however, that components built with this pattern are still inheren
```
-Then inside `` you might find yourself reaching for a hack like this:
+Alors, à l'intérieur de ``, vous pourriez vous retrouver à devoir recourir à des bricolages comme ceci:
```js
var map = this.$parent.map || this.$parent.$parent.map
```
-This has quickly gotten out of hand. That's why to provide context information to descendant components arbitrarily deep, we instead recommend [dependency injection](#Dependency-Injection).
+Cela a rapidement mal tourné. C'est pourquoi nous recommandons plutôt d'utiliser l'[injection de dépendances](#Dependency-Injection) pour fournir des informations contextuelles à des composants enfants à un niveau de profondeur arbitraire.
-### Accessing Child Component Instances & Child Elements
+### Accéder à des instances de composants enfants et des éléments enfants
-Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component using the `ref` attribute. For example:
+Malgré l'existence des props et des événements, parfois vous pouvez toujours avoir besoin d'accéder directement à un composant enfant en JavaScript. Pour y parvenir, vous pouvez assigner un ID référence au composant enfant en utilisant l'attribut `ref`. Par exemple :
```html
```
-Now in the component where you've defined this `ref`, you can use:
+Ensuite, dans le composant où vous avez défini cette `ref`, vous pouvez utiliser :
```js
this.$refs.usernameInput
```
-to access the `` instance. This may be useful when you want to, for example, programmatically focus this input from a parent. In that case, the `` component may similarly use a `ref` to provide access to specific elements inside it, such as:
+pour accéder à l'instance ``. Cela peut être utile si vous voulez, par exemple, donner programmatiquement le focus à ce champ depuis le parent. Dans ce cas, le composant `` peut de la même façon utiliser une `ref` pour fournir l'accès à des éléments spécifiques à l'intérieur, tels que :
```html
```
-And even define methods for use by the parent:
+Et même définir des méthodes à utiliser par le parent :
```js
methods: {
- // Used to focus the input from the parent
+ // utilisé pour mettre le focus sur ce champ à partir du parent
focus: function () {
this.$refs.input.focus()
}
}
```
-Thus allowing the parent component to focus the input inside `` with:
+Et ainsi permettre au composant parent de mettre le focus sur le champ à l'intérieur de `` avec :
```js
this.$refs.usernameInput.focus()
```
-When `ref` is used together with `v-for`, the ref you get will be an array containing the child components mirroring the data source.
+Quand `ref` est utilisé conjointement avec `v-for`, la ref que vous obtenez sera un `Array` contenant les composants enfants reflétant les données source.
-
$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.
+
Les références $refs sont renseignées seulement après le rendu initial du composant, et elles ne sont pas réactives. Il s'agit seulement d'une trappe de sortie pour faire de la manipulation directe d'enfants - vous devriez éviter d'accéder aux $refs depuis l'intérieur de templates ou depuis des propriétés calculées.
-### Dependency Injection
+### Injection de dépendances
-Earlier, when we described [Accessing the Parent Component Instance](#Accessing-the-Parent-Component-Instance), we showed an example like this:
+Précédemment, quand nous avons décrit l'[accès à l'instance de composant parente](#Acceder-a-l’instance-de-composant-parente), nous avons montré un exemple comme ceci :
```html
@@ -136,9 +136,9 @@ Earlier, when we described [Accessing the Parent Component Instance](#Accessing-
```
-In this component, all descendants of `` needed access to a `getMap` method, in order to know which map to interact with. Unfortunately, using the `$parent` property didn't scale well to more deeply nested components. That's where dependency injection can be useful, using two new instance options: `provide` and `inject`.
+Dans ce composant, tous les descendants de `` avaient besoin d'accéder à une méthode `getMap`, afin de savoir avec quelle carte interagir. malheureusement, utiliser la propriété `$parent` s'adapte mal avec des composants imbriqués plus profondément. C'est là où l'injection de dépendances peut s'avérer utile, en utilisant deux nouvelles options d'instance : `provide` et `inject`.
-The `provide` options allows us to specify the data/methods we want to **provide** to descendant components. In this case, that's the `getMap` method inside ``:
+Les options `provide` nous permettent de spécifier quelles données/méthodes nous voulons **fournir** aux composants descendants. Dans ce cas, il s'agit de la méthode `getMap` à l'intérieur de ``:
```js
provide: function () {
@@ -148,56 +148,56 @@ provide: function () {
}
```
-Then in any descendants, we can use the `inject` option to receive specific properties we'd like to add to that instance:
+Ensuite, dans n'importe quel descendant, nous pouvons utiliser l'option `inject` pour récupérer des propriétés spécifiques que nous voulons ajouter à cette instance :
```js
inject: ['getMap']
```
-You can see the [full example here](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of ``. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`.
+Vous pouvez voir l'[exemple complet ici](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection). L'avantage par rapport à `$parent` est que nous pouvons accéder à `getMap` dans _n'importe quel_ composant descendant, sans avoir à exposer l'instance entière de ``. Cela nous permet de continuer à développer ce composant de façon plus sûre, sans crainte de devoir changer/supprimer quelque-chose sur lequel repose un composant enfant. L'interface entre ces composants reste clairement définie, tout comme avec les `props`.
-In fact, you can think of dependency injection as sort of "long-range props", except:
+En fait, vous pouvez vous représenter l'injection de dépendances comme une sorte de « props à longue distance », sauf que :
-* ancestor components don't need to know which descendants use the properties it provides
-* descendant components don't need to know where injected properties are coming from
+* les composants ancêtres n'ont pas besoin de connaître quels descendants utilisent les propriétés qu'ils fournissent
+* les composants descendants n'ont pas besoin de savoir d'où proviennent les propriétés injectées
-
However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as using $root for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like Vuex instead.
+
Cependant, il y a des inconvénients à l'injection de dépendances. Cela vient entériner la manière dont les composants sont actuellement organisés dans votre application, rendant plus difficile le remaniement de code. De plus, les propriétés fournies avec `provide` ne sont pas réactives. Cela a été intentionnellement conçu de cette façon, car les utiliser pour créer un espace de stockage global est tout aussi peu évolutif que d'utiliser $root dans le même but. Si les propriétés que vous voulez partager sont spécifiques à votre application et non génériques, ou si jamais vous voulez mettre à jour des données fournies par des ancêtres, alors c'est un signe que vous avez probablement besoin d'une réelle solution de gestion d'état telle que Vuex à la place.
-Learn more about dependency injection in [the API doc](/v2/api/#provide-inject).
+Apprenez-en plus sur l'injection de dépendances dans [la documentation de l'API](/v2/api/#provide-inject).
-## Programmatic Event Listeners
+## Écouteurs d'événements programmatiques
-So far, you've seen uses of `$emit`, listened to with `v-on`, but Vue instances also offer other methods in its events interface. We can:
+Jusqu'à présent, vous avez vu des utilisations de `$emit`, écoutés avec `v-on`, mais les instances de Vue proposent aussi d'autres méthodes dans leur interface d'événements. Nous pouvons :
-- Listen for an event with `$on(eventName, eventHandler)`
-- Listen for an event only once with `$once(eventName, eventHandler)`
-- Stop listening for an event with `$off(eventName, eventHandler)`
+- Écouter un événement avec `$on(eventName, eventHandler)`
+- Écouter un événement une seule fois avec `$once(eventName, eventHandler)`
+- Arrêter d'écouter un événement avec `$off(eventName, eventHandler)`
-You normally won't have to use these, but they're available for cases when you need to manually listen for events on a component instance. They can also be useful as a code organization tool. For example, you may often see this pattern for integrating a 3rd-party library:
+Vous n'aurez pas à les utiliser normalement, mais ils sont disponibles dans les cas où vous avez besoin d'écouter manuellement des événements sur une instance de composant. Ils peuvent aussi être utiles comme outil d'organisation de code. Par exemple, vous pouvez souvent voir ce pattern pour intégrer une bibliothèque tierce :
```js
-// Attach the datepicker to an input once
-// it's mounted to the DOM.
+// Attache un sélecteur de date à un champ
+// une fois celui-ci monté sur le DOM.
mounted: function () {
- // Pikaday is a 3rd-party datepicker library
+ // Pikaday est une bibliothèque tierce de sélecteur de date
this.picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
},
-// Right before the component is destroyed,
-// also destroy the datepicker.
+// Juste avant que le composant soit détruit,
+// on détruit également le sélecteur de date.
beforeDestroy: function () {
this.picker.destroy()
}
```
-This has two potential issues:
+Il y a deux problèmes potentiels :
-- It requires saving the `picker` to the component instance, when it's possible that only lifecycle hooks need access to it. This isn't terrible, but it could be considered clutter.
-- Our setup code is kept separate from our cleanup code, making it more difficult to programmatically clean up anything we set up.
+- Cela requiert d'enregistrer le `picker` dans l'instance de composant, alors qu'il est possible que seuls les hooks de cycle de vie aient besoin d'y accéder. Ce n'est pas très grave, mais cela peut être considéré comme de l'encombrement.
+- Notre code de montage du composant est séparé du code de nettoyage, ce qui rend plus difficile de nettoyer programmatiquement tout ce que nous avons mis en place avant.
-You could resolve both issues with a programmatic listener:
+Vous pouvez résoudre ces deux problèmes avec un écouteur programmatique :
```js
mounted: function () {
@@ -212,7 +212,7 @@ mounted: function () {
}
```
-Using this strategy, we could even use Pikaday with several input elements, with each new instance automatically cleaning up after itself:
+En utilisant cette stratégie, nous pouvons même utiliser Pikaday sur plusieurs champs, avec chaque nouvelle instance qui nettoiera automatiquement après son passage :
```js
mounted: function () {
@@ -233,42 +233,42 @@ methods: {
}
```
-See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners) for the full code. Note, however, that if you find yourself having to do a lot of setup and cleanup within a single component, the best solution will usually be to create more modular components. In this case, we'd recommend creating a reusable `` component.
+Consultez [ce fiddle](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners) pour le code complet. Notez cependant que si vous vous trouvez à devoir faire beaucoup de code de montage et de nettoyage au sein d'un seul composant, la meilleure solution sera souvent de créer des composants plus modulaires. Dans le cas présent, nous recommanderions de créer un composant réutilisable ``.
-To learn more about programmatic listeners, check out the API for [Events Instance Methods](/v2/api/#Instance-Methods-Events).
+Pour en apprendre plus sur les écouteurs programmatiques, allez voir l'API des [méthodes d'événements d'une instance](/v2/api/#Instance-Methods-Events).
-
Note that Vue's event system is different from the browser's EventTarget API. Though they work similarly, $emit, $on, and $off are not aliases for dispatchEvent, addEventListener, and removeEventListener.
+
Notez que le système d'événements de Vue est différent de celui de l'API EventTarget du navigateur. Bien qu'ils fonctionnent de façon similaire, $emit, $on, et $off ne sont pas des alias pour dispatchEvent, addEventListener, et removeEventListener.
-## Circular References
+## Références circulaires
-### Recursive Components
+### Composants récursifs
-Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option:
+Les composants peuvent récursivement s'invoquer eux-mêmes dans leur propre template. Cependant, ils peuvent seulement le faire avec l'option `name` :
``` js
-name: 'unique-name-of-my-component'
+name: 'nom-unique-de-mon-composant'
```
-When you register a component globally using `Vue.component`, the global ID is automatically set as the component's `name` option.
+Quand vous inscrivez globalement un composant en utilisant `Vue.component`, l'ID global est automatiquement assigné comme option `name` du composant.
``` js
-Vue.component('unique-name-of-my-component', {
+Vue.component('nom-unique-de-mon-composant', {
// ...
})
```
-If you're not careful, recursive components can also lead to infinite loops:
+Si vous n'êtes pas prudents, les composants récursifs peuvent mener à des boucles infinies :
``` js
name: 'stack-overflow',
template: '
'
```
-A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
+Un composant comme ci-dessus résultera en une erreur « Taille maximale de la pile dépassée », donc assurez-vous de rendre conditionnelle l'invocation récursive (par ex. avec un `v-if` qui sera `false` à la fin).
-### Circular References Between Components
+### Références circulaires entre composants
-Let's say you're building a file directory tree, like in Finder or File Explorer. You might have a `tree-folder` component with this template:
+Supposons que vous construisez un arbre de répertoires de fichiers, comme le Finder ou l'explorateur de fichiers. Vous pourriez avoir un composant `tree-folder` avec ce template :
``` html
@@ -277,7 +277,7 @@ Let's say you're building a file directory tree, like in Finder or File Explorer
```
-Then a `tree-folder-contents` component with this template:
+Puis un composant `tree-folder-contents` avec ce template:
``` html
@@ -288,17 +288,17 @@ Then a `tree-folder-contents` component with this template:
```
-When you look closely, you'll see that these components will actually be each other's descendant _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here.
+Si vous regardez de plus près, vous verrez que ces composants sont en fait les descendants __et__ ancêtres l'un de l'autre dans l'arbre de rendu - un paradoxe ! Quand vous inscrivez des composants globalement avec `Vue.component`, ce paradoxe est résolu automatiquement pour vous. Si c'est votre cas, vous pouvez arrêter de lire ici.
-However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
+Cependant, si vous importez des composants en utilisant un __système de modules__, p.ex. via Webpack ou Browserify, vous aurez une erreur :
```
Failed to mount component: template or render function not defined.
```
-To explain what's happening, let's call our components A and B. The module system sees that it needs A, but first A needs B, but B needs A, but A needs B, etc. It's stuck in a loop, not knowing how to fully resolve either component without first resolving the other. To fix this, we need to give the module system a point at which it can say, "A needs B _eventually_, but there's no need to resolve B first."
+Pour expliquer ce qui se passe, appelons nos composants A et B. Le système de modules sait qu'il a besoin de A, mais A a d'abord besoin de B, mais B a besoin de A, mais A a besoin de B, etc. Il est alors bloqué dans une boucle, ne sachant pas comment résoudre un composant sans devoir d'abord résoudre l'autre. Pour corriger cela, nous devons donner au système de modules un point où il peut dire, "A aura _prochainement_ besoin de B, mais il n'y a pas besoin de résoudre B en premier."
-In our case, let's make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
+Dans notre cas, faisons de ce point le composant `tree-folder`. Nous savons que l'enfant qui crée le paradoxe est le composant `tree-folder-contents`, donc nous allons attendre le hook de cycle de vie `beforeCreate` avant de l'inscrire :
``` js
beforeCreate: function () {
@@ -306,7 +306,7 @@ beforeCreate: function () {
}
```
-Or alternatively, you could use Webpack's asynchronous `import` when you register the component locally:
+Ou comme alternative, vous pouvez utiliser l'`import` asynchrone de Webpack lorsque vous inscrivez le composant localement :
``` js
components: {
@@ -314,30 +314,30 @@ components: {
}
```
-Problem solved!
+Problème résolu !
-## Alternate Template Definitions
+## Définitions alternatives de template
-### Inline Templates
+### Templates inline
-When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
+Quand l'attribut spécial `inline-template` est présent sur un composant enfant, le composant utilisera son contenu interne comme template, plutôt que de le traiter comme contenu distribué. Cela permet plus de flexibilité dans la création de templates.
``` html
-
These are compiled as the component's own template.
-
Not parent's transclusion content.
+
Ces éléments sont compilés en tant que propre template du composant.
+
Et non le contenu du parent par transclusion.
```
-Your inline template needs to be defined inside the DOM element to which Vue is attached.
+Votre template inline a besoin d'être défini à l'intérieur de l'élément du DOM pour être attaché à Vue.
-
However, inline-template makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the template option or in a <template> element in a .vue file.
+
Cependant, inline-template rend la portée de vos templates plus difficile à appréhender. Une bonne pratique est de préférer la définition de templates à l'intérieur du composant en utilisant l'option template ou dans un élément <template> dans un fichier .vue.
### X-Templates
-Another way to define templates is inside of a script element with the type `text/x-template`, then referencing the template by an id. For example:
+Une autre façon de définir des templates est à l'intérieur d'un élément script avec le type `text/x-template`, puis en référencant le template par un id. Par exemple :
``` html
-> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
-
-## Prop Casing (camelCase vs kebab-case)
+## Casse des props (camelCase vs. kebab-case)
-HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:
+Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interprèteront de la même manière les majuscules et les minuscules. Cela signifie que pour l'utilisation des templates directement dans le DOM, les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) :
``` js
Vue.component('blog-post', {
- // camelCase in JavaScript
+ // camelCase en JavaScript
props: ['postTitle'],
template: '
{{ postTitle }}
'
})
```
``` html
-
-
+
+
```
-Again, if you're using string templates, this limitation does not apply.
+Cependant, si vous utilisez les templates de chaine de caractères directement dans le JavaScript, il n'y a pas cette limitation.
-## Prop Types
+## Types des props
-So far, we've only seen props listed as an array of strings:
+Pour l'instant, nous n'avons vu que les props listées dans des tableaux de chaines de caractères :
```js
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
```
-Usually though, you'll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively:
+Plus fréquemment, vous souhaiterez que chaque prop possède un type de valeur spécifique. Dans ce cas, vous pouvez lister vos propriétés comme un objet, où les noms et les valeurs de propriétés sont respectivement les noms et types de props :
```js
props: {
@@ -51,75 +51,75 @@ props: {
commentIds: Array,
author: Object,
callback: Function,
- contactsPromise: Promise // or any other constructor
+ contactsPromise: Promise // ou n'importe quel autre constructeur
}
```
-This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type. You'll learn much more about [type checks and other prop validations](#Prop-Validation) further down this page.
+Cela ne documente pas seulement votre composant mais va également permettre à l'utilisateur d'être averti par la console JavaScript du navigateur s'il passe le mauvais type. Vous pourrez en apprendre plus à propos des [validateurs de types](#Validation-des-props) plus bas dans cette page.
-## Passing Static or Dynamic Props
+## Passage de props statiques ou dynamiques
-So far, you've seen props passed a static value, like in:
+Plus tôt, vous avez vu comment passer des props de manière statique comme ceci :
```html
-
+
```
-You've also seen props assigned dynamically with `v-bind`, such as in:
+Vous avez également vu qu'il était possible d'affecter des props dynamiquement avec `v-bind` comme ceci :
```html
-
+
-
+
```
-In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop.
+Dans les deux exemples précédents, nous passons en fait une valeur sous forme de chaine de caractère mais _tous_ les types de valeur peuvent en fait être passées à la prop.
-### Passing a Number
+### Passer un Number
```html
-
-
+
+
-
+
```
-### Passing a Boolean
+### Passer un Boolean
```html
-
+
-
-
+
+
-
+
```
-### Passing an Array
+### Passer un Array
```html
-
-
+
+
-
+
```
-### Passing an Object
+### Passer un Object
```html
-
-
+
+
-
+
```
-### Passing the Properties of an Object
+### Passage des propriétés d'un objet
-If you want to pass all the properties of an object as props, you can use `v-bind` without an argument (`v-bind` instead of `v-bind:prop-name`). For example, given a `post` object:
+Si vous souhaitez passer toutes les propriétés d'un objet en tant que props, vous devez utiliser `v-bind` sans l'argument (`v-bind` au lieu de `v-bind:prop-name`). Par exemple, avec un objet `post` :
``` js
post: {
id: 1,
- title: 'My Journey with Vue'
+ title: 'Mon initiation avec Vue'
}
```
-The following template:
+le template suivant :
``` html
```
-Will be equivalent to:
+sera équivalent à :
``` html
```
-## One-Way Data Flow
+## Flux de données unidirectionnel
-All props form a **one-way-down binding** between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
+Toutes les données forment **un flux de donnée descendant unidirectionnel (« one-way-down binding »)** entre la propriété enfant et la propriété parente : quand la propriété du parent est mise à jour, cela va mettre à jour celle de l'enfant mais pas l'inverse. Cela empêche un composant enfant de muter accidentellement l'état du parent, ce qui rendrait le flux de données de votre application difficile à appréhender.
-In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.
+De plus, chaque fois que le composant parent est mis à jour, toutes les props du composant enfant vont être mises à jour avec les dernières valeurs. Cela signifie que vous ne devriez **pas** essayer du muter une prop depuis l'intérieur d'un composant. Si vous le faites, Vue lancera un avertissement dans la console.
-There are usually two cases where it's tempting to mutate a prop:
+Il y a couramment deux cas où vous seriez tenté de muter une prop :
-1. **The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.** In this case, it's best to define a local data property that uses the prop as its initial value:
+1. **La prop est seulement utilisée pour passer une valeur initiale ; le composant enfant doit seulement l'utiliser comme donnée de propriété local.** Dans ce cas, le mieux est de définir une propriété locale qui utilise la prop comme valeur initiale :
``` js
props: ['initialCounter'],
@@ -176,7 +176,7 @@ There are usually two cases where it's tempting to mutate a prop:
}
```
-2. **The prop is passed in as a raw value that needs to be transformed.** In this case, it's best to define a computed property using the prop's value:
+2. **La prop est passée dans un format qui demande d'être transformé.** Dans ce cas, le mieux est de définir une propriété calculée utilisant la valeur de la prop :
``` js
props: ['size'],
@@ -187,44 +187,44 @@ There are usually two cases where it's tempting to mutate a prop:
}
```
-
Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component **will** affect parent state.
+
Notez que les objets et les tableaux en JavaScript sont passés par référence, ce qui signifie que si la prop est un objet ou un tableau, muter l'objet ou le tableau lui-même dans l'enfant **va** affecter l'état du parent.
-## Prop Validation
+## Validation des props
-Components can specify requirements for their props, such as the types you've already seen. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.
+Les composants peuvent spécifier des conditions requises pour leurs props, comme les types que nous avons déjà vus. Si les conditions requises ne sont pas validées, Vue va vous en avertir dans la console JavaScript du navigateur. Cela est particulièrement utile quand on développe un composant destiné à être utilisé par les autres.
-To specify prop validations, you can provide an object with validation requirements to the value of `props`, instead of an array of strings. For example:
+Pour spécifier des validations de prop, vous pouvez fournir un objet avec les conditions de validation pour les valeurs des `props` plutôt qu'un tableau de chaine de caractère. Par exemple :
``` js
Vue.component('my-component', {
props: {
- // Basic type check (`null` and `undefined` values will pass any type validation)
+ // Vérification de type basique (`null` et `undefined` valide n'importe quel type)
propA: Number,
- // Multiple possible types
+ // Multiple types possibles
propB: [String, Number],
- // Required string
+ // Chaine de caractères nécéssaire
propC: {
type: String,
required: true
},
- // Number with a default value
+ // Nombre avec une valeur par défaut
propD: {
type: Number,
default: 100
},
- // Object with a default value
+ // Objet avec une valeur par défaut
propE: {
type: Object,
- // Object or array defaults must be returned from
- // a factory function
+ // Les objets et tableaux par défaut doivent être retournés depuis
+ // une fonction de fabrique
default: function () {
return { message: 'hello' }
}
},
- // Custom validator function
+ // Fonction de validation personnalisée
propF: {
validator: function (value) {
- // The value must match one of these strings
+ // La valeur passée doit être l'une de ces chaines de caractères
return ['success', 'warning', 'danger'].includes(value)
}
}
@@ -232,13 +232,13 @@ Vue.component('my-component', {
})
```
-When prop validation fails, Vue will produce a console warning (if using the development build).
+Quand la validation de prop échoue, Vue va lancer un avertissement dans la console (si vous utilisez le Build de développement)
-
Note that props are validated **before** a component instance is created, so instance properties (e.g. `data`, `computed`, etc) will not be available inside `default` or `validator` functions.
+
Notez que les props sont validées **avant** que l'instance du composant soit créée. Donc les propriétés d'instances (par ex. `data`, `computed`, etc) ne seront pas disponibles dans les fonctions `default` ou `validator`.
-### Type Checks
+### Vérification de types
-The `type` can be one of the following native constructors:
+Le `type` peut être l'un des constructeurs natifs suivants :
- String
- Number
@@ -249,7 +249,7 @@ The `type` can be one of the following native constructors:
- Function
- Symbol
-In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists:
+De plus, `type` peut aussi être une fonction constructeur personnalisée et l'assertion pourra être testée avec `instanceof`. Par exemple, avec la fonction constructeur existante suivante :
```js
function Person (firstName, lastName) {
@@ -258,7 +258,7 @@ function Person (firstName, lastName) {
}
```
-You could use:
+Vous pourrez utiliser :
```js
Vue.component('blog-post', {
@@ -268,31 +268,31 @@ Vue.component('blog-post', {
})
```
-to validate that the value of the `author` prop was created with `new Person`.
+pour valider que la valeur de la prop `author` est bien créée avec un `new Person`.
-## Non-Prop Attributes
+## Attributs non props
-A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
+Un attribut non prop est un attribut passé à un composant mais qui n'a pas de prop correspondante de définie.
-While explicitly defined props are preferred for passing information to a child component, authors of component libraries can't always foresee the contexts in which their components might be used. That's why components can accept arbitrary attributes, which are added to the component's root element.
+Bien que définir explicitement les props soit préféré pour passer des informations à un composant enfant, les auteurs de bibliothèques ne peuvent pas deviner dans quel contexte leur composant va être utilisé. C'est pourquoi il est possible qu'un composant puisse accepter des attributs arbitraires qui seront ajoutés sur l'élément racine du composant.
-For example, imagine we're using a 3rd-party `bootstrap-date-input` component with a Bootstrap plugin that requires a `data-date-picker` attribute on the `input`. We can add this attribute to our component instance:
+Par exemple, imaginez que vous utilisiez un composant tiers `bootstrap-date-input` avec un plugin Bootstrap qui nécessite un `data-date-picker` attribut sur l'`input`. Nous pouvons ajouter cet attribut à notre instance de composant :
``` html
```
-And the `data-date-picker="activated"` attribute will automatically be added to the root element of `bootstrap-date-input`.
+et l'attribut `data-date-picker="activated"` sera automatiquement ajouté sur l'élément racine de `bootstrap-date-input`.
-### Replacing/Merging with Existing Attributes
+### Remplacement ou fusion avec des attributs existants
-Imagine this is the template for `bootstrap-date-input`:
+Imaginez que ceci est le template pour `bootstrap-date-input` :
``` html
```
-To specify a theme for our date picker plugin, we might need to add a specific class, like this:
+Pour spécifier un thème pour notre plugin date picker, nous allons avoir besoin d'ajouter une classe comme ceci :
``` html
```
-In this case, two different values for `class` are defined:
+Dans ce cas, deux valeurs différentes de `class` sont définies :
-- `form-control`, which is set by the component in its template
-- `date-picker-theme-dark`, which is passed to the component by its parent
+- `form-control`, qui va être appliqué dans le template du composant,
+- `date-picker-theme-dark`, qui va être passé au composant depuis son parent.
-For most attributes, the value provided to the component will replace the value set by the component. So for example, passing `type="text"` will replace `type="date"` and probably break it! Fortunately, the `class` and `style` attributes are a little smarter, so both values are merged, making the final value: `form-control date-picker-theme-dark`.
+Pour la plupart des attributs, la valeur fournie par le parent va remplacer la valeur définie par le composant. Aussi par exemple, passer `type="text"` va remplacer `type="date"` et probablement tout casser ! Heureusement, les attributs `class` et `style` sont plus malins. Ces deux valeurs sont fusionnées, fournissant la valeur finale `form-control date-picker-theme-dark`.
-### Disabling Attribute Inheritance
+### Désactiver l'héritage d'attribut
-If you do **not** want the root element of a component to inherit attributes, you can set `inheritAttrs: false` in the component's options. For example:
+Si vous **ne** voulez **pas** que l'élément racine d'un composant hérite de tels attributs, vous pouvez mettre `inheritAttrs: false` dans les options de votre composant. Par exemple :
```js
Vue.component('my-component', {
@@ -319,16 +319,16 @@ Vue.component('my-component', {
})
```
-This can be especially useful in combination with the `$attrs` instance property, which contains the attribute names and values passed to a component, such as:
+Cela est particulièrement utile avec l'utilisation combinée de la propriété d'instance `$attrs` qui contient les noms et valeurs passés à un composant comme ceci :
```js
{
required: true,
- placeholder: 'Enter your username'
+ placeholder: 'Entrez votre nom d\'utilisateur'
}
```
-With `inheritAttrs: false` and `$attrs`, you can manually decide which element you want to forward attributes to, which is often desirable for [base components](../style-guide/#Base-component-names-strongly-recommended):
+Avec `inheritAttrs: false` et `$attrs`, vous pouvez manuellement décider sur quel élément vous souhaitez déposer les attributs passés, ce qui est souvent souhaité dans le cas des [bases de composant](#Base-de-nom-de-composant-fortement-recommande) :
```js
Vue.component('base-input', {
@@ -347,15 +347,15 @@ Vue.component('base-input', {
})
```
-
Note that `inheritAttrs: false` option does **not** affect `style` and `class` bindings.
+
Notez que l'option `inheritAttrs: false` n'affecte **pas** les liaisons `style` et `class`.
-This pattern allows you to use base components more like raw HTML elements, without having to care about which element is actually at its root:
+Ce modèle vous permet d'utiliser des composants de base comme des éléments HTML standard sans avoir à vous soucier de quel élément est actuellement à sa racine :
```html
```
diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
index 9d4c027fc3..1e21ace9c7 100644
--- a/src/v2/guide/components-registration.md
+++ b/src/v2/guide/components-registration.md
@@ -1,50 +1,50 @@
---
-title: Component Registration
+title: Création de composants
type: guide
order: 101
---
-> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
-
-## Component Names
+## Noms de composant
-When registering a component, it will always be given a name. For example, in the global registration we've seen so far:
+Lors de la création de composants, il faudra toujours spécifier un nom. Par exemple, la déclaration se fera comme suit :
```js
Vue.component('my-component-name', { /* ... */ })
```
-The component's name is the first argument of `Vue.component`.
+Le nom du composant est le premier argument de `Vue.component`.
-The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.
+Le nom que vous donnez à un composant peut dépendre de l'endroit où vous avez l'intention de l'utiliser. Lorsque vous utilisez un composant directement dans le DOM (par opposition à une chaine ou un [composant monofichiers](single-file-components.html)), nous vous recommandons fortement de suivre [les règles du W3C](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) pour les noms de balises personnalisées (tout en minuscules, contenir un trait d'union). Cela vous permet d'éviter les conflits avec les éléments HTML actuels et futurs.
-You can see other recommendations for component names in the [Style Guide](../style-guide/#Base-component-names-strongly-recommended).
+Vous pouvez voir d'autres recommandations pour les noms de composants dans le guide des [Conventions](../style-guide/#Base-component-names-strongly-recommended).
-### Name Casing
+### Casse des noms
-You have two options when defining component names:
+Vous avez deux options pour définir vos noms de composant :
-#### With kebab-case
+#### En kebab-case
```js
Vue.component('my-component-name', { /* ... */ })
```
-When defining a component with kebab-case, you must also use kebab-case when referencing its custom element, such as in ``.
+Lors de la définition d'un composant en kebab-case, vous devez également utiliser kebab-case lors du référencement de l'élément, comme ceci ``.
-#### With PascalCase
+#### En PascalCase
```js
Vue.component('MyComponentName', { /* ... */ })
```
-When defining a component with PascalCase, you can use either case when referencing its custom element. That means both `` and `` are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates).
+Lors de la définition d'un composant en PascalCase, vous pouvez utiliser l'un ou l'autre cas lors du référencement de l'élément. Cela signifie que `` et `` sont acceptables. À noter, cependant, que seuls les noms en kebab-case sont directement valides dans le DOM (c.-à-d. la forme non-chaine).
-## Global Registration
+## Création globale
-So far, we've only created components using `Vue.component`:
+Jusque là, nous avons créé des composants seulement avec la manière suivante `Vue.component` :
```js
Vue.component('my-component-name', {
@@ -52,7 +52,7 @@ Vue.component('my-component-name', {
})
```
-These components are **globally registered**. That means they can be used in the template of any root Vue instance (`new Vue`) created after registration. For example:
+Ces composants sont **enregistrés globalement**. Cela signifie qu'ils peuvent être utilisés dans le template de n'importe quelle instance Vue (`new Vue`) créée ultérieurement. Par exemple :
```js
Vue.component('component-a', { /* ... */ })
@@ -70,13 +70,13 @@ new Vue({ el: '#app' })
```
-This even applies to all subcomponents, meaning all three of these components will also be available _inside each other_.
+Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles _les uns dans les autres_.
-## Local Registration
+## Création locale
-Global registration often isn't ideal. For example, if you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.
+La création globale n'est souvent pas idéale. Par exemple, si vous utilisez un système de build comme webpack, la création globale de composants signifie que même si vous arrêtez d'utiliser un composant, il peut toujours être inclus dans votre build final. Cela augmente inutilement la quantité de JavaScript que vos utilisateurs doivent télécharger.
-In these cases, you can define your components as plain JavaScript objects:
+Dans ce cas, vous pouvez définir vos composants en tant qu'objets JavaScript simples :
```js
var ComponentA = { /* ... */ }
@@ -84,7 +84,7 @@ var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
```
-Then define the components you'd like to use in a `components` option:
+Puis définissez les composants que vous souhaitez utiliser dans l'option `components` :
```js
new Vue({
@@ -96,9 +96,9 @@ new Vue({
})
```
-For each property in the `components` object, the key will be the name of the custom element, while the value will contain the options object for the component.
+Pour chaque propriété de l'objet `components`, la clé sera le nom de l'élément personnalisé, tandis que la valeur contiendra l'objet d'options du composant.
-Note that **locally registered components are _not_ also available in subcomponents**. For example, if you wanted `ComponentA` to be available in `ComponentB`, you'd have to use:
+Notez que **les composants créés localement ne sont _pas_ disponibles dans les sous-composants**. Par exemple, si vous voulez que `ComponentA` soit disponible dans `ComponentB`, vous devez utiliser :
```js
var ComponentA = { /* ... */ }
@@ -111,7 +111,7 @@ var ComponentB = {
}
```
-Or if you're using ES2015 modules, such as through Babel and Webpack, that might look more like:
+Ou si vous utilisez des modules ES2015, tels que Babel et webpack, cela pourrait plus ressembler à :
```js
import ComponentA from './ComponentA.vue'
@@ -124,20 +124,20 @@ export default {
}
```
-Note that in ES2015+, placing a variable name like `ComponentA` inside an object is shorthand for `ComponentA: ComponentA`, meaning the name of the variable is both:
+Notez que dans ES2015+, placer un nom de variable comme `ComponentA` dans un objet est un raccourci à `ComponentA: ComponentA`, signifiant que le nom de la variable est à la fois :
-- the custom element name to use in the template, and
-- the name of the variable containing the component options
+- le nom de l'élément personnalisé à utiliser dans le template et
+- le nom de la variable contenant les options du composant
-## Module Systems
+## Systèmes de module
-If you're not using a module system with `import`/`require`, you can probably skip this section for now. If you are, we have some special instructions and tips just for you.
+Si vous n'utilisez pas un système de module avec `import`/`require`, vous pouvez probablement ignorer cette section pour l'instant. Si oui, nous avons quelques instructions spéciales et conseils pour vous.
-### Local Registration in a Module System
+### Création locale dans un système de module
-If you're still here, then it's likely you're using a module system, such as with Babel and Webpack. In these cases, we recommend creating a `components` directory, with each component in its own file.
+Si vous êtes toujours là, il est probable que vous utilisiez un système de modules, comme avec Babel et webpack. Dans ces cas, nous recommandons de créer un répertoire `components`, avec chaque composant dans son propre fichier.
-Then you'll need to import each component you'd like to use, before you locally register it. For example, in a hypothetical `ComponentB.js` or `ComponentB.vue` file:
+Ensuite, vous devrez importer chaque composant que vous souhaitez utiliser avant de l'enregistrer localement. Par exemple, dans un fichier hypothétique `ComponentB.js` ou `ComponentB.vue` :
```js
import ComponentA from './ComponentA'
@@ -152,13 +152,13 @@ export default {
}
```
-Now both `ComponentA` and `ComponentC` can be used inside `ComponentB`'s template.
+Maintenant, `ComponentA` et `ComponentC` peuvent être utilisés dans le template du composant `ComponentB`.
-### Automatic Global Registration of Base Components
+### Enregistrement global automatique des composants de base
-Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components.
+La plupart de vos composants seront relativement génériques, ce qui ne fera qu'englober un élément comme un champ ou un bouton. Nous nous référons parfois à ces [composants de base](../style-guide/#Base-de-nom-de-composant-fortement-recommande) et ils ont tendance à être utilisés très fréquemment à travers vos composants.
-The result is that many components may include long lists of base components:
+Le résultat est que de nombreux composants peuvent inclure de longues listes de composants de base :
```js
import BaseButton from './BaseButton.vue'
@@ -174,7 +174,7 @@ export default {
}
```
-Just to support relatively little markup in a template:
+Juste pour supporter relativement peu de balise dans un template :
```html
```
-Fortunately, if you're using Webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`):
+Heureusement, si vous utilisez webpack (ou [Vue CLI 3+](https://github.com/vuejs/vue-cli), qui utilise webpack en interne), vous pouvez utiliser `require.context` pour enregistrer globalement précisément ces composants de base très courants. Voici un exemple de code que vous pouvez utiliser pour importer globalement des composants de base dans le fichier d'entrée de votre application. (ex. `src/main.js`) :
```js
import Vue from 'vue'
@@ -194,22 +194,22 @@ import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
- // The relative path of the components folder
+ // Le chemin relatif du dossier composants
'./components',
- // Whether or not to look in subfolders
+ // Suivre ou non les sous-dossiers
false,
- // The regular expression used to match base component filenames
+ // L'expression régulière utilisée pour faire concorder les noms de fichiers de composant de base
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
- // Get component config
+ // Récupérer la configuration du composant
const componentConfig = requireComponent(fileName)
- // Get PascalCase name of component
+ // Récupérer le nom du composant en PascalCase
const componentName = upperFirst(
camelCase(
- // Gets the file name regardless of folder depth
+ // Retrouver le nom du fichier indépendemment de la profondeur de dossier
fileName
.split('/')
.pop()
@@ -217,16 +217,15 @@ requireComponent.keys().forEach(fileName => {
)
)
-
- // Register component globally
+ // Créer un composant global
Vue.component(
componentName,
- // Look for the component options on `.default`, which will
- // exist if the component was exported with `export default`,
- // otherwise fall back to module's root.
+ // Chercher les options du composant dans `.default`, qui
+ // existera si le composant a été exporté avec `export default`,
+ // sinon revenez à la racine du module.
componentConfig.default || componentConfig
)
})
```
-Remember that **global registration must take place before the root Vue instance is created (with `new Vue`)**. [Here's an example](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js) of this pattern in a real project context.
+N'oubliez pas que **la création globale doit avoir lieu avant la création de l'instance racine Vue (avec `new Vue`)**. [Voici un exemple](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js) de ce modèle dans un contexte de projet réel.
diff --git a/src/v2/guide/components-slots.md b/src/v2/guide/components-slots.md
index 6ba9bc2710..9f51df265e 100644
--- a/src/v2/guide/components-slots.md
+++ b/src/v2/guide/components-slots.md
@@ -4,23 +4,23 @@ type: guide
order: 104
---
-> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
-> In 2.6.0, we introduced a new unified syntax (the `v-slot` directive) for named and scoped slots. It replaces the `slot` and `slot-scope` attributes, which are now deprecated, but have _not_ been removed and are still documented [here](#Deprecated-Syntax). The rationale for introducing the new syntax is described in this [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md).
+> En 2.6.0, nous introduisons une nouvelle syntaxe unifiée (la directive `v-slot`) pour nommer vos slots avec portée. Il remplace les attributs `slot` et `slot-scope` qui sont à présent dépréciés mais _non_ retirés et toujours documentés [ici](#Syntaxe-dépréciée). La raison à l'introduction de la nouvelle syntaxe est décrite dans cette [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md).
-## Slot Content
+## Les contenus de slot
-Vue implements a content distribution API inspired by the [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `` element to serve as distribution outlets for content.
+Vue implémente une API de distribution de contenu inspirée du [brouillon de spécification des WebComponents](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) utilisant l'élément `` comme zone de distribution de contenu.
-This allows you to compose components like this:
+Cela vous permet de composer vos composants ainsi :
``` html
- Your Profile
+ Mon profil
```
-Then in the template for ``, you might have:
+Dans le template ``, nous aurons :
``` html
`, you might have:
```
-When the component renders, `` will be replaced by "Your Profile". Slots can contain any template code, including HTML:
+Lors du cycle de rendu du composant, l'élément `` est remplacé par « Mon profil ». Les éléments `` peuvent contenir n'importe quel code de template, incluant le HTML :
``` html
-
+
- Your Profile
+ Mon profil
```
-Or even other components:
+Ou encore faire appel à d'autres composants :
``` html
-
+
- Your Profile
+ Mon profil
```
-If ``'s template did **not** contain a `` element, any content provided between its opening and closing tag would be discarded.
+Si `` ne contient **pas** d'élément ``, n'importe quel contenu fourni entre la balise d'ouverture et de fermeture sera ignoré.
-## Compilation Scope
+## Portée de compilation
-When you want to use data inside a slot, such as in:
+Quand vous voulez utiliser des données à l'intérieur d'un slot, comme ici :
``` html
- Logged in as {{ user.name }}
+ Se connnecter en tant que {{ user.name }}
```
-That slot has access to the same instance properties (i.e. the same "scope") as the rest of the template. The slot does **not** have access to ``'s scope. For example, trying to access `url` would not work:
+Le slot a accès à la même propriété d'instance (c.-à-d. la même « portée ») que le reste du template. Le slot n'a **pas** accès à la portée de ``. Par exemple, essayer d'accéder à `url` ne fonctionnera pas :
``` html
- Clicking here will send you to: {{ url }}
+ Cliquer ici vous amènera à : {{ url }}
```
-As a rule, remember that:
+Souvenez-vous de cette règle :
-> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
+> Tout ce qui est dans le template parent est compilé dans la portée parente, tout ce qui est dans le template enfant est compilé dans la portée enfant.
-## Fallback Content
+## Contenu par défaut
-There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. For example, in a `` component:
+Il y a des cas où il est utile de spécifier un contenu par défaut pour un slot qui sera rendu uniquement si aucun contenu n'est fourni. Par exemple, dans le composant `` :
-```html
+``` html
```
-We might want the text "Submit" to be rendered inside the `