diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md
index c1fcad1340..acc405f20f 100644
--- a/src/v2/guide/list.md
+++ b/src/v2/guide/list.md
@@ -190,7 +190,7 @@ Et également un troisième pour l'index :
Quand vous itérez sur un objet, l'ordre est basé sur l'ordre d'énumération de `Object.keys()` et il **n'**y a **aucune** garantie de cohérence à travers toutes les implémentations des moteurs JavaScript.
-### `v-for` et nombres
+### `v-for` et plage de valeurs
`v-for` peut également prendre un nombre entier. Dans ce cas, il répétera le template autant de fois qu'indiqué.
@@ -336,7 +336,7 @@ new Vue({
### `v-for` avec `v-if`
-Quand ils existent sur le même nœud, `v-for` a une priorité plus élevée que `v-if`. Cela signifie que `v-if` va être exécuté indépendamment à chaque itération de boucle. C'est très utile quand vous voulez faire le rendu de seulement certains noeuds, comme ci-dessous :
+Quand ils existent sur le même nœud, `v-for` a une priorité plus élevée que `v-if`. Cela signifie que `v-if` va être exécuté indépendamment à chaque itération de boucle. C'est très utile quand vous voulez faire le rendu de seulement certains noeuds, comme ci-dessous :
``` html
diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md
index 7036ca97ec..b230d46cbd 100644
--- a/src/v2/guide/migration.md
+++ b/src/v2/guide/migration.md
@@ -1,53 +1,53 @@
---
-title: Migration from Vue 1.x (En)
+title: Migration depuis Vue 1.x
type: guide
order: 26
---
-## FAQ
+## F.A.Q.
-> Woah - this is a super long page! Does that mean 2.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?
+> Wow ! C'est une super longue page ! Est-ce que ça veut dire que la version 2.0 est complètement différente, que je vais devoir ré-apprendre les bases depuis le début, et que la migration est pratiquement impossible ?
-
**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**
I'm glad you asked! The answer is no. About 90% of the API is the same and the core concepts haven't changed. It's long because we like to offer very detailed explanations and include a lot of examples. Rest assured, __this is not something you have to read from top to bottom!__
+
Ravi que vous posiez la question ! La réponse est non. Environ 90% de l'API reste la même et le cœur des concepts reste inchangé. C'est long car nous avons voulu offrir des explications très détaillées et inclure beaucoup d'exemples. Et soyez rassuré(e), __cette page n'est pas quelque chose que vous devez lire complètement de haut en bas !__
-> Where should I start in a migration?
+> Comment dois-je m'y prendre pour commencer ma migration ?
-1. Start by running the [migration helper](https://github.com/vuejs/vue-migration-helper) on a current project. We've carefully minified and compressed a senior Vue dev into a simple command line interface. Whenever they recognize an obsolete feature, they'll let you know, offer suggestions, and provide links to more info.
+1. Commencez par lancer l'[outil d'aide à la migration](https://github.com/vuejs/vue-migration-helper) sur un projet courant. Nous avons soigneusement minifié et compressé un développement Vue dans une simple interface en ligne de commande. À chaque fois qu'il va reconnaître une fonctionnalité obsolète, il va vous le faire savoir, vous offrir des suggestions et vous fournir des liens pour plus d'informations.
-2. After that, browse through the table of contents for this page in the sidebar. If you see a topic you may be affected by, but the migration helper didn't catch, check it out.
+2. Après cela, parcourez la table des matières de cette page dans la barre de navigation. Si vous voyez un sujet qui vous concerne, mais que l'outil d'aide à la migration ne l'a pas repéré, vérifiez-le.
-3. If you have any tests, run them and see what still fails. If you don't have tests, just open the app in your browser and keep an eye out for warnings or errors as you navigate around.
+3. Si vous avez des cas de test, exécutez les et voyez ce qui ne fonctionne plus et échoue. Si vous n'avez pas de cas de test, ouvrez simplement votre application dans votre navigateur et garder un œil sur les avertissements et erreurs que vous trouverez en faisant un tour de l'application.
-4. By now, your app should be fully migrated. If you're still hungry for more though, you can read the rest of this page - or just dive in to the new and improved guide from [the beginning](index.html). Many parts will be skimmable, since you're already familiar with the core concepts.
+4. Maintenant, votre application devrait être pleinement migrée. Si vous n'êtes toujours pas satisfait de divers points, vous pouvez lire le reste de cette page (ou juste plonger dans le nouveau [guide de démarrage](index.html)). Beaucoup de parties seront vite parcourues puisque vous êtes familier aux concepts de base.
-> How long will it take to migrate a Vue 1.x app to 2.0?
+> Combien de temps va prendre la migration d'une application Vue 1.x vers une application Vue 2.0 ?
-It depends on a few factors:
+Cela dépend de plusieurs critères comme :
-- The size of your app (small to medium-sized apps will probably be less than a day)
+- de la taille de votre application (de petite à moyenne, cela vous prendra probablement moins d'un jour),
-- How many times you get distracted and start playing with a cool new feature. 😉 Not judging, it also happened to us while building 2.0!
+- de combien de fois vous êtes distrait et que vous commencez à jouer avec une nouvelle fonctionnalité cool (😉 Pas de jugement, ça nous est arrivé à nous pendant la construction de la version 2.0),
-- Which obsolete features you're using. Most can be upgraded with find-and-replace, but others might take a few minutes. If you're not currently following best practices, Vue 2.0 will also try harder to force you to. This is a good thing in the long run, but could also mean a significant (though possibly overdue) refactor.
+- du nombre de fonctionnalités obsolètes que vous utilisez. La plupart d'entre elles peuvent être corrigées avec une action de type trouver-remplacer (« find-and-replace »), mais d'autres peuvent prendre quelques minutes. Si vous ne suivez actuellement pas les meilleures pratiques, Vue 2.0 vous forcera encore plus à les respecter. Cela est une bonne chose sur le long terme, mais signifie également (un peu tard) une refactorisation importante.
-> If I upgrade to Vue 2, will I also have to upgrade Vuex and Vue-Router?
+> Si je passe à Vue 2, dois-je aussi mettre à jour Vuex et Vue-Router ?
-Only Vue-Router 2 is compatible with Vue 2, so yes, you'll have to follow the [migration path for Vue-Router](migration-vue-router.html) as well. Fortunately, most applications don't have a lot of router code, so this likely won't take more than an hour.
+Seul Vue-Router 2 est compatible avec Vue 2, donc oui, vous allez devoir également suivre le [guide de migration pour Vue-Router](migration-vue-router.html). Heureusement, un grand nombre d'applications n'ont pas beaucoup de code en lien avec le routeur, cela ne devrait donc pas prendre plus d'une heure.
-As for Vuex, even version 0.8 is compatible with Vue 2, so you're not forced to upgrade. The only reason you may want to upgrade immediately is to take advantage of the new features in Vuex 2, such as modules and reduced boilerplate.
+En ce qui concerne Vuex, la version 0.8 est compatible avec Vue 2, vous n'êtes donc pas obligé de le mettre à jour. La seule raison pour que vous souhaitiez faire la mise à jour dès maintenant serait de tirer partie des nouvelles fonctionnalités de Vuex 2, comme les modules ou les codes pré-conçus (« boilerplate ») moins verbeux.
## Templates
-### Fragment Instances removed
+### Instances fragmentées retirées
-Every component must have exactly one root element. Fragment instances are no longer allowed. If you have a template like this:
+Tous les composants doivent avoir seulement un seul élément racine. Les instances fragmentées ne sont plus permises. Si vous aviez un template comme ceci :
``` html
foo
bar
```
-It's recommended to simply wrap the entire contents in a new element, like this:
+Il est recommandé d'entourer simplement le contenu complet dans un nouvel élément, comme cela :
``` html
@@ -58,38 +58,38 @@ It's recommended to simply wrap the entire contents in a new element, like this:
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite or app after upgrading and look for console warnings about multiple root elements in a template.
+
Comment procéder ?
+
Lancez votre suite de tests ou votre application après mise à jour et vérifiez les avertissements de console à propos d'éléments multiple à la racine dans un template.
{% endraw %}
-## Lifecycle Hooks
+## Hooks de cycle de vie
-### `beforeCompile` removed
+### `beforeCompile` retiré
-Use the `created` hook instead.
+Utilisez le hook `created` à la place.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find all examples of this hook.
{% endraw %}
-### `attached` removed
+### `attached` retiré
-Use a custom in-DOM check in other hooks. For example, to replace:
+Utilisez une vérification du DOM dans les autres hooks. Par exemple, remplacez :
``` js
attached: function () {
@@ -97,7 +97,7 @@ attached: function () {
}
```
-You could use:
+par :
``` js
mounted: function () {
@@ -109,14 +109,14 @@ mounted: function () {
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find all examples of this hook.
{% endraw %}
-### `detached` removed
+### `detached` retiré
-Use a custom in-DOM check in other hooks. For example, to replace:
+Utilisez une vérification du DOM dans les autres hooks. Par exemple, remplacez :
``` js
detached: function () {
@@ -124,7 +124,7 @@ detached: function () {
}
```
-You could use:
+par :
``` js
destroyed: function () {
@@ -136,85 +136,85 @@ destroyed: function () {
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find all examples of this hook.
{% endraw %}
-### `init` renamed
+### `init` renommé
-Use the new `beforeCreate` hook instead, which is essentially the same thing. It was renamed for consistency with other lifecycle methods.
+Utilisez le nouveau hook `beforeCreate` à la place. Il fait la même chose. Il a été renommé pour plus de consistance avec les autres méthodes du cycle de vie.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find all examples of this hook.
{% endraw %}
-### `ready` replaced
+### `ready` remplacé
-Use the new `mounted` hook instead. It should be noted though that with `mounted`, there's no guarantee to be in-document. For that, also include `Vue.nextTick`/`vm.$nextTick`. For example:
+Utilisez le hook `mounted` à la place. Il est a noté qu'avec `mounted`, il n'y a aucune garantie de présence dans le document (DOM réel). Pour s'en assurer, il faut inclure `Vue.nextTick` / `vm.$nextTick`. Par exemple :
``` js
mounted: function () {
this.$nextTick(function () {
- // code that assumes this.$el is in-document
+ // code vous assurant que `this.$el` est dans le document.
})
}
```
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find all examples of this hook.
{% endraw %}
## `v-for`
-### `v-for` Argument Order for Arrays changed
+### Ordre des arguments de `v-for` pour les tableaux changé
-When including an `index`, the argument order for arrays used to be `(index, value)`. It is now `(value, index)` to be more consistent with JavaScript's native array methods such as `forEach` and `map`.
+Quand vous utilisiez un `index`, l'ordre des arguments pour les tableaux était `(index, value)`. Cet ordre est maintenant `(value, index)` pour plus de consistance avec les méthodes natives des tableaux JavaScript comme `forEach` et `map`.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the obsolete argument order. Note that if you name your index arguments something unusual like position or num, the helper will not flag them.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'ordre des arguments obsolètes. Notez que si le nom de votre index est quelque chose de non habituel comme position ou num, l'outil d'aide ne les trouvera pas.
{% endraw %}
-### `v-for` Argument Order for Objects changed
+### Ordre des arguments de `v-for` pour les objets changé
-When including a `key`, the argument order for objects used to be `(key, value)`. It is now `(value, key)` to be more consistent with common object iterators such as lodash's.
+Quand vous utilisez une `key`, l'ordre des arguments pour les objets était `(key, value)`. Cet ordre est maintenant `(value, key)` pour plus de consistance avec les itérateurs d'objet communs comme lodash.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the obsolete argument order. Note that if you name your key arguments something like name or property, the helper will not flag them.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'ordre des arguments obsolètes. Notez que si le nom de votre clé est quelque chose comme name ou property, l'outil d'aide ne les trouvera pas.
{% endraw %}
-### `$index` and `$key` removed
+### `$index` et `$key` retirés
-The implicitly assigned `$index` and `$key` variables have been removed in favor of explicitly defining them in `v-for`. This makes the code easier to read for developers less experienced with Vue and also results in much clearer behavior when dealing with nested loops.
+Les variables implicites `$index` et `$key` ont été enlevées à la faveur de leur définition explicite dans `v-for`. Ceci rend le code plus simple à lire pour les développeurs moins expérimentés avec Vue. Il en résulte également des comportements plus prévisibles dans les cas de boucles imbriquées.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of these removed variables. If you miss any, you should also see console errors such as: Uncaught ReferenceError: $index is not defined
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de ces variables retirées. Si vous en oubliez certaines, vous devriez voir des erreurs console comme Uncaught ReferenceError: $index is not defined.
{% endraw %}
-### `track-by` replaced
+### `track-by` remplacé
-`track-by` has been replaced with `key`, which works like any other attribute: without the `v-bind:` or `:` prefix, it is treated as a literal string. In most cases, you'd want to use a dynamic binding which expects a full expression instead of a key. For example, in place of:
+`track-by` a été remplacé par `key`. Il fonctionne comme n'importe quel autre attribut : avec ou sans les préfixes `v-bind:` ou `:` il est traité comme une chaîne de caractères standard. Dans la plupart des cas, vous souhaiterez une liaison dynamique demandant une expression à la place d'une clé. Par exemple, à la place de :
``` html
```
-You would now write:
+vous aurez maintenant :
``` html
@@ -222,27 +222,27 @@ You would now write:
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of track-by.
{% endraw %}
-### `v-for` Range Values changed
+### `v-for` et plage de valeurs changé
-Previously, `v-for="number in 10"` would have `number` starting at 0 and ending at 9. Now it starts at 1 and ends at 10.
+Précédemment, `v-for="number in 10"` devait avoir `number` qui commençait à `0` et qui finissait à `9`. Maintenant il commence à `1` et finit à `10`.
{% raw %}
-
Upgrade Path
-
Search your codebase for the regex /\w+ in \d+/. Wherever it appears in a v-for, check to see if you may be affected.
+
Comment procéder ?
+
Cherchez dans votre code avec l'expression régulière /\w+ in \d+/. Partout ou cette expression sort dans du code v-for, vérifiez si cela vous affecte.
{% endraw %}
## Props
-### `coerce` Prop Option removed
+### Option de prop `coerce` retirée
-If you want to coerce a prop, setup a local computed value based on it instead. For example, instead of:
+Si vous voulez coercer une prop, mettez en place une propriété calculée basée dessus. Par exemple au lieu de :
``` js
props: {
@@ -257,7 +257,7 @@ props: {
}
```
-You could write:
+utilisez plutôt :
``` js
props: {
@@ -272,85 +272,85 @@ computed: {
}
```
-There are a few advantages:
+Cela a plusieurs avantages :
-- You still have access to the original value of the prop.
-- You are forced to be more explicit, by giving your coerced value a name that differentiates it from the value passed in the prop.
+- Vous avez toujours accès à la valeur originale de la prop.
+- Vous êtes obligé d'être plus explicite en donnant à la valeur coercée un nom différent de la valeur passée dans la prop.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the coerce option.
{% endraw %}
-### `twoWay` Prop Option removed
+### Option de prop `twoWay` retirée
-Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding. For more information, see:
+Les props sont maintenant toujours unidirectionnelles et descendantes. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement émettre un évènement au lieu de créer une liaison implicite. Pour plus d'informations, consultez :
-- [Custom component events](components.html#Custom-Events)
-- [Custom input components](components.html#Form-Input-Components-using-Custom-Events) (using component events)
-- [Global state management](state-management.html)
+- [Événements de composant personnalisés](components.html#Evenements-personnalises)
+- [Composants de champ de formulaire personnalisés](components.html#Composants-de-champ-de-formulaire-utilisant-les-evenements-personnalises) (utilisant les événements de composant)
+- [Gestion de l'état global](state-management.html)
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the twoWay option.
{% endraw %}
-### `.once` and `.sync` Modifiers on `v-bind` removed
+### Modificateur `.once` et `.sync` de `v-bind` retiré
-Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding. For more information, see:
+Les props sont maintenant toujours unidirectionnelles et descendantes. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement émettre un évènement au lieu de créer une liaison implicite. Pour plus d'informations, consultez :
-- [Custom component events](components.html#Custom-Events)
-- [Custom input components](components.html#Form-Input-Components-using-Custom-Events) (using component events)
-- [Global state management](state-management.html)
+- [Événements de composant personnalisés](components.html#Evenements-personnalises)
+- [Composants de champ de formulaire personnalisés](components.html#Composants-de-champ-de-formulaire-utilisant-les-evenements-personnalises) (utilisant les événements de composant)
+- [Gestion de l'état global](state-management.html)
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the .once and .sync modifiers.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des modificateurs .once et .sync.
{% endraw %}
-### Prop Mutation deprecated
+### Mutation de prop déprécié
-Mutating a prop locally is now considered an anti-pattern, e.g. declaring a prop and then setting `this.myProp = 'someOtherValue'` in the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component's local changes will be overwritten.
+Muter une prop localement est maintenant considéré comme un anti-pattern, c.-à-d. déclarer une prop et l'affecter ainsi `this.myProp = 'someOtherValue'` dans le composant. À cause du nouveau mécanisme de rendu, à chaque nouveau rendu du composant parent, les changements locaux du composant enfant seront écrasés.
-Most use cases of mutating a prop can be replaced by one of these options:
+Dans la majorité des cas, muter une prop peut être remplacé par une de ces solutions :
-- a data property, with the prop used to set its default value
-- a computed property
+- une propriété de donnée, avec la valeur de la prop utilisée comme valeur par défaut
+- une propriété calculée
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite or app after upgrading and look for console warnings about prop mutations.
+
Comment procéder ?
+
Lancez votre suite de tests ou votre application après mise à jour et vérifiez les avertissements de console à propos des mutations du prop.
{% endraw %}
-### Props on a Root Instance replaced
+### `props` sur l'instance racine remplacée
-On root Vue instances (i.e. instances created with `new Vue({ ... })`), you must use `propsData` instead of `props`.
+Sur une instance racine de Vue (c.-à-d. crée avec `new Vue({ ... })`), vous devez utilisez `propsData` à la place de `props`.
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite, if you have one. The failed tests should alert to you to the fact that props passed to root instances are no longer working.
+
Comment procéder ?
+
Lancez votre suite de tests si vous en avez. Les tests en échec devraient vous alerter du fait que les props de l'instance racine ne sont plus passées.
{% endraw %}
-## Computed properties
+## Propriétés calculées
-### `cache: false` deprecated
+### `cache: false` dépréciée
-Caching invalidation of computed properties will be removed in future major versions of Vue. Replace any uncached computed properties with methods, which will have the same result.
+L'invalidation de cache pour les propriétés calculées va être retiré dans les futures versions majeures de Vue. Remplacez toute les propriétés calculées avec invalidation de cache par des méthodes, cela produira le même résultat.
-For example:
+Par exemple :
``` js
-template: '
message: {{ timeMessage }}
',
+template: '
message : {{ timeMessage }}
',
computed: {
timeMessage: {
cache: false,
@@ -361,10 +361,10 @@ computed: {
}
```
-Or with component methods:
+Devient dans une méthode :
``` js
-template: '
message: {{ getTimeMessage }}
',
+template: '
message : {{ getTimeMessage }}
',
methods: {
getTimeMessage: function () {
return Date.now() + this.message
@@ -374,31 +374,31 @@ methods: {
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the cache: false option.
{% endraw %}
-## Built-In Directives
+## Directives intégrées
-### Truthiness/Falsiness with `v-bind` changed
+### Évaluation à vrai ou faux avec `v-bind` changée
-When used with `v-bind`, the only falsy values are now: `null`, `undefined`, and `false`. This means `0` and empty strings will render as truthy. So for example, `v-bind:draggable="''"` will render as `draggable="true"`.
+Quand elles sont utilisées dans `v-bind`, seules les valeurs `null`, `undefined` et `false` sont évaluées à `false`. Cela signifie que `0` ou une chaîne vide sera rendue à vrai. Donc par exemple `v-bind:draggable="''"` va donner `draggable="true"`.
-For enumerated attributes, in addition to the falsy values above, the string `"false"` will also render as `attr="false"`.
+Pour les attributs énumérés, en plus des valeurs précédentes évaluées à `false`, la chaîne de caractères `"false"` sera aussi rendue comme `attr="false"`.
-
Note that for other directives (e.g. `v-if` and `v-show`), JavaScript's normal truthiness still applies.
+
Notez que pour les autres directives (par ex. `v-if` et `v-show`), l'évaluation JavaScript normale est utilisée.
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite, if you have one. The failed tests should alert to you to any parts of your app that may be affected by this change.
+
Comment procéder ?
+
Lancez votre suite de tests si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectées par ce changement.
{% endraw %}
-### Listening for Native Events on Components with `v-on` changed
+### Écoute des évènements natifs sur les composants avec `v-on` changé
-When used on a component, `v-on` now only listens to custom events `$emit`ted by that component. To listen for a native DOM event on the root element, you can use the `.native` modifier. For example:
+Quand vous utilisez un composant, `v-on` n'écoutera que les évènements `$emit` émis par ce composant. Pour écouter les évènements natifs du DOM sur l'élément racine, vous devez utiliser le modificateur `.native`. Par exemple :
``` html
@@ -406,16 +406,16 @@ When used on a component, `v-on` now only listens to custom events `$emit`ted by
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite, if you have one. The failed tests should alert to you to any parts of your app that may be affected by this change.
+
Comment procéder ?
+
Lancez votre suite de tests si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectées par ce changement.
{% endraw %}
-### `debounce` Param Attribute for `v-model` removed
+### Paramètre d'attribut `debounce` pour `v-model` retiré
-Debouncing is used to limit how often we execute Ajax requests and other expensive operations. Vue's `debounce` attribute parameter for `v-model` made this easy for very simple cases, but it actually debounced __state updates__ rather than the expensive operations themselves. It's a subtle difference, but it comes with limitations as an application grows.
+Une fonction de rétention (« debounce ») est utilisée pour limiter la fréquence d'exécution des requêtes Ajax et des autres opérations coûteuses. L'attribut `debounce` de Vue pour le paramètre `v-model` est taillé pour des cas simples, mais en fait il fait la rétention des __mises à jour d'état__ plutôt que des opérations lourdes elles-même. C'est une différence subtile, mais cela amène des limitations quand l'application grandit.
-These limitations become apparent when designing a search indicator, like this one for example:
+Ces limitations peuvent être mises en évidence avec un indicateur de recherche, comme celui de cet exemple :
{% raw %}
@@ -434,9 +434,9 @@ new Vue({
computed: {
searchIndicator: function () {
if (this.isCalculating) {
- return '⟳ Fetching new results'
+ return '⟳ Recheche de nouveaux résultats'
} else if (this.searchQueryIsDirty) {
- return '... Typing'
+ return '... Frappe en cours'
} else {
return '✓ Done'
}
@@ -461,14 +461,14 @@ new Vue({
{% endraw %}
-Using the `debounce` attribute, there'd be no way to detect the "Typing" state, because we lose access to the input's real-time state. By decoupling the debounce function from Vue however, we're able to debounce only the operation we want to limit, removing the limits on features we can develop:
+Utiliser l'attribut `debounce` ne donne aucun moyen de détecter l'état « ... Frappe en cours » car nous perdons l'accès à l'état en temps réel du champ. En découplant la fonction `debounce` de Vue cependant, nous sommes capable de faire la rétention seulement des opérations que nous souhaitons limiter, enlevant ainsi l'utilité de la fonctionnalité interne :
``` html
@@ -503,7 +503,7 @@ new Vue({
}
},
methods: {
- // This is where the debounce actually belongs.
+ // C'est ici que la fonction `debounce` est actuellement utilisée.
expensiveOperation: _.debounce(function () {
this.isCalculating = true
setTimeout(function () {
@@ -515,25 +515,25 @@ new Vue({
})
```
-Another advantage of this approach is there will be times when debouncing isn't quite the right wrapper function. For example, when hitting an API for search suggestions, waiting to offer suggestions until after the user has stopped typing for a period of time isn't an ideal experience. What you probably want instead is a __throttling__ function. Now since you're already using a utility library like lodash, refactoring to use its `throttle` function instead takes only a few seconds.
+Un autre avantage de cette approche est que parfois la rétention n'est pas la méthode de limitation d'exécution la plus appropriée. Par exemple, quand vous interrogez une API pour des suggestions de recherche, attendre que l'utilisateur se soit arrêté de taper pour commencer à lui offrir des suggestions n'est pas une expérience utilisateur idéale. Ce que vous souhaiteriez probablement à la place est une fonction de découplage (« throttle »). Maintenant, avec l'utilisation d'une bibliothèque comme loadash, refactoriser le code en utilisant la fonction `throttle` ne prend que quelques secondes.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the debounce attribute.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences du paramètre d'attribut debounce.
{% endraw %}
-### `lazy` or `number` Param Attributes for `v-model` replaced
+### Paramètre d'attribut `lazy` ou `number` pour `v-model` remplacés
-The `lazy` and `number` param attributes are now modifiers, to make it more clear what That means instead of:
+Les paramètres d'attribut `lazy` et `number` sont maintenant des modifcateurs, pour rendre cela plus clair. Cela signifie que au lieu de :
``` html
```
-You would use:
+Nous utiliserons :
``` html
@@ -542,22 +542,22 @@ You would use:
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the these param attributes.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des paramètres d'attributs lazy ou number.
{% endraw %}
-### `value` Attribute with `v-model` removed
+### Attribut `value` avec `v-model` retiré
-`v-model` no longer cares about the initial value of an inline `value` attribute. For predictability, it will instead always treat the Vue instance data as the source of truth.
+`v-model` ne se préoccupe plus de la valeur initiale de l'attribut `value`. Pour plus de prédictibilité, il utilisera toujours la donnée utilisée dans l'instance de Vue comme source de vérité.
-That means this element:
+Cela signifie que cet élément :
``` html
```
-backed by this data:
+lié par cette donnée :
``` js
data: {
@@ -565,7 +565,7 @@ data: {
}
```
-will render with a value of "bar" instead of "foo". The same goes for a `
```
-You should ensure your initial value for `text` is "hello world".
+vous devrez vous assurer que la valeur initiale pour `text` est `"hello world"`.
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite or app after upgrading and look for console warnings about inline value attributes with v-model.
+
Comment procéder ?
+
Lancez votre suite de tests ou votre application après mise à jour et vérifiez les avertissements de console à propos d'éléments des valeurs de l'attribut value avec v-model.
{% endraw %}
-### `v-model` with `v-for` Iterated Primitive Values removed
+### Itération de valeur primitive avec `v-model` et `v-for` retiré
-Cases like this no longer work:
+Les cas de figure comme celui-ci ne fonctionnent plus :
``` html
```
-The reason is this is the equivalent JavaScript that the `` would compile to:
+La raison est que le JavaScript équivalent après compilation de `` est :
``` js
strings.map(function (str) {
@@ -598,9 +598,9 @@ strings.map(function (str) {
})
```
-As you can see, `v-model`'s two-way binding doesn't make sense here. Setting `str` to another value in the iterator function will do nothing because it's just a local variable in the function scope.
+Comme vous pouvez le voir, la liaison bidirectionnelle de `v-model` n'a plus de sens ici. Définir `str` avec une autre valeur dans une fonction itérateur ne fera rien car ça ne sera qu'une variable locale dans la portée de la fonction.
-Instead, you should use an array of __objects__ so that `v-model` can update the field on the object. For example:
+À la place, vous pouriez utiliser un tableau d'__objet__ et ainsi `v-model` poura mettre à jour le champ avec l'objet. Par exemple :
``` html
@@ -608,20 +608,20 @@ Instead, you should use an array of __objects__ so that `v-model` can update the
{% raw %}
-
Upgrade Path
-
Run your test suite, if you have one. The failed tests should alert to you to any parts of your app that may be affected by this change.
+
Comment procéder ?
+
Lancez votre suite de tests si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectées par ce changement.
{% endraw %}
-### `v-bind:style` with Object Syntax and `!important` removed
+### `v-bind:style` avec la syntaxe objet et `!important` retiré
-This will no longer work:
+Ceci ne fonctionne plus :
``` html
hello
```
-If you really need to override another `!important`, you must use the string syntax:
+Si vous voulez vraiment ré-écrire un autre `!important`, vous devrez utiliser la syntaxe de chaîne de caractères :
``` html
hello
@@ -629,91 +629,91 @@ If you really need to override another `!important`, you must use the string syn
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of style bindings with !important in objects.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des liaisons de style avec !important.
{% endraw %}
-### `v-el` and `v-ref` replaced
+### `v-el` et `v-ref` remplacés
-For simplicity, `v-el` and `v-ref` have been merged into the `ref` attribute, accessible on a component instance via `$refs`. That means `v-el:my-element` would become `ref="myElement"` and `v-ref:my-component` would become `ref="myComponent"`. When used on a normal element, the `ref` will be the DOM element, and when used on a component, the `ref` will be the component instance.
+Pour plus de simplicité, `v-el` et `v-ref` ont été fusionnés dans l'attribut `ref`, accessible depuis l'instance d'un composant via `$refs`. Cela signifie que `v-el:my-element` devient `ref="myElement"` et que `v-ref:my-component` devient `ref="myComponent"`. Quand il est utilisé sur un élément normal, le `ref` se réfère à l'élément du DOM, et quand il est utilisé sur un composant, le `ref` se réfère à l'instance du composant.
-Since `v-ref` is no longer a directive, but a special attribute, it can also be dynamically defined. This is especially useful in combination with `v-for`. For example:
+Puisque `v-ref` n'est plus une directive, mais un attribut spécial, il peut également être défini dynamiquement. Ceci est particulièrement utile en combinaison avec `v-for`. Par exemple :
``` html
```
-Previously, `v-el`/`v-ref` combined with `v-for` would produce an array of elements/components, because there was no way to give each item a unique name. You can still achieve this behavior by given each item the same `ref`:
+Précédemment, `v-el` / `v-ref` utilisé avec un `v-for` produisait un tableau d'éléments ou de composants, car il n'y avait aucun moyen de donner un nom unique à chaque élément. Vous pouvez toujours reproduire ce comportement en donnant à chaque élément la même `ref` :
``` html
```
-Unlike in 1.x, these `$refs` are not reactive, because they're registered/updated during the render process itself. Making them reactive would require duplicate renders for every change.
+À la différence de la 1.x, les `$refs` ne sont pas réactives, car elles sont enregistrées / mises à jour durant le processus de rendu lui-même. Les rendre réactives demanderait de dupliquer le rendu à chaque changement.
-On the other hand, `$refs` are designed primarily for programmatic access in JavaScript - it is not recommended to rely on them in templates, because that would mean referring to state that does not belong to the instance itself. This would violate Vue's data-driven view model.
+D'un autre côté, `$refs` est conçu avant tout pour un accès programmatique en JavaScript, il n'est donc pas recommandé de les relier dans les templates, car cela signifierait de se référer à un état qui n'est plus en phase avec l'instance elle même. Cela violerait le vue-modèle piloté par les données de Vue.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of v-el and v-ref.
{% endraw %}
-### `v-else` with `v-show` removed
+### `v-else` avec `v-show` retiré
-`v-else` no longer works with `v-show`. Use `v-if` with a negation expression instead. For example, instead of:
+`v-else` n'est plus supporté avec `v-show`. Utilisez `v-if` avec une expression négative à la place. Par exemple, au lieu de :
``` html
Foo
-
Not foo, but bar
+
Pas foo, mais bar
```
-You can use:
+Vous pouvez utilisez :
``` html
Foo
-
Not foo, but bar
+
Pas foo, mais bar
```
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the v-else with v-show.
{% endraw %}
-## Custom Directives simplified
+## Directives personnalisées simplifiées
-Directives have a greatly reduced scope of responsibility: they are now only used for applying low-level direct DOM manipulations. In most cases, you should prefer using components as the main code-reuse abstraction.
+Les directives ont une portée de responsabilité grandement réduite : elles sont maintenant uniquement utilisées pour appliquer des manipulations de DOM de bas niveau. Dans la plupart des cas, il faut utiliser des composants comme principale abstraction de codes réutilisables.
-Some of the most notable differences include:
+Certaines des différences les plus notables incluent :
-- Directives no longer have instances. This means there's no more `this` inside directive hooks. Instead, they receive everything they might need as arguments. If you really must persist state across hooks, you can do so on `el`.
-- Options such as `acceptStatement`, `deep`, `priority`, etc have all been removed. To replace `twoWay` directives, see [this example](#Two-Way-Filters-replaced).
-- Some of the current hooks have different behavior and there are also a couple new hooks.
+- Les directives n'ont plus d'instances. Cela signifie qu'il n'y a plus de `this` dans les hooks des directives. À la place, elles reçoivent tout ce dont elles ont besoin en tant qu'argument. Si vous devez vraiment faire persister des états à travers les hooks, vous pouvez le faire avec `el`.
+- Les options comme `acceptStatement`, `deep`, `priority`, etc. ont toutes été retirées. Pour remplacer les directives `twoWay`, consultez [cet exemple](#filtres-bidirectionnels-replacés).
+- Certains des hooks ont un comportement différent. D'autres hooks sont nouveaux.
-Fortunately, since the new directives are much simpler, you can master them more easily. Read the new [Custom Directives guide](custom-directive.html) to learn more.
+Heureusement, puisque les nouvelles directives sont plus simples, vous pouvez les maîtriser plus facilement. Lisez le nouveau [guide des directives](custom-directive.html) pour en apprendre plus.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of defined directives. The helper will flag all of them, as it's likely in most cases that you'll want to refactor to a component.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de directives définies. L'outil d'aide va toutes vous les pointers, comme dans la plupart des cas vous allez devoir les refactoriser dans un composant.
{% endraw %}
-### Directive `.literal` Modifier removed
+### Modificateur de directive `.literal` retiré
-The `.literal` modifier has been removed, as the same can be easily achieved by just providing a string literal as the value.
+Le modificateur `.literal` a été supprimé, la même chose peut être facilement réalisée en fournissant une chaîne de caractères littérale en tant que valeur.
-For example, you can update:
+Par exemple, vous pouvez mettre à jour :
``` js
```
-to just:
+avec :
``` html
@@ -721,55 +721,55 @@ to just:
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the `.literal` modifier on a directive.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de modificateurs .literal sur les directives.
{% endraw %}
## Transitions
-### `transition` Attribute replaced
+### Attribut `transition` remplacé
-Vue's transition system has changed quite drastically and now uses `` and `` wrapper elements, rather than the `transition` attribute. It's recommended to read the new [Transitions guide](transitions.html) to learn more.
+Le système de transition de Vue a changé drastiquement et maintenant il faut utiliser les éléments `` et `` au lieu de l'attribut `transition`. Il est recommandé de lire le nouveau [guide des transitions](transitions.html) pour en apprendre plus.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the transition attribute.
{% endraw %}
-### `Vue.transition` for Reusable Transitions replaced
+### `Vue.transition` pour les transitions réutilisables remplacé
-With the new transition system, you can now just [use components for reusable transitions](transitions.html#Reusable-Transitions).
+Avec le nouveau système de transition, vous pouvez maintenant [utiliser les composants pour des transitions réutilisables](transitions.html#Transitions-réutilisables).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.transition.
{% endraw %}
-### Transition `stagger` Attribute removed
+### Attribut de transition `stagger` retiré
-If you need to stagger list transitions, you can control timing by setting and accessing a `data-index` (or similar attribute) on an element. See [an example here](transitions.html#Staggering-List-Transitions).
+Si vous avez besoin d'écheloner les transitions, vous pouvez contrôler le timing en accédant ou changeant une `data-index` ou attribut similaire sur un élément. Consultez [un exemple ici](transitions.html#Echelonnage-des-transitions-de-liste).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the transition attribute. During your update, you can transition (pun very much intended) to the new staggering strategy as well.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'attribut de transition. Au cours de votre mise à jour, vous pouvez également passer à la nouvelle stratégie d'échelonnage.
{% endraw %}
-## Events
+## Évènements
-### `events` option removed
+### Option `events` retirée
-The `events` option has been removed. Event handlers should now be registered in the `created` hook instead. Check out the [`$dispatch` and `$broadcast` migration guide](#dispatch-and-broadcast-replaced) for a detailed example.
+L'option `events` a été retirée. Les gestionnaires d'évènements doivent maintenant être abonnés dans le hook `created` à la place. Consultez [le guide `$dispatch` et `$broadcast`](#dispatch-et-broadcast-remplaces) pour plus de détails.
-### `Vue.directive('on').keyCodes` replaced
+### `Vue.directive('on').keyCodes` remplacé
-The new, more concise way to configure `keyCodes` is through `Vue.config.keyCodes`. For example:
+La nouvelle, et plus concise, manière de configurer `keyCodes` à travers `Vue.config.keyCodes`. Par exemple :
``` js
// enable v-on:keyup.f1
@@ -777,22 +777,22 @@ Vue.config.keyCodes.f1 = 112
```
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the the old keyCode configuration syntax.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vieilles configurations de syntaxe keyCode.
{% endraw %}
-### `$dispatch` and `$broadcast` replaced
+### `$dispatch` et `$broadcast` remplacés
-`$dispatch` and `$broadcast` have been removed in favor of more explicitly cross-component communication and more maintainable state management solutions, such as [Vuex](https://github.com/vuejs/vuex).
+`$dispatch` et `$broadcast` ont été remplacés en faveur d'une communication plus explicite entre composants et des solutions de gestion d'état plus maintenables, comme [Vuex](https://github.com/vuejs/vuex).
-The problem is event flows that depend on a component's tree structure can be hard to reason about and very brittle when the tree becomes large. It simply doesn't scale well and we don't want to set you up for pain later. `$dispatch` and `$broadcast` also do not solve communication between sibling components.
+Le problème est que le flux d'évènement dépend de la structure de l'arbre des composants qui peut être dur à appréhender et très fragile quand l'arbre devient large. Il ne s'adaptait pas correctement et nous ne voulons pas qu'il amène plus de mal que de bien. `$dispatch` et `$broadcast` ne résolvaient pas non plus la communication entre les composants voisins.
-One of the most common uses for these methods is to communicate between a parent and its direct children. In these cases, you can actually [listen to an `$emit` from a child with `v-on`](components.html#Form-Input-Components-using-Custom-Events). This allows you to keep the convenience of events with added explicitness.
+L'un des usages les plus communs de ces méthodes était la communication entre un parent et ses enfants directs. Dans ces cas, vous pouvez en fait [écouter un `$emit` depuis un enfant avec `v-on`](components.html#Composants-de-champ-de-formulaire-utilisant-les-evenements-personnalises). Cela vous permet de garder la commodité des évènements en étant plus explicite.
-However, when communicating between distant descendants/ancestors, `$emit` won't help you. Instead, the simplest possible upgrade would be to use a centralized event hub. This has the added benefit of allowing you to communicate between components no matter where they are in the component tree - even between siblings! Because Vue instances implement an event emitter interface, you can actually use an empty Vue instance for this purpose.
+Cependant, quand on communique entre descendant ou ancêtres distant, `$emit` ne nous aidera pas. À la place, le plus simple serait de centraliser les changements dans un canal d'évènements centralisé. Cela vous apporte la possibilité de communiquer entre composants sans vous soucier de là où ils sont dans l'arbre des composants (même entre voisins !). Parce que les instances de Vue implémentent une interface d'émission d'évènement, vous pouvez en fait utiliser une instance de Vue vide pour réaliser cela.
-For example, let's say we have a todo app structured like this:
+Par exemple, imaginons que nous avons une application de liste de tâches comme celle là :
```
Todos
@@ -801,15 +801,15 @@ Todos
|-- DeleteTodoButton
```
-We could manage communication between components with this single event hub:
+Nous pourrions gérer la communication entre ces composants avec ce simple canal d'évènement :
``` js
-// This is the event hub we'll use in every
-// component to communicate between them.
+// Ceci est le canal d'évènement que nous utiliserons dans
+// tous les composants pour communiquer entre eux.
var eventHub = new Vue()
```
-Then in our components, we can use `$emit`, `$on`, `$off` to emit events, listen for events, and clean up event listeners, respectively:
+Maintenant dans nos composants, nous pouvons utilisez `$emit`, `$on` et `$off` pour respectivement émettre des évènements, écouter des évènements et nettoyer les écouteurs d'évènements :
``` js
// NewTodoInput
@@ -839,8 +839,8 @@ created: function () {
eventHub.$on('add-todo', this.addTodo)
eventHub.$on('delete-todo', this.deleteTodo)
},
-// It's good to clean up event listeners before
-// a component is destroyed.
+// Il est bon de nettoyer les écouteurs d'évènements avant
+// la destruction du composant.
beforeDestroy: function () {
eventHub.$off('add-todo', this.addTodo)
eventHub.$off('delete-todo', this.deleteTodo)
@@ -857,26 +857,26 @@ methods: {
}
```
-This pattern can serve as a replacement for `$dispatch` and `$broadcast` in simple scenarios, but for more complex cases, it's recommended to use a dedicated state management layer such as [Vuex](https://github.com/vuejs/vuex).
+Ce modèle peut servir de remplacement à `$dispatch` et `$broadcast` dans des scénarios simples. Pour des cas plus complexes, il est recommandé d'utiliser une couche de gestion d'état dédiée comme [Vuex](https://github.com/vuejs/vuex).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of $dispatch and $broadcast.
{% endraw %}
-## Filters
+## Filtres
-### Filters Outside Text Interpolations removed
+### Filtres en dehors des interpolations de texte retiré
-Filters can now only be used inside text interpolations (`{% raw %}{{ }}{% endraw %}` tags). In the past we've found using filters within directives such as `v-model`, `v-on`, etc led to more complexity than convenience. For list filtering on `v-for`, it's also better to move that logic into JavaScript as computed properties, so that it can be reused throughout your component.
+Les filtres peuvent maintenant seulement être utilisés à l'intérieur des interpolations de texte (Ouverture et fermeture `{% raw %}{{ }}{% endraw %}`). Avant, il était possible d'utiliser ses filtres sur `v-model`, `v-on`, etc mais cela menait à plus de complexité et d'inconvénient. Pour filtrer les listes sur `v-for`, il est plus logique de déplacer cela dans la partie propriétés calculées du JavaScript, ainsi cela peut-être ré-utilisé à travers votre composant.
-In general, whenever something can be achieved in plain JavaScript, we want to avoid introducing a special syntax like filters to take care of the same concern. Here's how you can replace Vue's built-in directive filters:
+En général, chaque fois que quelque chose peut-être fait en JavaScript, nous voulons éviter d'introduire une syntaxe spéciale comme les filtres pour prendre en charge les mêmes choses. Voici comment vous pouvez remplacer les directives de filtre de Vue :
-#### Replacing the `debounce` Filter
+#### Remplacer le filtre `debounce`
-Instead of:
+Au lieu de :
``` html
@@ -890,7 +890,7 @@ methods: {
}
```
-Use [lodash's `debounce`](https://lodash.com/docs/4.15.0#debounce) (or possibly [`throttle`](https://lodash.com/docs/4.15.0#throttle)) to directly limit calling the expensive method. You can achieve the same as above like this:
+utilisez le [`debounce` de lodash](https://lodash.com/docs/4.15.0#debounce) (ou également [`throttle`](https://lodash.com/docs/4.15.0#throttle)) pour limiter directement l'appel des méthodes coûteuse en ressource. Vous pouvez ainsi arriver au même résultat qu'au dessus ainsi :
``` html
@@ -904,17 +904,17 @@ methods: {
}
```
-For more on the advantages of this strategy, see [the example here with `v-model`](#debounce-Param-Attribute-for-v-model-removed).
+Pour en savoir plus sur les avantages de cette stratégie, regardez [l'exemple ici avec `v-model`](#Parametre-dattribut-debounce-pour-v-model-retire).
-#### Replacing the `limitBy` Filter
+#### Remplacer le filtre `limitBy`
-Instead of:
+À la place de :
``` html
{{ item }}
```
-Use JavaScript's built-in [`.slice` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Examples) in a computed property:
+Utiliser la [méthode native `.slice`](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Exemples) du JavaScript dans une propriété calculée :
``` html
{{ item }}
@@ -928,15 +928,15 @@ computed: {
}
```
-#### Replacing the `filterBy` Filter
+#### Remplacer le filtre `filterBy`
-Instead of:
+Au lieu de :
``` html
{{ user.name }}
```
-Use JavaScript's built-in [`.filter` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Examples) in a computed property:
+Utiliser la [méthode native `.filter`](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Exemples) du JavaScript dans une propriété calculée :
``` html
{{ user.name }}
@@ -953,7 +953,7 @@ computed: {
}
```
-JavaScript's native `.filter` can also manage much more complex filtering operations, because you have access to the full power of JavaScript within computed properties. For example, if you wanted to find all active users and case-insensitively match against both their name and email:
+La fonction JavaScript navive `.filter` peut également gérer des opérations de filtrage plus complexes, car vous avez accès à toute la puissance de JavaScript dans les propriétés calculées. Par exemple, si vous souhaitez trouver tous les utilisateurs actifs avec une concordance non sensible à la casse de leur nom et de leur email :
``` js
var self = this
@@ -966,15 +966,15 @@ self.users.filter(function (user) {
})
```
-#### Replacing the `orderBy` Filter
+#### Remplacer le filtre `orderBy`
-Instead of:
+Au lieu de :
``` html
{{ user.name }}
```
-Use [lodash's `orderBy`](https://lodash.com/docs/4.15.0#orderBy) (or possibly [`sortBy`](https://lodash.com/docs/4.15.0#sortBy)) in a computed property:
+Utilisez le [`orderBy` de lodash](https://lodash.com/docs/4.15.0#orderBy) (ou également [`sortBy`](https://lodash.com/docs/4.15.0#sortBy)) dans une propriété calculée :
``` html
{{ user.name }}
@@ -988,7 +988,7 @@ computed: {
}
```
-You can even order by multiple columns:
+Vous pouvez même ordonner par plusieurs colonnes :
``` js
_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])
@@ -996,20 +996,20 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of filters being used inside directives. If you miss any, you should also see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres utilisés dans les directives. Si vous en oubliez, vous devriez également voir des erreurs dans la console.
{% endraw %}
-### Filter Argument Syntax changed
+### Syntaxe d'argument de filtre changée
-Filters' syntax for arguments now better aligns with JavaScript function invocation. So instead of taking space-delimited arguments:
+La syntaxe pour les arguments de filtre est maintenant plus consistante avec l'invocation des fonctions JavaScript. Donc au lieu d'utiliser des délimitations avec espace pour les arguments :
``` html
{{ date | formatDate 'YY-MM-DD' timeZone }}
```
-We surround the arguments with parentheses and delimit the arguments with commas:
+Nous entourons les arguments avec des parenthèses et les délimitons avec des virgules :
``` html
{{ date | formatDate('YY-MM-DD', timeZone) }}
@@ -1017,42 +1017,42 @@ We surround the arguments with parentheses and delimit the arguments with commas
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the old filter syntax. If you miss any, you should also see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vieilles syntaxes de filtre. Si vous en oubliez, vous devriez également voir des erreurs dans la console.
{% endraw %}
-### Built-In Text Filters removed
+### Filtres de texte intégré retirés
-Although filters within text interpolations are still allowed, all of the filters have been removed. Instead, it's recommended to use more specialized libraries for solving problems in each domain (e.g. [`date-fns`](https://date-fns.org/) to format dates and [`accounting`](http://openexchangerates.github.io/accounting.js/) for currencies).
+Bien que les filtres dans les interpolations de texte soit toujours autorisés, tous les filtres ont été retirés. À la place, nous recommandons d'utiliser des bibliothèques spéciales pour résoudre les problèmes dans chaque domaine (par ex. [`date-fns`](https://date-fns.org/) pour le format des dates et [`accounting`](http://openexchangerates.github.io/accounting.js/) pour le format des devises).
-For each of Vue's built-in text filters, we go through how you can replace them below. The example code could exist in custom helper functions, methods, or computed properties.
+Vous trouverez de quoi remplacer chaque filtre de texte dans la liste ci-dessous. L'exemple de code peut exister dans des fonctions utilitaires personnalisées, méthodes ou propriétés calculées.
-#### Replacing the `json` Filter
+#### Remplacer le filtre `json`
-You actually don't need to for debugging anymore, as Vue will nicely format output for you automatically, whether it's a string, number, array, or plain object. If you want the exact same functionality as JavaScript's `JSON.stringify` though, then you can use that in a method or computed property.
+Vous n'avez rien besoin de faire de ce point de vue, car Vue va joliment formater la sortie pour vous automatiquement, qu'il s'agisse d'une chaîne de caractères, d'un nombre, d'un tableau ou d'un objet complet. Si vous voulez une fonctionnalité identique en JavaScript, c'est `JSON.stringify`. Vous pouvez donc utiliser cela dans une méthode ou dans une propriété calculée.
-#### Replacing the `capitalize` Filter
+#### Remplacer le filtre `capitalize`
``` js
text[0].toUpperCase() + text.slice(1)
```
-#### Replacing the `uppercase` Filter
+#### Remplacer le filtre `uppercase`
``` js
text.toUpperCase()
```
-#### Replacing the `lowercase` Filter
+#### Remplacer le filtre `lowercase`
``` js
text.toLowerCase()
```
-#### Replacing the `pluralize` Filter
+#### Remplacer le filtre `pluralize`
-The [pluralize](https://www.npmjs.com/package/pluralize) package on npm serves this purpose nicely, but if you only want to pluralize a specific word or want to have special output for cases like `0`, then you can also easily define your own pluralize functions. For example:
+Le package [pluralize](https://www.npmjs.com/package/pluralize) sur npm adresse très bien ces problèmes, mais si vous voulez uniquement mettre au pluriel un mot spécifique ou que vous voulez une sortie spéciale pour dès cas comme `0`, vous pouvez facilement définir votre propre fonction de mise au pluriel. Par exemple :
``` js
function pluralizeKnife (count) {
@@ -1066,94 +1066,94 @@ function pluralizeKnife (count) {
}
```
-#### Replacing the `currency` Filter
+#### Remplacer le filtre `currency`
-For a very naive implementation, you could just do something like this:
+Pour toutes les implémentations basiques, vous pouvez juste faire quelque chose comme ceci :
``` js
'$' + price.toFixed(2)
```
-In many cases though, you'll still run into strange behavior (e.g. `0.035.toFixed(2)` rounds up to `0.04`, but `0.045` rounds down to `0.04`). To work around these issues, you can use the [`accounting`](http://openexchangerates.github.io/accounting.js/) library to more reliably format currencies.
+Dans beaucoup de cas cependant, vous allez toujours tomber sur des comportements étranges (par ex : `0.035.toFixed(2)` va être arrondi à l'entier supérieur alors que `0.045` va être arrondi à l'entier inférieur). Pour résoudre ces problèmes, vous pouvez utiliser la bibliothèque [`accounting`](http://openexchangerates.github.io/accounting.js/) pour des formats de devises plus solides.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the obsolete text filters. If you miss any, you should also see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres obsolètes. Si vous en oubliez, vous devriez également voir des erreurs dans la console.
{% endraw %}
-### Two-Way Filters replaced
+### Filtres bidirectionnels remplacés
-Some users have enjoyed using two-way filters with `v-model` to create interesting inputs with very little code. While _seemingly_ simple however, two-way filters can also hide a great deal of complexity - and even encourage poor UX by delaying state updates. Instead, components wrapping an input are recommended as a more explicit and feature-rich way of creating custom inputs.
+Beaucoup d'utilisateurs adorent utiliser des filtres bidirectionnels avec `v-model` pour créer des champs intéressants avec très peu de code. Si simple _d'apparence_, les filtres bidirectionnels peuvent aussi cacher un grand niveau de complexité et encourager une expérience utilisateur pauvre en rendant lente la mise à jour des états. À la place, la création d'un champ dans un composant est recommandée et permet de mieux appréhender son utilisation et d'y ajouter tout ce qu'il faut pour de la création de champs personnalisés.
-As an example, we'll now walk the migration of a two-way currency filter:
+Par exemple, nous allons migrer un filtre de devise bidirectionnel :
-It mostly works well, but the delayed state updates can cause strange behavior. For example, click on the `Result` tab and try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync!
+Il fonctionne plutôt bien, mais la rétention de mise à jour d'état peut causer des comportements étranges. Par exemple, cliquez sur l'onglet `Result` et essayez d'entrer la valeur `9.999` dans l'un des champs. Quand le champ perd le focus, sa valeur va être mise à jour à `$10.00`. Quand vous regardez le total calculé cependant, vous verrez que `9.999` est toujours stocké dans nos données. La version de la réalité que l'utilisateur voit est hors de synchro !
-To start transitioning towards a more robust solution using Vue 2.0, let's first wrap this filter in a new `` component:
+Pour commencer a utiliser une solution plus robuste en utilisant Vue 2.0, commençons par entourer ce filtre dans un nouveau composant `` :
-This allows us add behavior that a filter alone couldn't encapsulate, such as selecting the content of an input on focus. Now the next step will be to extract the business logic from the filter. Below, we pull everything out into an external [`currencyValidator` object](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e):
+Celui-ci nous permet d'ajouter des comportements qu'un filtre seul ne pourrait pas encapsuler, comme sélectionner le contenu d'un champ lors du focus. Maintenant, la prochaine étape va être d'extraire la logique métier du filtre. Ci-dessous, nous allons tout mettre dans un [objet `currencyValidator`](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e) externe :
-This increased modularity not only makes it easier to migrate to Vue 2, but also allows currency parsing and formatting to be:
+Cette augmentation de la modularité ne permet pas seulement de rendre plus facile la migration vers Vue 2, mais permet également à l'analyse et au formatage d'être :
-- unit tested in isolation from your Vue code
-- used by other parts of your application, such as to validate the payload to an API endpoint
+- testé unitairement et isolé de votre code Vue,
+- utilisé par d'autres parties de votre application, comme pour valider les valeurs en provenance d'une API.
-Having this validator extracted out, we've also more comfortably built it up into a more robust solution. The state quirks have been eliminated and it's actually impossible for users to enter anything wrong, similar to what the browser's native number input tries to do.
+Avec ce validateur extrait, nous sommes plus à l'aise pour construire une solution plus robuste. L'étrangeté de changement d'état a été éliminée et il est en fait impossible pour l'utilisateur d'entrer une valeur fausse, de la même manière que le fait le champ numérique natif des navigateurs.
-We're still limited however, by filters and by Vue 1.0 in general, so let's complete the upgrade to Vue 2.0:
+Nous sommes toujours limité cependant, par les filtres et par Vue 1.0 en général. Donc terminons notre mise à jour vers Vue 2.0 :
-You may notice that:
+Vous pouvez remarquer que :
-- Every aspect of our input is more explicit, using lifecycle hooks and DOM events in place of the hidden behavior of two-way filters.
-- We can now use `v-model` directly on our custom inputs, which is not only more consistent with normal inputs, but also means our component is Vuex-friendly.
-- Since we're no longer using filter options that require a value to be returned, our currency work could actually be done asynchronously. That means if we had a lot of apps that had to work with currencies, we could easily refactor this logic into a shared microservice.
+- Tous les aspects de notre champ sont plus explicites, en utilisant les hooks de cycle de vie et les évènements du DOM à la place du mécanisme masqué des filtres bidirectionnels.
+- Nous pouvons maintenant utiliser `v-model` directement sur nos champs personnalisés, cela ne signifie pas uniquement qu'ils ont plus de consistances avec les champs standards, mais cela signifie également qu'ils sont mieux adaptés à Vuex.
+- Comme nous n'utilisons plus d'options de filtre nécessitant qu'une valeur soit retournée, notre devise peut fonctionner de manière asynchrone. Cela signifie que si vous avez beaucoup d'applications qui fonctionnent avec des devises, vous pouvez facilement refactoriser les logiques dans un microservice.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of filters used in directives like v-model. If you miss any, you should also see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres utilisant des directives comme v-model. Si vous en oubliez, vous devriez également voir des erreurs dans la console.
{% endraw %}
## Slots
-### Duplicate Slots removed
+### Slots dupliqués retirés
-It is no longer supported to have ``s with the same name in the same template. When a slot is rendered it is "used up" and cannot be rendered elsewhere in the same render tree. If you must render the same content in multiple places, pass that content as a prop.
+Il n'est plus possible d'avoir deux `` avec le même nom dans le même template. Quand le rendu d'un slot est fait, il est réputé déjà rendu et son rendu ne doit plus être refait dans le même arbre de rendu. Si vous devez faire le rendu d'un même contenu, à des endroits différents, passez le contenu en tant que prop.
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite or app after upgrading and look for console warnings about duplicate slots v-model.
+
Comment procéder ?
+
Lancez votre suite de tests ou votre application après mise à jour et vérifiez les avertissements de console à propos de slots v-model dupliqué.
{% endraw %}
-### `slot` Attribute Styling removed
+### Attribut de stylisation `slot` retiré
-Content inserted via named `` no longer preserves the `slot` attribute. Use a wrapper element to style them, or for advanced use cases, modify the inserted content programmatically using [render functions](render-function.html).
+Le contenu inséré via un `` nommé ne préservera plus l'attribut `slot`. Utilisez un élément englobant pour le styliser, ou pour des cas avancés, modifiez le contenu inséré programmatiquement en utilisant des [fonctions de rendu](render-function.html).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find CSS selectors targeting named slots (e.g. [slot="my-slot-name"]).
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des sélecteurs CSS ciblant des slots nommées (par ex : [slot="my-slot-name"]).
{% endraw %}
-## Special Attributes
+## Attributs spéciaux
-### `keep-alive` Attribute replaced
+### Attributs `keep-alive` remplacés
-`keep-alive` is no longer a special attribute, but rather a wrapper component, similar to ``. For example:
+`keep-alive` n'est plus un attribut spécial, mais un composant enveloppant, similaire à ``. Par exemple :
``` html
@@ -1161,7 +1161,7 @@ Content inserted via named `` no longer preserves the `slot` attribute. Us
```
-This makes it possible to use `` on multiple conditional children:
+Cela permet d'utiliser `` sur de multiple enfants conditionnels :
``` html
@@ -1170,9 +1170,9 @@ This makes it possible to use `` on multiple conditional children:
```
-
When `` has multiple children, they should eventually evaluate to a single child. Any child other than the first one will simply be ignored.
+
Quand `` a plusieurs enfants, ils devraient être évalués comme un seul enfant. Tout autre enfant autre que le premier sera simplement ignoré.
-When used together with ``, make sure to nest it inside:
+Quand vous les utilisez avec ``, assurez-vous de les imbriquer ainsi :
``` html
@@ -1184,28 +1184,28 @@ When used together with ``, make sure to nest it inside:
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find keep-alive attributes.
{% endraw %}
## Interpolation
-### Interpolation within Attributes removed
+### Interpolation dans les attributs retirée
-Interpolation within attributes is no longer valid. For example:
+L'interpolation dans les attributs ne fonctionne plus. Par exemple :
``` html
```
-Should either be updated to use an inline expression:
+Doit maintenant être mis à jour pour être utilisé dans une expression avec `v-bind` :
``` html
```
-Or a data/computed property:
+Ou une propriété de `data` ou de `computed` :
``` html
@@ -1221,84 +1221,84 @@ computed: {
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of interpolation used within attributes.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'interpolation utilisée dans les attributs.
{% endraw %}
-### HTML Interpolation removed
+### Interpolation HTML retirée
-HTML interpolations (`{% raw %}{{{ foo }}}{% endraw %}`) have been removed in favor of the [`v-html` directive](../api/#v-html).
+L'interpolations HTML (`{% raw %}{{{ foo }}}{% endraw %}`) a été retirée. La [directive `v-html`](../api/#v-html) est maintenant préférée.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find HTML interpolations.
{% endraw %}
-### One-Time Bindings replaced
+### Liaisons à un seul rendu remplacées
-One time bindings (`{% raw %}{{* foo }}{% endraw %}`) have been replaced by the new [`v-once` directive](../api/#v-once).
+Les liaisons à un seul rendu (`{% raw %}{{* foo }}{% endraw %}`) ont été remplacées par la nouvelle [directive `v-once`](../api/#v-once).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find one-time bindings.
{% endraw %}
-## Reactivity
+## Reactivité
-### `vm.$watch` changed
+### `vm.$watch` changé
-Watchers created via `vm.$watch` are now fired before the associated component rerenders. This gives you the chance to further update state before the component rerender, thus avoiding unnecessary updates. For example, you can watch a component prop and update the component's own data when the prop changes.
+Les observateurs créés via `vm.$watch` sont maintenant levés avant le rendu des composants associés. Cela vous laisse le temps de mettre à jour l'état avant le rendu du composant, retirant de fait les mises à jour inutiles. Par exemple, vous pouvez observer une prop d'un composant et mettre à jour les données de ce composant quand la prop change.
-If you were previously relying on `vm.$watch` to do something with the DOM after a component updates, you can instead do so in the `updated` lifecycle hook.
+Si vous aviez précédemment relié `vm.$watch` à quelque chose du DOM après les mises à jour des composants, vous pouvez maintenant le faire dans le hook de cycle de vie `updated`.
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite, if you have one. The failed tests should alert to you to the fact that a watcher was relying on the old behavior.
+
Comment procéder ?
+
Lancez votre suite de tests si vous en avez. Les tests en échec devraient vous alerter du fait que les observateurs sont liés à un ancien comportement.
{% endraw %}
-### `vm.$set` changed
+### `vm.$set` changé
-`vm.$set` is now just an alias for [`Vue.set`](../api/#Vue-set).
+`vm.$set` est maintenant simplement un alias de [`Vue.set`](../api/#Vue-set).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the obsolete usage.
{% endraw %}
-### `vm.$delete` changed
+### `vm.$delete` changé
-`vm.$delete` is now just an alias for [`Vue.delete`](../api/#Vue-delete).
+`vm.$delete` est maintenant simplement un alias de [`Vue.delete`](../api/#Vue-delete).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of the obsolete usage.
{% endraw %}
-### `Array.prototype.$set` removed
+### `Array.prototype.$set` retiré
-Use `Vue.set` instead.
+Utilisez `Vue.set` à la place.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of .$set on an array. If you miss any, you should see console errors from the missing method.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de .$set sur un tableau. Si vous en oubliez, vous devriez voir des erreurs console sur la méthode manquante.
{% endraw %}
-### `Array.prototype.$remove` removed
+### `Array.prototype.$remove` retiré
-Use `Array.prototype.splice` instead. For example:
+Utilisez `Array.prototype.splice` à la place. Par exemple :
``` js
methods: {
@@ -1309,7 +1309,7 @@ methods: {
}
```
-Or better yet, just pass removal methods an index:
+Ou encore mieux, passez simplement l'index de l'objet à retirer :
``` js
methods: {
@@ -1321,49 +1321,49 @@ methods: {
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of .$remove on an array. If you miss any, you should see console errors from the missing method.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de .$remove sur un tableau. Si vous en oubliez, vous devriez voir des erreurs console sur la méthode manquante.
{% endraw %}
-### `Vue.set` and `Vue.delete` on Vue instances removed
+### `Vue.set` et `Vue.delete` sur les instances de Vue retiré
-`Vue.set` and `Vue.delete` can no longer work on Vue instances. It is now mandatory to properly declare all top-level reactive properties in the data option. If you'd like to delete properties on a Vue instance or its `$data`, just set it to null.
+`Vue.set` et `Vue.delete` ne fonctionnent plus avec les instances de Vue. Il est maintenant obligatoire de déclarer toutes les propriétés de haut niveau en tant que propriétés réactives dans l'option `data`. Si vous voulez supprimer des propriétés d'une instance de Vue ou des `$data`, mettez les à `null`.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.set or Vue.delete on a Vue instance. If you miss any, they'll trigger console warnings.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.set ou Vue.delete sur une instance de Vue. Si vous en oubliez, vous devriez voir des erreurs console sur la méthode manquante.
{% endraw %}
-### Replacing `vm.$data` removed
+### Remplacement de `vm.$data` retiré
-It is now prohibited to replace a component instance's root $data. This prevents some edge cases in the reactivity system and makes the component state more predictable (especially with type-checking systems).
+Il est maintenant interdit de remplacer l'objet `$data` d'une instance racine de Vue. Cela permet d'éviter les effets de bord dans le système de réactivité et permet a l'état du composant d'être plus prévisible (spécialement avec les systèmes de vérification de type).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of overwriting vm.$data. If you miss any, console warnings will be emitted.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$data écrasées. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-### `vm.$get` removed
+### `vm.$get` retiré
-Just retrieve reactive data directly.
+Retrouvez simplement la donnée réactive.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$get. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$get. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-## DOM-Focused Instance Methods
+## Méthodes d'intance centrés sur le DOM
-### `vm.$appendTo` removed
+### `vm.$appendTo` retiré
-Use the native DOM API:
+Utilisez l'API native du DOM :
``` js
myElement.appendChild(vm.$el)
@@ -1371,14 +1371,14 @@ myElement.appendChild(vm.$el)
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$appendTo. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$appendTo. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-### `vm.$before` removed
+### `vm.$before` retiré
-Use the native DOM API:
+Utilisez l'API native du DOM :
``` js
myElement.parentNode.insertBefore(vm.$el, myElement)
@@ -1386,20 +1386,20 @@ myElement.parentNode.insertBefore(vm.$el, myElement)
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$before. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$before. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-### `vm.$after` removed
+### `vm.$after` retiré
-Use the native DOM API:
+Utilisez l'API native du DOM :
``` js
myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)
```
-Or if `myElement` is the last child:
+ou si `myElement` est le dernier enfant :
``` js
myElement.parentNode.appendChild(vm.$el)
@@ -1407,14 +1407,14 @@ myElement.parentNode.appendChild(vm.$el)
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$after. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$after. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-### `vm.$remove` removed
+### `vm.$remove` retiré
-Use the native DOM API:
+Utilisez l'API native du DOM :
``` js
vm.$el.remove()
@@ -1422,51 +1422,51 @@ vm.$el.remove()
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$remove. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$remove. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-## Meta Instance Methods
+## Meta méthodes d'instance
-### `vm.$eval` removed
+### `vm.$eval` retiré
-No real use. If you do happen to rely on this feature somehow and aren't sure how to work around it, post on [the forum](http://forum.vuejs.org/) for ideas.
+Pas réellement utile. Si vous avez des difficultés liés à cette fonctionnalité et que vous n'êtes pas certain de savoir comment faire autrement, vous pouvez poster sur [le forum](https://forum.vuejs.org/c/french) et partagez vos idées.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$eval. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$eval. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-### `vm.$interpolate` removed
+### `vm.$interpolate` retiré
-No real use. If you do happen to rely on this feature somehow and aren't sure how to work around it, post on [the forum](http://forum.vuejs.org/) for ideas.
+Pas réellement utile. Si vous avez des difficultés liées à cette fonctionnalité et que vous n'êtes pas certain de savoir comment faire autrement, vous pouvez poster sur [le forum](https://forum.vuejs.org/c/french) et partager vos idées.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$interpolate. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$interpolate. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
-### `vm.$log` removed
+### `vm.$log` retiré
-Use the [Vue Devtools](https://github.com/vuejs/vue-devtools) for the optimal debugging experience.
+Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une expérience de débogage optimale.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of vm.$log. If you miss any, you'll see console errors.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vm.$log. Si vous en oubliez, vous devriez voir des erreurs console.
{% endraw %}
## Instance DOM Options
-### `replace: false` removed
+### `replace: false` retiré
-Components now always replace the element they're bound to. To simulate the behavior of `replace: false`, you can wrap your root component with an element similar to the one you're replacing. For example:
+Les composants remplacent maintenant les éléments sur lesquels ils sont liés. Pour simuler le comportement de `replace: false`, vous devez encadrer votre composant racine avec un élément similaire à celui que vous remplacez. Par exemple :
``` js
new Vue({
@@ -1475,7 +1475,7 @@ new Vue({
})
```
-Or with a render function:
+Ou avec une fonction de rendu :
``` js
new Vue({
@@ -1492,92 +1492,92 @@ new Vue({
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of replace: false.
{% endraw %}
-## Global Config
+## Configuration globale
-### `Vue.config.debug` removed
+### `Vue.config.debug` retirée
-No longer necessary, since warnings come with stack traces by default now.
+N'est plus nécessaire car les avertissements se trouvent dans la pile des traces par défaut maintenant.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.config.debug.
{% endraw %}
-### `Vue.config.async` removed
+### `Vue.config.async` retirée
-Async is now required for rendering performance.
+Async est maintenant requis pour les performances de rendu.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.config.async.
{% endraw %}
-### `Vue.config.delimiters` replaced
+### `Vue.config.delimiters` remplacée
-This has been reworked as a [component-level option](../api/#delimiters). This allows you to use alternative delimiters within your app without breaking 3rd-party components.
+Cela a été retravaillé en temps qu'[option de composant](../api/#delimiters). Cela vous permet d'utiliser un délimiteur alternatif dans votre application sans entrer en conflits avec des composants tiers.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.config.delimiters.
{% endraw %}
-### `Vue.config.unsafeDelimiters` removed
+### `Vue.config.unsafeDelimiters` retirée
-HTML interpolation has been [removed in favor of `v-html`](#HTML-Interpolation-removed).
+L'interpolation HTML a été [retirée en faveur de `v-html`](#Interpolation-HTML-retirée).
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.config.unsafeDelimiters. After this, the helper will also find instances of HTML interpolation so that you can replace them with `v-html`.
+
Comment procéder ?
+
Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.unsafeDelimiters. Après cela, l'outil d'aide va aussi trouver les instances d'interpolation HTML, ainsi vous pourrez les remplacer avec `v-html`.
{% endraw %}
-## Global API
+## API globale
-### `Vue.extend` with `el` removed
+### `Vue.extend` avec `el` retirée
-The el option can no longer be used in `Vue.extend`. It's only valid as an instance creation option.
+L'option `el` ne peut plus être utilisée avec `Vue.extend`. Elle est seulement valide en tant qu'option de création d'instance.
{% raw %}
-
Upgrade Path
-
Run your end-to-end test suite or app after upgrading and look for console warnings about the el option with Vue.extend.
+
Comment procéder ?
+
Lancez votre suite de tests ou votre application après mise à jour et vérifiez les avertissements de console à propos de l'option el avec Vue.extend.
{% endraw %}
-### `Vue.elementDirective` removed
+### `Vue.elementDirective` retirée
-Use components instead.
+Utilisez des composants à la place.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.elementDirective.
{% endraw %}
-### `Vue.partial` removed
+### `Vue.partial` retirée
-Partials have been removed in favor of more explicit data flow between components, using props. Unless you're using a partial in a performance-critical area, the recommendation is to simply use a [normal component](components.html) instead. If you were dynamically binding the `name` of a partial, you can use a [dynamic component](components.html#Dynamic-Components).
+Les partiels ont été retirés en faveur d'un flux de donnée plus explicite entre les composants, en utilisant les props. Partout où vous utilisiez des partiels dans des zones de performances critiques, la recommandation est simplement d'utiliser un [composant normal](components.html) à la place. Au cas où vous liez dynamiquement le `name` du partiel, vous pouvez utiliser un [composant dynamique](components.html#Composants-dynamiques).
-If you happen to be using partials in a performance-critical part of your app, then you should upgrade to [functional components](render-function.html#Functional-Components). They must be in a plain JS/JSX file (rather than in a `.vue` file) and are stateless and instanceless, just like partials. This makes rendering extremely fast.
+Si vous utilisiez des partiels dans des parties de votre application aux performances critiques, vous devriez les améliorer avec des [composants fonctionnels](render-function.html#Composants-fonctionnels). Ils seront entièrement en JavaScript ou JSX dans un fichier dédié (plutôt que dans un fichier `.vue`) et seront sans état et sans instance, exactement comme les partiels. Cela rendra le rendu extrêmement rapide.
-A benefit of functional components over partials is that they can be much more dynamic, because they grant you access to the full power of JavaScript. There is a cost to this power however. If you've never used a component framework with render functions before, they may take a bit longer to learn.
+Le bénéfice des composants fonctionnels face aux partiels est qu'ils peuvent être bien plus dynamiques, car ils vous permettent d'accéder à toute la puissance de JavaScript. Il y a un coût à cette puissance cependant. Si vous n'avez jamais utilisé un framework avec des composants de rendu avant, cela peut prendre un peu de temps pour l'apprentissage.
{% raw %}
-
Upgrade Path
-
Run the migration helper on your codebase to find examples of Vue.partial.