From 01ba1e8fceff50e985214b58a8ee6a7c02213f1d Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 22 Jul 2017 12:01:48 +0200 Subject: [PATCH 01/12] Starting translation of migration.md Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 7036ca97ec..822ce957f6 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1,40 +1,40 @@ --- -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, naviguez à travers la table de contenu de cette page dans la barre de navigation. Si vous voyez un sujet qui vous concerne, mais que l'outil d'aide à la migration n'a pas repéré, occupez-vous en. -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 trouverrez 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 partie seront vite parcourue 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 plupard d'entre elles peuvent être corrigé 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 de refactoriser (un peu tard) des parties. -> If I upgrade to Vue 2, will I also have to upgrade Vuex and Vue-Router? +> Si je mets à jour vers 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 suivre le [guide de migration pour Vue-Router](migration-vue-router.html) également. 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 des codes pré-conçus (« boilerplate ») moins verbeux. ## Templates From 8e0991c88602ca6d3b1c0acf2be1493b1e8e1083 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 22 Jul 2017 17:58:12 +0200 Subject: [PATCH 02/12] Add some translation part. Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 504 +++++++++++++++++++------------------- 1 file changed, 252 insertions(+), 252 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 822ce957f6..4a502e2f9b 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -38,16 +38,16 @@ En ce qui concerne Vuex, la version 0.8 est compatible avec Vue 2, vous n'êtes ## 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é de simplement d'entourer 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.

+

Mise en évidence

+

Lancez votre suite de test 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

{% endraw %} -### `compiled` replaced +### `compiled` remplacé -Use the new `mounted` hook instead. +Utilisez le hook `mounted` à la place. {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find all examples of this hook.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

{% endraw %} -### `attached` removed +### `attached` retiré -Use a custom in-DOM check in other hooks. For example, to replace: +Utiliser 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

{% endraw %} -### `detached` removed +### `detached` retiré -Use a custom in-DOM check in other hooks. For example, to replace: +Utiliser 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce 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 consistence 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce 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 garanti 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce 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.

+

Mise en évidence

+

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.

+

Mise en évidence

+

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ée à 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évisible 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

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de ces variables retirées. Si vous en oubliez certaine, 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 plupard 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de track-by.

{% endraw %} -### `v-for` Range Values changed +### `v-for` et nombres 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écedemment, `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.

+

Mise en évidence

+

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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de l'option coerce.

{% 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 unidirectionnelle et descendante. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement emettre 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de l'option twoWay.

{% 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 unidirectionnelle et descendante. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement emettre 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences 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 variables locales du composant enfant seront ré-écrites. -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.

+

Mise en évidence

+

Lancez votre suite de test 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.

+

Mise en évidence

+

Lancez votre suite de test 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 non avec invalidation de cache par des méthodes, cela produira le même résultat. -For example: +Pan 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de l'option cache: false.

{% endraw %} -## Built-In Directives +## Directives pré-conçues -### 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`, seule 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.

+

Mise en évidence

+

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectée 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.

+

Mise en évidence

+

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectée 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 le nombre de fois qu'une fonction a opérations lourdes est exécutée a une fois. L'attribut `debounce` 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 mise 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 intérogez une API pour des suggestions de recherche, attendre que l'utilisateur se soit arrêter de taper pour commencer à lui offrir des sugestions 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 utilasant 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences 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é -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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences 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édictabilité, il utilisera toujours la donnée utilisée dans l'instnace 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.

+

Mise en évidence

+

Lancez votre suite de test 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.

+

Mise en évidence

+

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectée 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 caratè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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences 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é en l'attribut `ref`, accessible depuis l'instnace 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éciale, il peut également être défini dynamiquement. Cela spécialement utile 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 diférence de la 1.x, les `$refs` ne sont pas réactive, car elles sont enregistrées / mises à jour durant le processus de rendu lui-même. Les rendres ré-active 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de v-el ou de 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: ``` 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.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de v-else avec v-show.

{% endraw %} -## Custom Directives simplified +## Directives pesonnalisées simplifiée -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ée pour appliquer des manipulation de DOM à bas niveau. Dans la plupard des cas, vous devriez préférez des composants comme abstraction principale de code réutilisable. -Some of the most notable differences include: +Certaine des différences les plus notables inclues : -- 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'arguments. Si vraiment vous devez 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 [cette exemple](#filtres-bidirectionnelles-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.

+

Mise en évidence

+

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 plupard 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 chaine de caractères litérale en tant que valeur. -For example, you can update: +Par exemple, vous pouvez mettre à jour : ``` js

``` -to just: +avec : ``` html

@@ -721,53 +721,53 @@ to just: {% raw %}
-

Upgrade Path

-

Run the migration helper on your codebase to find examples of the `.literal` modifier on a directive.

+

Mise en évidence

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de modificateur .literal sur les directives.

{% endraw %} ## Transitions -### `transition` Attribute replaced +### `transition` Attribute 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. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of the transition attribute.

{% endraw %} -### `Vue.transition` for Reusable Transitions replaced +### `Vue.transition` for Reusable Transitions remplacé With the new transition system, you can now just [use components for reusable transitions](transitions.html#Reusable-Transitions). {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of Vue.transition.

{% endraw %} -### Transition `stagger` Attribute removed +### Transition `stagger` Attribute 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). {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} ## Events -### `events` option removed +### `events` option retiré 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. -### `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: @@ -777,12 +777,12 @@ Vue.config.keyCodes.f1 = 112 ``` {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of the the old keyCode configuration syntax.

{% endraw %} -### `$dispatch` and `$broadcast` replaced +### `$dispatch` and `$broadcast` remplacé `$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). @@ -861,14 +861,14 @@ This pattern can serve as a replacement for `$dispatch` and `$broadcast` in simp {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of $dispatch and $broadcast.

{% endraw %} ## Filters -### Filters Outside Text Interpolations removed +### Filters Outside Text Interpolations 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. @@ -996,12 +996,12 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### Filter Argument Syntax changed +### Filter Argument Syntax changé Filters' syntax for arguments now better aligns with JavaScript function invocation. So instead of taking space-delimited arguments: @@ -1017,12 +1017,12 @@ We surround the arguments with parentheses and delimit the arguments with commas {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### Built-In Text Filters removed +### Built-In Text Filters retiré 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). @@ -1078,12 +1078,12 @@ In many cases though, you'll still run into strange behavior (e.g. `0.035.toFixe {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### Two-Way Filters replaced +### Filtres bidirectionnelles 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. @@ -1120,38 +1120,38 @@ You may notice that: {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} ## Slots -### Duplicate Slots removed +### Duplicate Slots retiré 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. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run your end-to-end test suite or app after upgrading and look for console warnings about duplicate slots v-model.

{% endraw %} -### `slot` Attribute Styling removed +### `slot` Attribute Styling 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). {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find CSS selectors targeting named slots (e.g. [slot="my-slot-name"]).

{% endraw %} ## Special Attributes -### `keep-alive` Attribute replaced +### `keep-alive` Attribute remplacé `keep-alive` is no longer a special attribute, but rather a wrapper component, similar to ``. For example: @@ -1184,14 +1184,14 @@ When used together with ``, make sure to nest it inside: {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find keep-alive attributes.

{% endraw %} ## Interpolation -### Interpolation within Attributes removed +### Interpolation within Attributes retiré Interpolation within attributes is no longer valid. For example: @@ -1221,36 +1221,36 @@ computed: { {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of interpolation used within attributes.

{% endraw %} -### HTML Interpolation removed +### HTML Interpolation retiré HTML interpolations (`{% raw %}{{{ foo }}}{% endraw %}`) have been removed in favor of the [`v-html` directive](../api/#v-html). {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find HTML interpolations.

{% endraw %} -### One-Time Bindings replaced +### One-Time Bindings remplacé One time bindings (`{% raw %}{{* foo }}{% endraw %}`) have been replaced by the new [`v-once` directive](../api/#v-once). {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find one-time bindings.

{% endraw %} ## Reactivity -### `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. @@ -1258,45 +1258,45 @@ If you were previously relying on `vm.$watch` to do something with the DOM after {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### `vm.$set` changed +### `vm.$set` changé `vm.$set` is now just an alias for [`Vue.set`](../api/#Vue-set). {% raw %}
-

Upgrade Path

+

Mise en évidence

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). {% raw %}
-

Upgrade Path

+

Mise en évidence

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. {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### `Array.prototype.$remove` removed +### `Array.prototype.$remove` retiré Use `Array.prototype.splice` instead. For example: @@ -1321,47 +1321,47 @@ methods: { {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### `Vue.set` and `Vue.delete` on Vue instances removed +### `Vue.set` and `Vue.delete` on Vue instances 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. {% raw %}
-

Upgrade Path

+

Mise en évidence

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.

{% endraw %} -### Replacing `vm.$data` removed +### Replacing `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). {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of overwriting vm.$data. If you miss any, console warnings will be emitted.

{% endraw %} -### `vm.$get` removed +### `vm.$get` retiré Just retrieve reactive data directly. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$get. If you miss any, you'll see console errors.

{% endraw %} ## DOM-Focused Instance Methods -### `vm.$appendTo` removed +### `vm.$appendTo` retiré Use the native DOM API: @@ -1371,12 +1371,12 @@ myElement.appendChild(vm.$el) {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$appendTo. If you miss any, you'll see console errors.

{% endraw %} -### `vm.$before` removed +### `vm.$before` retiré Use the native DOM API: @@ -1386,12 +1386,12 @@ myElement.parentNode.insertBefore(vm.$el, myElement) {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$before. If you miss any, you'll see console errors.

{% endraw %} -### `vm.$after` removed +### `vm.$after` retiré Use the native DOM API: @@ -1407,12 +1407,12 @@ myElement.parentNode.appendChild(vm.$el) {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$after. If you miss any, you'll see console errors.

{% endraw %} -### `vm.$remove` removed +### `vm.$remove` retiré Use the native DOM API: @@ -1422,49 +1422,49 @@ vm.$el.remove() {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$remove. If you miss any, you'll see console errors.

{% endraw %} ## Meta Instance Methods -### `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. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$eval. If you miss any, you'll see console errors.

{% 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. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$interpolate. If you miss any, you'll see console errors.

{% endraw %} -### `vm.$log` removed +### `vm.$log` retiré Use the [Vue Devtools](https://github.com/vuejs/vue-devtools) for the optimal debugging experience. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of vm.$log. If you miss any, you'll see console errors.

{% 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: @@ -1492,82 +1492,82 @@ new Vue({ {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of replace: false.

{% endraw %} ## Global Config -### `Vue.config.debug` removed +### `Vue.config.debug` retiré No longer necessary, since warnings come with stack traces by default now. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of Vue.config.debug.

{% endraw %} -### `Vue.config.async` removed +### `Vue.config.async` retiré Async is now required for rendering performance. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of Vue.config.async.

{% endraw %} -### `Vue.config.delimiters` replaced +### `Vue.config.delimiters` remplacé 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. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of Vue.config.delimiters.

{% endraw %} -### `Vue.config.unsafeDelimiters` removed +### `Vue.config.unsafeDelimiters` retiré HTML interpolation has been [removed in favor of `v-html`](#HTML-Interpolation-removed). {% raw %}
-

Upgrade Path

+

Mise en évidence

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`.

{% endraw %} ## Global API -### `Vue.extend` with `el` removed +### `Vue.extend` with `el` retiré The el option can no longer be used in `Vue.extend`. It's only valid as an instance creation option. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run your end-to-end test suite or app after upgrading and look for console warnings about the el option with Vue.extend.

{% endraw %} -### `Vue.elementDirective` removed +### `Vue.elementDirective` retiré Use components instead. {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of Vue.elementDirective.

{% endraw %} -### `Vue.partial` removed +### `Vue.partial` retiré 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). @@ -1577,7 +1577,7 @@ A benefit of functional components over partials is that they can be much more d {% raw %}
-

Upgrade Path

+

Mise en évidence

Run the migration helper on your codebase to find examples of Vue.partial.

{% endraw %} From ac3dbb22310837f1f4862e48faf4c8386987dd4f Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 25 Jul 2017 18:18:23 +0200 Subject: [PATCH 03/12] Event part translated. Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 56 +++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 4a502e2f9b..bb0e443943 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -728,48 +728,48 @@ avec : ## Transitions -### `transition` Attribute remplacé +### 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 élements `` et `` au lieu de l'attribut `transition`. Il est recommandé de lire le nouveau [guide des transitions](transitions.html) pour en apprendre plus. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of the transition attribute.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'attribut transition.

{% endraw %} -### `Vue.transition` for Reusable Transitions remplacé +### `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-reutilisables). {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of Vue.transition.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'attribut de Vue.transition.

{% endraw %} -### Transition `stagger` Attribute retiré +### 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 de é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 %}

Mise en évidence

-

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.

+

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 retiré +### 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é 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` remplacé -The new, more concise way to configure `keyCodes` is through `Vue.config.keyCodes`. For example: +La nouvelle, et plus concise, manière de configuré `keyCodes` à travers `Vue.config.keyCodes`. Par exemple : ``` js // enable v-on:keyup.f1 @@ -778,21 +778,21 @@ Vue.config.keyCodes.f1 = 112 {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of the the old keyCode configuration syntax.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vieilles configurations de syntaxe keyCode.

{% endraw %} -### `$dispatch` and `$broadcast` remplacé +### `$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` on été remplacés en faveur d'une communication plus explicite entre composants et des solutions de gestion d'état plus maintenable, 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. Ils ne s'adaptaient pas correctement et nous ne voulons pas qu'ils amènent plus de bien que de mal. `$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 !). Parceque les instances de Vue implémente une interface de é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 netoyer 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 netoyer 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,12 +857,12 @@ 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 %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of $dispatch and $broadcast.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de $dispatch et $broadcast.

{% endraw %} From d445a7468d5987b601380a21113827b106c6be9f Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 1 Aug 2017 17:07:56 +0200 Subject: [PATCH 04/12] Traduction de la partie filtre Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 106 +++++++++++++++++++------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index bb0e443943..1daccf3407 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -691,7 +691,7 @@ Les directives ont une portée de responsabilité grandement réduite : elles so Certaine des différences les plus notables inclues : - 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'arguments. Si vraiment vous devez 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 [cette exemple](#filtres-bidirectionnelles-replacés). +- Les options comme `acceptStatement`, `deep`, `priority`, etc. ont toutes été retirées. Pour remplacer les directives `twoWay`, consultez [cette exemple](#filtres-bidirectionnels-replacés). - Certains des hooks ont un comportement différent. D'autres hooks sont nouveaux. 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. @@ -866,17 +866,17 @@ Ce modèle peut servir de remplacement à `$dispatch` et `$broadcast` dans des s
{% endraw %} -## Filters +## Filtres -### Filters Outside Text Interpolations retiré +### 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é à 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'incomvéniant. 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 filtres 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,9 +904,9 @@ 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: @@ -914,7 +914,7 @@ Instead of:

{{ 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,7 +928,7 @@ computed: { } ``` -#### Replacing the `filterBy` Filter +#### Remplacer le filtre `filterBy` Instead of: @@ -936,7 +936,7 @@ Instead of:

{{ 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 souhaiter trouver tous les utilisateurs actif avec une concordance non sensible à la casse de leurs nom et 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 ordoner par multiples colonnes : ``` js _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) @@ -997,19 +997,19 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) {% raw %}

Mise en évidence

-

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.

+

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 changé +### 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 filtres est maintenant plus consistante avec l'invocation des fonctions JavaScript. Donc au lieu d'utiliser des délimitations avec espace pour les argument : ``` 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) }}

@@ -1018,41 +1018,41 @@ We surround the arguments with parentheses and delimit the arguments with commas {% raw %}

Mise en évidence

-

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.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vieille syntaxe de filtre. Si vous en oubliez, vous devriez également voir des erreurs dans la console.

{% endraw %} -### Built-In Text Filters retiré +### Filtres de texte intégré retiré -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 authorisé, tous les filtres on été retiré. À 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 joliement 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 ses problèmes très bien, 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,62 +1066,62 @@ 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émentation basique, 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 %}

Mise en évidence

-

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.

+

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 %} -### Filtres bidirectionnelles remplacés +### 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éressant 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 mises à jour des états. À la place, créer un champ dans un composant est recommandé et permet de mieux apré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 étrange. 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 stoqué 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 tous 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 dévise peut fonctionner de manière asynchrone. Cela signifie que si vous avez beaucoup d'applications qui fonctionne avec des devises, vous pouvez facilement refactoriser les logiques dans un microservice. {% raw %}

Mise en évidence

-

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.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres utilisant des dircetive comme v-model. Si vous en oubliez, vous devriez également voir des erreurs dans la console.

{% endraw %} From 54b5ca0fda692c8791cba07804f735afa6c3c2ac Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 4 Aug 2017 15:27:30 +0200 Subject: [PATCH 05/12] Traduction de slots Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 1daccf3407..08d9cd8e72 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1127,33 +1127,33 @@ Vous pouvez remarquer que : ## Slots -### Duplicate Slots retiré +### 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 arble 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 %}

Mise en évidence

-

Run your end-to-end test suite or app after upgrading and look for console warnings about duplicate slots v-model.

+

Lancez votre suite de test ou votre application après mise à jour et vérifiez les avertissements de console à propos de slots v-model dupliqué.

{% endraw %} -### `slot` Attribute Styling retiré +### 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érré programmatiquement en utilisant des [fonctions de rendu](render-function.html). {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find CSS selectors targeting named slots (e.g. [slot="my-slot-name"]).

+

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 remplacé +### 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 @@ -1185,7 +1185,7 @@ When used together with ``, make sure to nest it inside: {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find keep-alive attributes.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver les attributs keep-alive.

{% endraw %} From bc119687bb94457ecd5a492beb2ca201db4c0efa Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 4 Aug 2017 15:58:09 +0200 Subject: [PATCH 06/12] =?UTF-8?q?Update=20with=20R=C3=A9activit=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 64 +++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 08d9cd8e72..650faa152e 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1191,21 +1191,21 @@ Quand vous les utilisez avec ``, assurez-vous de les imbriquer ainsi ## Interpolation -### Interpolation within Attributes retiré +### 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 utiliser dans une expression avec `v-bind` : ``` html ``` -Or a data/computed property: +Ou une propriété de `data` ou de `computed` : ``` html @@ -1222,83 +1222,83 @@ computed: { {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of interpolation used within attributes.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'interpolation utilisez dans les attributs.

{% endraw %} -### HTML Interpolation retiré +### 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 %}

Mise en évidence

-

Run the migration helper on your codebase to find HTML interpolations.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des interpolations.

{% endraw %} -### One-Time Bindings remplacé +### 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 %}

Mise en évidence

-

Run the migration helper on your codebase to find one-time bindings.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des liaisons un seul rendu.

{% endraw %} -## Reactivity +## Reactivité ### `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éent via `vm.$watch` sont maintenant levé 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 %}

Mise en évidence

-

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.

+

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter du fait que les observateurs sont lié a un ancien comportement.

{% endraw %} ### `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 %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of the obsolete usage.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'utilisations obsolètes.

{% endraw %} ### `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 %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of the obsolete usage.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'utilisations obsolètes.

{% endraw %} ### `Array.prototype.$set` retiré -Use `Vue.set` instead. +Utilisez `Vue.set` à la place. {% raw %}

Mise en évidence

-

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.

+

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` 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: { @@ -1322,40 +1322,40 @@ methods: { {% raw %}

Mise en évidence

-

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.

+

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 retiré +### `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éactive dans l'option `data`. Si vous voulez supprimer des propriétés d'une instance de Vue ou de de ses `$data`, mettez les à `null`. {% raw %}

Mise en évidence

-

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.

+

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` retiré +### 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 perment a l'état du composant d'être plus prévisible (spécialement avec les systèmes de vérification de type). {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of overwriting vm.$data. If you miss any, console warnings will be emitted.

+

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` retiré -Just retrieve reactive data directly. +Retrouvez simplement la donnée réactive. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$get. If you miss any, you'll see console errors.

+

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 %} From c59787965637f91026f24090cee37937a21dd44d Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 10 Aug 2017 13:01:25 +0200 Subject: [PATCH 07/12] =?UTF-8?q?Traductions=20des=20m=C3=A9thodes=20d'ins?= =?UTF-8?q?tance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 650faa152e..4948115fde 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1359,11 +1359,11 @@ Retrouvez simplement la donnée réactive.
{% endraw %} -## DOM-Focused Instance Methods +## Méthodes d'intance centrés sur le DOM ### `vm.$appendTo` retiré -Use the native DOM API: +Utilisez l'API native du DOM : ``` js myElement.appendChild(vm.$el) @@ -1372,13 +1372,13 @@ myElement.appendChild(vm.$el) {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$appendTo. If you miss any, you'll see console errors.

+

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` retiré -Use the native DOM API: +Utilisez l'API native du DOM : ``` js myElement.parentNode.insertBefore(vm.$el, myElement) @@ -1387,13 +1387,13 @@ myElement.parentNode.insertBefore(vm.$el, myElement) {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$before. If you miss any, you'll see console errors.

+

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` retiré -Use the native DOM API: +Utilisez l'API native du DOM : ``` js myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling) @@ -1408,13 +1408,13 @@ myElement.parentNode.appendChild(vm.$el) {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$after. If you miss any, you'll see console errors.

+

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` retiré -Use the native DOM API: +Utilisez l'API native du DOM : ``` js vm.$el.remove() @@ -1423,42 +1423,42 @@ vm.$el.remove() {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$remove. If you miss any, you'll see console errors.

+

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` 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 utilie. 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 partager vos idées. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$eval. If you miss any, you'll see console errors.

+

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` 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 utilie. 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 partager vos idées. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$interpolate. If you miss any, you'll see console errors.

+

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` 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 debogue optimale. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of vm.$log. If you miss any, you'll see console errors.

+

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 %} From b021007f751eaf778ad0229413c7bba2505346de Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 14 Aug 2017 10:03:58 +0200 Subject: [PATCH 08/12] New lines Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 4948115fde..caaf3743c9 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1466,7 +1466,7 @@ Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une ex ### `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 remplace maintenant les éléments sur lesquels il 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({ @@ -1493,7 +1493,7 @@ new Vue({ {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of replace: false.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de replace: false.replace: false

{% endraw %} From 20157850f7ff39ab93a319fea35c5ad531d31716 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 14 Aug 2017 11:58:51 +0200 Subject: [PATCH 09/12] =?UTF-8?q?Document=20compl=C3=A8tement=20traduit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 144 +++++++++++++++++++------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index caaf3743c9..a74aaa1f32 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -18,7 +18,7 @@ order: 26 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 trouverrez en faisant un tour de l'application. -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 partie seront vite parcourue puisque vous êtes familier aux concepts de base. +4. Maintenant, votre application devrait être pleinement migré. 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 partie seront vite parcourue puisque vous êtes familier aux concepts de base. > Combien de temps va prendre la migration d'une application Vue 1.x vers une application Vue 2.0 ? @@ -72,7 +72,7 @@ Utilisez le hook `created` à la place. {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

{% endraw %} @@ -83,7 +83,7 @@ Utilisez le hook `mounted` à la place. {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

{% endraw %} @@ -110,7 +110,7 @@ mounted: function () { {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

{% endraw %} @@ -137,7 +137,7 @@ destroyed: function () { {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

{% endraw %} @@ -148,7 +148,7 @@ Utilisez le nouveau hook `beforeCreate` à la place. Il fait la même chose. Il {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

{% endraw %} @@ -167,7 +167,7 @@ mounted: function () { {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurences de ce hook.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

{% endraw %} @@ -202,13 +202,13 @@ Les variables implicites `$index` et `$key` ont été enlevée à la faveur de l {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de ces variables retirées. Si vous en oubliez certaine, vous devriez voir des erreurs console comme Uncaught ReferenceError: $index is not defined.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de ces variables retirées. Si vous en oubliez certaine, vous devriez voir des erreurs console comme Uncaught ReferenceError: $index is not defined.

{% endraw %} ### `track-by` remplacé -`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 plupard des cas, vous souhaiterez une liaison dynamique demandant une expression à la place d'une clé. Par exemple, à la place de : +`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
@@ -223,13 +223,13 @@ vous aurez maintenant : {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de track-by.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de track-by.

{% endraw %} ### `v-for` et nombres changé -Précedemment, `v-for="number in 10"` devait avoir `number` qui commençait à `0` et qui finissait à `9`. Maintenant il commence à `1` et finit à `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 %}
@@ -280,13 +280,13 @@ Cela a plusieurs avantages : {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de l'option coerce.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de l'option coerce.

{% endraw %} ### Option de prop `twoWay` retirée -Les props sont maintenant toujours unidirectionnelle et descendante. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement emettre un évènement au lieu de créer une liaison implicite. Pour plus d'informations, consultez : +Les props sont maintenant toujours unidirectionnelle et descendante. 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 : - [É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) @@ -295,13 +295,13 @@ Les props sont maintenant toujours unidirectionnelle et descendante. Pour produi {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de l'option twoWay.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de l'option twoWay.

{% endraw %} ### Modificateur `.once` et `.sync` de `v-bind` retiré -Les props sont maintenant toujours unidirectionnelle et descendante. Pour produire une modification dans la portée parente, un composant a besoin d'explicitement emettre un évènement au lieu de créer une liaison implicite. Pour plus d'informations, consultez : +Les props sont maintenant toujours unidirectionnelle et descendante. 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 : - [É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) @@ -310,7 +310,7 @@ Les props sont maintenant toujours unidirectionnelle et descendante. Pour produi {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences des modificateurs .once et .sync.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des modificateurs .once et .sync.

{% endraw %} @@ -375,7 +375,7 @@ methods: { {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de l'option cache: false.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de l'option cache: false.

{% endraw %} @@ -515,16 +515,16 @@ new Vue({ }) ``` -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 intérogez une API pour des suggestions de recherche, attendre que l'utilisateur se soit arrêter de taper pour commencer à lui offrir des sugestions 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 utilasant la fonction `throttle` ne prend que quelques secondes. +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êter 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 %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences du paramètre d'attribut debounce.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences du paramètre d'attribut debounce.

{% endraw %} -### Paramètre d'attribut `lazy` ou `number` pour `v-model` remplacé +### Paramètre d'attribut `lazy` ou `number` pour `v-model` remplacés Les paramètres d'attribut `lazy` et `number` sont maintenant des modifcateurs, pour rendre cela plus clair. Cela signifie que au lieu de : @@ -543,13 +543,13 @@ Nous utiliserons : {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences des paramètres d'attributs lazy ou number.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des paramètres d'attributs lazy ou number.

{% endraw %} ### Attribut `value` avec `v-model` retiré -`v-model` ne se préoccupe plus de la valeur initiale de l'attribut `value`. Pour plus de prédictabilité, il utilisera toujours la donnée utilisée dans l'instnace de Vue comme source de vérité. +`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é. Cela signifie que cet élément : @@ -621,7 +621,7 @@ Ceci ne fonctionne plus :

hello

``` -Si vous voulez vraiment ré-écrire un autre `!important`, vous devrez utiliser la syntaxe de chaîne de caratères : +Si vous voulez vraiment ré-écrire un autre `!important`, vous devrez utiliser la syntaxe de chaîne de caractères : ``` html

hello

@@ -630,13 +630,13 @@ Si vous voulez vraiment ré-écrire un autre `!important`, vous devrez utiliser {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences des liaisons de style avec !important.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des liaisons de style avec !important.

{% endraw %} ### `v-el` et `v-ref` remplacés -Pour plus de simplicité, `v-el` et `v-ref` ont été fusionné en l'attribut `ref`, accessible depuis l'instnace 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. +Pour plus de simplicité, `v-el` et `v-ref` ont été fusionné en 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. Puisque `v-ref` n'est plus une directive, mais un attribut spéciale, il peut également être défini dynamiquement. Cela spécialement utile avec `v-for`. Par exemple : @@ -650,14 +650,14 @@ Précédemment, `v-el` / `v-ref` utilisé avec un `v-for` produisait un tableau

``` -À la diférence de la 1.x, les `$refs` ne sont pas réactive, car elles sont enregistrées / mises à jour durant le processus de rendu lui-même. Les rendres ré-active demanderait de dupliquer le rendu à chaque changement. +À la différence de la 1.x, les `$refs` ne sont pas réactive, car elles sont enregistrées / mises à jour durant le processus de rendu lui-même. Les rendre ré-active demanderait de dupliquer le rendu à chaque changement. 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 %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de v-el ou de v-ref.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de v-el ou de v-ref.

{% endraw %} @@ -670,7 +670,7 @@ D'un autre côté, `$refs` est conçu avant tout pour un accès programmatique e

Pas foo, mais bar

``` -You can use: +Vous pouvez utilisez : ``` html

Foo

@@ -680,11 +680,11 @@ You can use: {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurences de v-else avec v-show.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de v-else avec v-show.

{% endraw %} -## Directives pesonnalisées simplifiée +## Directives personnalisées simplifiée Les directives ont une portée de responsabilité grandement réduite : elles sont maintenant uniquement utilisée pour appliquer des manipulation de DOM à bas niveau. Dans la plupard des cas, vous devriez préférez des composants comme abstraction principale de code réutilisable. @@ -699,13 +699,13 @@ Heureusement, puisque les nouvelles directives sont plus simples, vous pouvez le {% raw %}

Mise en évidence

-

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 plupard des cas vous allez devoir les refactoriser dans un composant.

+

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 %} ### Modificateur de directive `.literal` retiré -Le modificateur `.literal` a été supprimé, la même chose peut être facilement réalisée en fournissant une chaine de caractères litérale en tant que valeur. +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. Par exemple, vous pouvez mettre à jour : @@ -730,7 +730,7 @@ avec : ### Attribut `transition` remplacé -Le système de transition de Vue a changé drastiquement et maintenant il faut utiliser les élements `` et `` au lieu de l'attribut `transition`. Il est recommandé de lire le nouveau [guide des transitions](transitions.html) pour en apprendre plus. +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 %}
@@ -741,7 +741,7 @@ Le système de transition de Vue a changé drastiquement et maintenant il faut u ### `Vue.transition` pour les transitions réutilisables remplacé -Avec le nouveau système de transition, vous pouvez maintenant [utiliser les composants pour des transitions réutilisables](transitions.html#Transitions-reutilisables). +Avec le nouveau système de transition, vous pouvez maintenant [utiliser les composants pour des transitions réutilisables](transitions.html#Transitions-réutilisables). {% raw %}
@@ -790,7 +790,7 @@ Le problème est que le flux d'évènement dépend de la structure de l'arbre de 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. -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 !). Parceque les instances de Vue implémente une interface de émission d'évènement, vous pouvez en fait utiliser une instance de Vue vide pour réaliser cela. +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émente une interface de émission d'évènement, vous pouvez en fait utiliser une instance de Vue vide pour réaliser cela. Par exemple, imaginons que nous avons une application de liste de tâches comme celle là : @@ -870,7 +870,7 @@ Ce modèle peut servir de remplacement à `$dispatch` et `$broadcast` dans des s ### Filtres en dehors des interpolations de texte retiré -Les filtres peuvent maintenant seulement être utilisé à 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'incomvéniant. 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. +Les filtres peuvent maintenant seulement être utilisé à 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. 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 filtres de Vue : @@ -908,7 +908,7 @@ Pour en savoir plus sur les avantages de cette stratégie, regardez [l'exemple i #### Remplacer le filtre `limitBy` -Instead of: +À la place de : ``` html

{{ item }}

@@ -1024,13 +1024,13 @@ Nous entourons les arguments avec des parenthèses et les délimitons avec des v ### Filtres de texte intégré retiré -Bien que les filtres dans les interpolations de texte soit toujours authorisé, tous les filtres on été retiré. À 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). +Bien que les filtres dans les interpolations de texte soit toujours autorisé, tous les filtres on été retiré. À 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). 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. #### Remplacer le filtre `json` -Vous n'avez rien besoin de faire de ce point de vue, car Vue va joliement 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. +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. #### Remplacer le filtre `capitalize` @@ -1085,13 +1085,13 @@ Dans beaucoup de cas cependant, vous allez toujours tomber sur des comportements ### Filtres bidirectionnels remplacés -Beaucoup d'utilisateurs adorent utiliser des filtres bidirectionnels avec `v-model` pour créer des champs intéressant 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 mises à jour des états. À la place, créer un champ dans un composant est recommandé et permet de mieux apréhender son utilisation et d'y ajouter tout ce qu'il faut pour de la création de champs personnalisés. +Beaucoup d'utilisateurs adorent utiliser des filtres bidirectionnels avec `v-model` pour créer des champs intéressant 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 mises à jour des états. À la place, créer un champ dans un composant est recommandé 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. Par exemple, nous allons migrer un filtre de devise bidirectionnel : -Il fonctionne plutôt bien, mais la rétention de mise à jour d'état peut causer des comportements étrange. 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 stoqué dans nos données. La version de la réalité que l'utilisateur voit est hors de synchro ! +Il fonctionne plutôt bien, mais la rétention de mise à jour d'état peut causer des comportements étrange. 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 ! Pour commencer a utiliser une solution plus robuste en utilisant Vue 2.0, commençons par entourer ce filtre dans un nouveau composant `` : @@ -1116,12 +1116,12 @@ Vous pouvez remarquer que : - 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 dévise peut fonctionner de manière asynchrone. Cela signifie que si vous avez beaucoup d'applications qui fonctionne avec des devises, vous pouvez facilement refactoriser les logiques dans un microservice. +- 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 fonctionne avec des devises, vous pouvez facilement refactoriser les logiques dans un microservice. {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres utilisant des dircetive comme v-model. Si vous en oubliez, vous devriez également voir des erreurs dans la console.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres utilisant des directive comme v-model. Si vous en oubliez, vous devriez également voir des erreurs dans la console.

{% endraw %} @@ -1129,7 +1129,7 @@ Vous pouvez remarquer que : ### Slots dupliqués retirés -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 arble de rendu. Si vous devez faire le rendu d'un même contenu, à des endroits différents, passez le contenu en tant que 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 %}
@@ -1259,7 +1259,7 @@ Si vous aviez précédemment relié `vm.$watch` à quelque chose du DOM après l {% raw %}

Mise en évidence

-

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter du fait que les observateurs sont lié a un ancien comportement.

+

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter du fait que les observateurs sont liés a un ancien comportement.

{% endraw %} @@ -1453,7 +1453,7 @@ Pas réellement utilie. Si vous avez des difficultés liés à cette fonctionnal ### `vm.$log` retiré -Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une expérience de debogue optimale. +Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une expérience de débogue optimale. {% raw %}
@@ -1493,91 +1493,91 @@ new Vue({ {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de replace: false.replace: false

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de replace: false.

{% endraw %} -## Global Config +## Configuration globale -### `Vue.config.debug` retiré +### `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 trouve dans la pile des traces par défaut maintenant. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of Vue.config.debug.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.debug.

{% endraw %} -### `Vue.config.async` retiré +### `Vue.config.async` retirée -Async is now required for rendering performance. +Async est maintenant requis pour les performances de rendu. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of Vue.config.async.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.async.

{% endraw %} -### `Vue.config.delimiters` remplacé +### `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 %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of Vue.config.delimiters.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.delimiters.

{% endraw %} -### `Vue.config.unsafeDelimiters` retiré +### `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 %}

Mise en évidence

-

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`.

+

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` retiré +### `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 %}

Mise en évidence

-

Run your end-to-end test suite or app after upgrading and look for console warnings about the el option with Vue.extend.

+

Lancez votre suite de test 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` retiré +### `Vue.elementDirective` retirée -Use components instead. +Utilisez des composants à la place. {% raw %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of Vue.elementDirective.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.elementDirective.

{% endraw %} -### `Vue.partial` retiré +### `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ée 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). Elles 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 partials. 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 dynamique, 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 %}

Mise en évidence

-

Run the migration helper on your codebase to find examples of Vue.partial.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.partial.

{% endraw %} From 402a911eade4a4b0bd3d2ce8ebdb41a755169f47 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 14 Aug 2017 16:17:53 +0200 Subject: [PATCH 10/12] Corrections Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 132 +++++++++++++++++++------------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index a74aaa1f32..5d075167f9 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -16,9 +16,9 @@ order: 26 2. Après cela, naviguez à travers la table de contenu de cette page dans la barre de navigation. Si vous voyez un sujet qui vous concerne, mais que l'outil d'aide à la migration n'a pas repéré, occupez-vous en. -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 trouverrez en faisant un tour de l'application. +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. Maintenant, votre application devrait être pleinement migré. 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 partie seront vite parcourue puisque vous êtes familier aux concepts de base. +4. Maintenant, votre application devrait être pleinement migré. 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. > Combien de temps va prendre la migration d'une application Vue 1.x vers une application Vue 2.0 ? @@ -28,13 +28,13 @@ Cela dépend de plusieurs critères comme : - 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), -- du nombre de fonctionnalités obsolètes que vous utilisez. La plupard d'entre elles peuvent être corrigé 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 de refactoriser (un peu tard) des parties. +- du nombre de fonctionnalités obsolètes que vous utilisez. La plupard 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 de refactoriser (un peu tard) des parties. > Si je mets à jour vers Vue 2, dois-je aussi mettre à jour Vuex et Vue-Router ? Seul Vue-Router 2 est compatible avec Vue 2, donc oui, vous allez devoir suivre le [guide de migration pour Vue-Router](migration-vue-router.html) également. 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. -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 des codes pré-conçus (« boilerplate ») moins verbeux. +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 @@ -47,7 +47,7 @@ Tous les composants doivent avoir seulement un seul élément racine. Les instan

bar

``` -Il est recommandé de simplement d'entourer le contenu complet dans un nouvel élément, comme cela : +Il est recommandé d'entourer simplement le contenu complet dans un nouvel élément, comme cela : ``` html
@@ -59,7 +59,7 @@ Il est recommandé de simplement d'entourer le contenu complet dans un nouvel é {% raw %}

Mise en évidence

-

Lancez votre suite de test ou votre application après mise à jour et vérifiez les avertissements de console à propos d'éléments multiple à la racine dans un template.

+

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 %} @@ -89,7 +89,7 @@ Utilisez le hook `mounted` à la place. ### `attached` retiré -Utiliser une vérification du DOM dans les autres hooks. Par exemple, remplacez : +Utilisez une vérification du DOM dans les autres hooks. Par exemple, remplacez : ``` js attached: function () { @@ -116,7 +116,7 @@ mounted: function () { ### `detached` retiré -Utiliser une vérification du DOM dans les autres hooks. Par exemple, remplacez : +Utilisez une vérification du DOM dans les autres hooks. Par exemple, remplacez : ``` js detached: function () { @@ -154,7 +154,7 @@ Utilisez le nouveau hook `beforeCreate` à la place. Il fait la même chose. Il ### `ready` remplacé -Utilisez le hook `mounted` à la place. Il est a noté qu'avec `mounted`, il n'y a aucune garanti de présence dans le document (DOM réel). Pour s'en assurer, il faut inclure `Vue.nextTick` / `vm.$nextTick`. Par exemple : +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 () { @@ -197,7 +197,7 @@ Quand vous utilisez une `key`, l'ordre des arguments pour les objets était `(ke ### `$index` et `$key` retirés -Les variables implicites `$index` et `$key` ont été enlevée à 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évisible dans les cas de boucles imbriquées. +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 %}
@@ -286,7 +286,7 @@ Cela a plusieurs avantages : ### Option de prop `twoWay` retirée -Les props sont maintenant toujours unidirectionnelle et descendante. 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 : +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 : - [É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) @@ -301,7 +301,7 @@ Les props sont maintenant toujours unidirectionnelle et descendante. Pour produi ### Modificateur `.once` et `.sync` de `v-bind` retiré -Les props sont maintenant toujours unidirectionnelle et descendante. 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 : +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 : - [É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) @@ -326,7 +326,7 @@ Dans la majorité des cas, muter une prop peut être remplacé par une de ces so {% raw %}

Mise en évidence

-

Lancez votre suite de test ou votre application après mise à jour et vérifiez les avertissements de console à propos des mutations du prop.

+

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 %} @@ -337,7 +337,7 @@ Sur une instance racine de Vue (c.-à-d. crée avec `new Vue({ ... })`), vous de {% raw %}

Mise en évidence

-

Lancez votre suite de test 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.

+

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 %} @@ -345,7 +345,7 @@ Sur une instance racine de Vue (c.-à-d. crée avec `new Vue({ ... })`), vous de ### `cache: false` dépréciée -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 non avec invalidation de cache par des méthodes, cela produira le même résultat. +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. Pan exemple : @@ -383,7 +383,7 @@ methods: { ### Évaluation à vrai ou faux avec `v-bind` changée -Quand elles sont utilisées dans `v-bind`, seule 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"`. +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"`. 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"`. @@ -392,7 +392,7 @@ Pour les attributs énumérés, en plus des valeurs précédentes évaluées à {% raw %}

Mise en évidence

-

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectée par ce changement.

+

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 %} @@ -407,7 +407,7 @@ Quand vous utilisez un composant, `v-on` n'écoutera que les évènements `$emit {% raw %}

Mise en évidence

-

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectée par ce changement.

+

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 %} @@ -515,7 +515,7 @@ new Vue({ }) ``` -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êter 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. +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 %}
@@ -578,7 +578,7 @@ vous devrez vous assurer que la valeur initiale pour `text` est `"hello world"`. {% raw %}

Mise en évidence

-

Lancez votre suite de test 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.

+

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 %} @@ -609,7 +609,7 @@ Comme vous pouvez le voir, la liaison bidirectionnelle de `v-model` n'a plus de {% raw %}

Mise en évidence

-

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter si des parties de votre application sont affectée par ce changement.

+

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 %} @@ -636,9 +636,9 @@ Si vous voulez vraiment ré-écrire un autre `!important`, vous devrez utiliser ### `v-el` et `v-ref` remplacés -Pour plus de simplicité, `v-el` et `v-ref` ont été fusionné en 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. +Pour plus de simplicité, `v-el` et `v-ref` ont été fusionnés en 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. -Puisque `v-ref` n'est plus une directive, mais un attribut spéciale, il peut également être défini dynamiquement. Cela spécialement utile avec `v-for`. Par exemple : +Puisque `v-ref` n'est plus une directive, mais un attribut spécial, il peut également être défini dynamiquement. Cela spécialement utile avec `v-for`. Par exemple : ``` html

@@ -650,7 +650,7 @@ Précédemment, `v-el` / `v-ref` utilisé avec un `v-for` produisait un tableau

``` -À la différence de la 1.x, les `$refs` ne sont pas réactive, car elles sont enregistrées / mises à jour durant le processus de rendu lui-même. Les rendre ré-active demanderait de dupliquer le rendu à chaque changement. +À 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é-active demanderait de dupliquer le rendu à chaque changement. 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. @@ -684,14 +684,14 @@ Vous pouvez utilisez :
{% endraw %} -## Directives personnalisées simplifiée +## Directives personnalisées simplifiées -Les directives ont une portée de responsabilité grandement réduite : elles sont maintenant uniquement utilisée pour appliquer des manipulation de DOM à bas niveau. Dans la plupard des cas, vous devriez préférez des composants comme abstraction principale de code réutilisable. +Les directives ont une portée de responsabilité grandement réduite : elles sont maintenant uniquement utilisées pour appliquer des manipulation de DOM à bas niveau. Dans la plupart des cas, vous devriez préférez des composants comme abstraction principale de codes réutilisables. -Certaine des différences les plus notables inclues : +Certaines des différences les plus notables inclues : -- 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'arguments. Si vraiment vous devez 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 [cette exemple](#filtres-bidirectionnels-replacés). +- 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. 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. @@ -722,7 +722,7 @@ avec : {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de modificateur .literal sur les directives.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de modificateurs .literal sur les directives.

{% endraw %} @@ -752,7 +752,7 @@ Avec le nouveau système de transition, vous pouvez maintenant [utiliser les com ### Attribut de transition `stagger` retiré -Si vous avez besoin de é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). +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 %}
@@ -765,11 +765,11 @@ Si vous avez besoin de écheloner les transitions, vous pouvez contrôler le tim ### Option `events` retirée -L'option `events` a été retirée. Les gestionnaires d'évènements doivent maintenant être abonné dans le hook `created` à la place. Consultez [le guide `$dispatch` et `$broadcast`](#dispatch-et-broadcast-remplaces) pour plus de détails. +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` remplacé -La nouvelle, et plus concise, manière de configuré `keyCodes` à travers `Vue.config.keyCodes`. Par exemple : +La nouvelle, et plus concise, manière de configurer `keyCodes` à travers `Vue.config.keyCodes`. Par exemple : ``` js // enable v-on:keyup.f1 @@ -784,13 +784,13 @@ Vue.config.keyCodes.f1 = 112 ### `$dispatch` et `$broadcast` remplacés -`$dispatch` et `$broadcast` on été remplacés en faveur d'une communication plus explicite entre composants et des solutions de gestion d'état plus maintenable, comme [Vuex](https://github.com/vuejs/vuex). +`$dispatch` et `$broadcast` on é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). 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. Ils ne s'adaptaient pas correctement et nous ne voulons pas qu'ils amènent plus de bien que de mal. `$dispatch` et `$broadcast` ne résolvaient pas non plus la communication entre les composants voisins. -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. +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. -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émente une interface de émission d'évènement, vous pouvez en fait utiliser une instance de Vue vide pour réaliser cela. +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émentes une interface de émission d'évènement, vous pouvez en fait utiliser une instance de Vue vide pour réaliser cela. Par exemple, imaginons que nous avons une application de liste de tâches comme celle là : @@ -870,9 +870,9 @@ Ce modèle peut servir de remplacement à `$dispatch` et `$broadcast` dans des s ### Filtres en dehors des interpolations de texte retiré -Les filtres peuvent maintenant seulement être utilisé à 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. +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. -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 filtres de Vue : +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 : #### Remplacer le filtre `debounce` @@ -930,7 +930,7 @@ computed: { #### Remplacer le filtre `filterBy` -Instead of: +Au lieu de : ``` html

{{ user.name }}

@@ -953,7 +953,7 @@ computed: { } ``` -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 souhaiter trouver tous les utilisateurs actif avec une concordance non sensible à la casse de leurs nom et 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 leurs nom et email : ``` js var self = this @@ -1003,7 +1003,7 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) ### Syntaxe d'argument de filtre changée -La syntaxe pour les arguments de filtres est maintenant plus consistante avec l'invocation des fonctions JavaScript. Donc au lieu d'utiliser des délimitations avec espace pour les argument : +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 }}

@@ -1018,13 +1018,13 @@ Nous entourons les arguments avec des parenthèses et les délimitons avec des v {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de vieille syntaxe de filtre. Si vous en oubliez, vous devriez également voir des erreurs dans la console.

+

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 %} -### Filtres de texte intégré retiré +### Filtres de texte intégré retirés -Bien que les filtres dans les interpolations de texte soit toujours autorisé, tous les filtres on été retiré. À 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). +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). 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. @@ -1052,7 +1052,7 @@ text.toLowerCase() #### Remplacer le filtre `pluralize` -Le package [pluralize](https://www.npmjs.com/package/pluralize) sur npm adresse ses problèmes très bien, 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 : +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) { @@ -1068,7 +1068,7 @@ function pluralizeKnife (count) { #### Remplacer le filtre `currency` -Pour toutes les implémentation basique, vous pouvez juste faire quelque chose comme ceci : +Pour toutes les implémentations basiques, vous pouvez juste faire quelque chose comme ceci : ``` js '$' + price.toFixed(2) @@ -1085,19 +1085,19 @@ Dans beaucoup de cas cependant, vous allez toujours tomber sur des comportements ### Filtres bidirectionnels remplacés -Beaucoup d'utilisateurs adorent utiliser des filtres bidirectionnels avec `v-model` pour créer des champs intéressant 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 mises à jour des états. À la place, créer un champ dans un composant est recommandé 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. +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 mises à jour des états. À la place, créer un champ dans un composant est recommandé 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. Par exemple, nous allons migrer un filtre de devise bidirectionnel : -Il fonctionne plutôt bien, mais la rétention de mise à jour d'état peut causer des comportements étrange. 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 ! +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 ! Pour commencer a utiliser une solution plus robuste en utilisant Vue 2.0, commençons par entourer ce filtre dans un nouveau composant `` : -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 tous mettre dans un [objet `currencyValidator`](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e) externe : +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 : @@ -1116,12 +1116,12 @@ Vous pouvez remarquer que : - 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 fonctionne avec des devises, vous pouvez facilement refactoriser les logiques dans un microservice. +- 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 %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de filtres utilisant des directive comme v-model. Si vous en oubliez, vous devriez également voir des erreurs dans la console.

+

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 %} @@ -1134,7 +1134,7 @@ Il n'est plus possible d'avoir deux `` avec le même nom dans le même tem {% raw %}

Mise en évidence

-

Lancez votre suite de test ou votre application après mise à jour et vérifiez les avertissements de console à propos de slots v-model dupliqué.

+

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 %} @@ -1199,7 +1199,7 @@ L'interpolation dans les attributs ne fonctionne plus. Par exemple : ``` -Doit maintenant être mis à jour pour être utiliser dans une expression avec `v-bind` : +Doit maintenant être mis à jour pour être utilisé dans une expression avec `v-bind` : ``` html @@ -1222,7 +1222,7 @@ computed: { {% raw %}

Mise en évidence

-

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'interpolation utilisez dans les attributs.

+

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'interpolation utilisée dans les attributs.

{% endraw %} @@ -1252,14 +1252,14 @@ Les liaisons à un seul rendu (`{% raw %}{{* foo }}{% endraw %}`) ont été remp ### `vm.$watch` changé -Les observateurs créent via `vm.$watch` sont maintenant levé 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. +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. 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 %}

Mise en évidence

-

Lancez votre suite de test si vous en avez. Les tests en échec devraient vous alerter du fait que les observateurs sont liés a un ancien comportement.

+

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 %} @@ -1328,7 +1328,7 @@ methods: { ### `Vue.set` et `Vue.delete` sur les instances de Vue retiré -`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éactive dans l'option `data`. Si vous voulez supprimer des propriétés d'une instance de Vue ou de de ses `$data`, mettez les à `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 %}
@@ -1339,7 +1339,7 @@ methods: { ### Remplacement de `vm.$data` retiré -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 perment a l'état du composant d'être plus prévisible (spécialement avec les systèmes de vérification de type). +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 %}
@@ -1399,7 +1399,7 @@ Utilisez l'API native du DOM : 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) @@ -1431,7 +1431,7 @@ vm.$el.remove() ### `vm.$eval` retiré -Pas réellement utilie. 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 partager vos idées. +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 %}
@@ -1442,7 +1442,7 @@ Pas réellement utilie. Si vous avez des difficultés liés à cette fonctionnal ### `vm.$interpolate` retiré -Pas réellement utilie. 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 partager vos idées. +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 %}
@@ -1466,7 +1466,7 @@ Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une ex ### `replace: false` retiré -Les composants remplace maintenant les éléments sur lesquels il 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 : +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({ @@ -1501,7 +1501,7 @@ new Vue({ ### `Vue.config.debug` retirée -N'est plus nécessaire car les avertissements se trouve dans la pile des traces par défaut maintenant. +N'est plus nécessaire car les avertissements se trouvent dans la pile des traces par défaut maintenant. {% raw %}
@@ -1552,7 +1552,7 @@ L'option `el` ne peut plus être utilisée avec `Vue.extend`. Elle est seulement {% raw %}

Mise en évidence

-

Lancez votre suite de test ou votre application après mise à jour et vérifiez les avertissements de console à propos de l'option el avec Vue.extend.

+

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 %} @@ -1569,9 +1569,9 @@ Utilisez des composants à la place. ### `Vue.partial` retirée -Les partiels ont été retirée 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). +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). -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). Elles 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 partials. Cela rendra le rendu extrêmement rapide. +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). Elles 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. Le bénéfice des composants fonctionnels face aux partiels est qu'ils peuvent être bien plus dynamique, 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. From 9c789f304073ed3640836e35236ba391c98f1357 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 21 Aug 2017 15:42:03 +0200 Subject: [PATCH 11/12] Rajout des changements migration.md de Forresst Signed-off-by: Bruno Lesieur --- src/v2/guide/list.md | 4 +- src/v2/guide/migration.md | 194 +++++++++++++++++++------------------- 2 files changed, 99 insertions(+), 99 deletions(-) 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 5d075167f9..216fe91e6a 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -14,11 +14,11 @@ order: 26 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. Après cela, naviguez à travers la table de contenu de cette page dans la barre de navigation. Si vous voyez un sujet qui vous concerne, mais que l'outil d'aide à la migration n'a pas repéré, occupez-vous en. +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. 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. Maintenant, votre application devrait être pleinement migré. 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. +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. > Combien de temps va prendre la migration d'une application Vue 1.x vers une application Vue 2.0 ? @@ -28,11 +28,11 @@ Cela dépend de plusieurs critères comme : - 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), -- du nombre de fonctionnalités obsolètes que vous utilisez. La plupard 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 de refactoriser (un peu tard) des parties. +- 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. -> Si je mets à jour vers Vue 2, dois-je aussi mettre à jour Vuex et Vue-Router ? +> Si je passe à Vue 2, dois-je aussi mettre à jour Vuex et Vue-Router ? -Seul Vue-Router 2 est compatible avec Vue 2, donc oui, vous allez devoir suivre le [guide de migration pour Vue-Router](migration-vue-router.html) également. 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. +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) également. 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. 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. @@ -58,7 +58,7 @@ Il est recommandé d'entourer simplement le contenu complet dans un nouvel élé {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -71,7 +71,7 @@ Utilisez le hook `created` à la place. {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

    {% endraw %} @@ -82,7 +82,7 @@ Utilisez le hook `mounted` à la place. {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

    {% endraw %} @@ -109,7 +109,7 @@ mounted: function () { {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

    {% endraw %} @@ -136,18 +136,18 @@ destroyed: function () { {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

    {% endraw %} ### `init` renommé -Utilisez le nouveau hook `beforeCreate` à la place. Il fait la même chose. Il a été renommé pour plus de consistence avec les autres méthodes du cycle de vie. +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 %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

    {% endraw %} @@ -166,7 +166,7 @@ mounted: function () { {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver toutes les occurrences de ce hook.

    {% endraw %} @@ -179,7 +179,7 @@ Quand vous utilisiez un `index`, l'ordre des arguments pour les tableaux était {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -190,7 +190,7 @@ Quand vous utilisez une `key`, l'ordre des arguments pour les objets était `(ke {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -201,8 +201,8 @@ Les variables implicites `$index` et `$key` ont été enlevées à la faveur de {% raw %}
    -

    Mise en évidence

    -

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de ces variables retirées. Si vous en oubliez certaine, vous devriez voir des erreurs console comme 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 %} @@ -222,18 +222,18 @@ vous aurez maintenant : {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de track-by.

    {% endraw %} -### `v-for` et nombres changé +### `v-for` et plage de valeurs changé 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 %}
    -

    Mise en évidence

    +

    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 %} @@ -279,7 +279,7 @@ Cela a plusieurs avantages : {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de l'option coerce.

    {% endraw %} @@ -294,7 +294,7 @@ Les props sont maintenant toujours unidirectionnelles et descendantes. Pour prod {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de l'option twoWay.

    {% endraw %} @@ -309,14 +309,14 @@ Les props sont maintenant toujours unidirectionnelles et descendantes. Pour prod {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences des modificateurs .once et .sync.

    {% endraw %} ### Mutation de prop déprécié -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 variables locales du composant enfant seront ré-écrites. +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. Dans la majorité des cas, muter une prop peut être remplacé par une de ces solutions : @@ -325,7 +325,7 @@ Dans la majorité des cas, muter une prop peut être remplacé par une de ces so {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -336,7 +336,7 @@ Sur une instance racine de Vue (c.-à-d. crée avec `new Vue({ ... })`), vous de {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -347,7 +347,7 @@ Sur une instance racine de Vue (c.-à-d. crée avec `new Vue({ ... })`), vous de 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. -Pan exemple : +Par exemple : ``` js template: '

    message : {{ timeMessage }}

    ', @@ -374,12 +374,12 @@ methods: { {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de l'option cache: false.

    {% endraw %} -## Directives pré-conçues +## Directives intégrées ### Évaluation à vrai ou faux avec `v-bind` changée @@ -391,7 +391,7 @@ Pour les attributs énumérés, en plus des valeurs précédentes évaluées à {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -406,16 +406,16 @@ Quand vous utilisez un composant, `v-on` n'écoutera que les évènements `$emit {% raw %}
    -

    Mise en évidence

    +

    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 %} ### Paramètre d'attribut `debounce` pour `v-model` retiré -Une fonction de rétention (« debounce ») est utilisée pour limiter le nombre de fois qu'une fonction a opérations lourdes est exécutée a une fois. L'attribut `debounce` 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. +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. -Ces limitations peuvent être mise en évidence avec un indicateur de recherche, comme celui de cet exemple : +Ces limitations peuvent être mises en évidence avec un indicateur de recherche, comme celui de cet exemple : {% raw %} @@ -519,7 +519,7 @@ Un autre avantage de cette approche est que parfois la rétention n'est pas la m {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences du paramètre d'attribut debounce.

    {% endraw %} @@ -542,7 +542,7 @@ Nous utiliserons : {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -577,7 +577,7 @@ vous devrez vous assurer que la valeur initiale pour `text` est `"hello world"`. {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -608,7 +608,7 @@ Comme vous pouvez le voir, la liaison bidirectionnelle de `v-model` n'a plus de {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -629,16 +629,16 @@ Si vous voulez vraiment ré-écrire un autre `!important`, vous devrez utiliser {% raw %}
    -

    Mise en évidence

    +

    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` et `v-ref` remplacés -Pour plus de simplicité, `v-el` et `v-ref` ont été fusionnés en 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. +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. -Puisque `v-ref` n'est plus une directive, mais un attribut spécial, il peut également être défini dynamiquement. Cela spécialement utile avec `v-for`. Par exemple : +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

    @@ -650,13 +650,13 @@ Précédemment, `v-el` / `v-ref` utilisé avec un `v-for` produisait un tableau

    ``` -À 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é-active demanderait de dupliquer le rendu à chaque changement. +À 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. 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 %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de v-el ou de v-ref.

    {% endraw %} @@ -679,16 +679,16 @@ Vous pouvez utilisez : {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des occurrences de v-else avec v-show.

    {% endraw %} ## Directives personnalisées simplifiées -Les directives ont une portée de responsabilité grandement réduite : elles sont maintenant uniquement utilisées pour appliquer des manipulation de DOM à bas niveau. Dans la plupart des cas, vous devriez préférez des composants comme abstraction principale de codes réutilisables. +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. -Certaines des différences les plus notables inclues : +Certaines des différences les plus notables incluent : - 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). @@ -698,7 +698,7 @@ Heureusement, puisque les nouvelles directives sont plus simples, vous pouvez le {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -721,7 +721,7 @@ avec : {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de modificateurs .literal sur les directives.

    {% endraw %} @@ -734,7 +734,7 @@ Le système de transition de Vue a changé drastiquement et maintenant il faut u {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'attribut transition.

    {% endraw %} @@ -745,7 +745,7 @@ Avec le nouveau système de transition, vous pouvez maintenant [utiliser les com {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'attribut de Vue.transition.

    {% endraw %} @@ -756,7 +756,7 @@ Si vous avez besoin d'écheloner les transitions, vous pouvez contrôler le timi {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -777,20 +777,20 @@ Vue.config.keyCodes.f1 = 112 ``` {% raw %}
    -

    Mise en évidence

    +

    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` et `$broadcast` remplacés -`$dispatch` et `$broadcast` on é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). +`$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). -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. Ils ne s'adaptaient pas correctement et nous ne voulons pas qu'ils amènent plus de bien que de mal. `$dispatch` et `$broadcast` ne résolvaient pas non plus la communication entre les composants voisins. +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. 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. -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émentes une interface de émission d'évènement, vous pouvez en fait utiliser une instance de Vue vide pour réaliser cela. +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. Par exemple, imaginons que nous avons une application de liste de tâches comme celle là : @@ -809,7 +809,7 @@ Nous pourrions gérer la communication entre ces composants avec ce simple canal var eventHub = new Vue() ``` -Maintenant dans nos composants, nous pouvons utilisez `$emit`, `$on` et `$off` pour respectivement émettre des évènements, écouter des évènements et netoyer les écouteurs d'évènements : +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,7 +839,7 @@ created: function () { eventHub.$on('add-todo', this.addTodo) eventHub.$on('delete-todo', this.deleteTodo) }, -// Il est bon de netoyer les écouteurs d'évènements avant +// Il est bon de nettoyer les écouteurs d'évènements avant // la destruction du composant. beforeDestroy: function () { eventHub.$off('add-todo', this.addTodo) @@ -861,7 +861,7 @@ Ce modèle peut servir de remplacement à `$dispatch` et `$broadcast` dans des s {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de $dispatch et $broadcast.

    {% endraw %} @@ -953,7 +953,7 @@ computed: { } ``` -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 leurs nom et 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 @@ -988,7 +988,7 @@ computed: { } ``` -Vous pouvez même ordoner par multiples colonnes : +Vous pouvez même ordonner par plusieurs colonnes : ``` js _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) @@ -996,7 +996,7 @@ _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1017,7 +1017,7 @@ Nous entourons les arguments avec des parenthèses et les délimitons avec des v {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1078,14 +1078,14 @@ Dans beaucoup de cas cependant, vous allez toujours tomber sur des comportements {% raw %}
    -

    Mise en évidence

    +

    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 %} ### Filtres bidirectionnels remplacés -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 mises à jour des états. À la place, créer un champ dans un composant est recommandé 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. +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. Par exemple, nous allons migrer un filtre de devise bidirectionnel : @@ -1120,7 +1120,7 @@ Vous pouvez remarquer que : {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1133,18 +1133,18 @@ Il n'est plus possible d'avoir deux `` avec le même nom dans le même tem {% raw %}
    -

    Mise en évidence

    +

    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 %} ### Attribut de stylisation `slot` retiré -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érré programmatiquement en utilisant des [fonctions de rendu](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 %}
    -

    Mise en évidence

    +

    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 %} @@ -1184,7 +1184,7 @@ Quand vous les utilisez avec ``, assurez-vous de les imbriquer ainsi {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver les attributs keep-alive.

    {% endraw %} @@ -1221,7 +1221,7 @@ computed: { {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1232,7 +1232,7 @@ L'interpolations HTML (`{% raw %}{{{ foo }}}{% endraw %}`) a été retirée. La {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des interpolations.

    {% endraw %} @@ -1243,7 +1243,7 @@ Les liaisons à un seul rendu (`{% raw %}{{* foo }}{% endraw %}`) ont été remp {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des liaisons un seul rendu.

    {% endraw %} @@ -1258,7 +1258,7 @@ Si vous aviez précédemment relié `vm.$watch` à quelque chose du DOM après l {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1269,7 +1269,7 @@ Si vous aviez précédemment relié `vm.$watch` à quelque chose du DOM après l {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'utilisations obsolètes.

    {% endraw %} @@ -1280,7 +1280,7 @@ Si vous aviez précédemment relié `vm.$watch` à quelque chose du DOM après l {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'utilisations obsolètes.

    {% endraw %} @@ -1291,7 +1291,7 @@ Utilisez `Vue.set` à la place. {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1321,7 +1321,7 @@ methods: { {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1332,7 +1332,7 @@ methods: { {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1343,7 +1343,7 @@ Il est maintenant interdit de remplacer l'objet `$data` d'une instance racine de {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1354,7 +1354,7 @@ Retrouvez simplement la donnée réactive. {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1371,7 +1371,7 @@ myElement.appendChild(vm.$el) {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1386,7 +1386,7 @@ myElement.parentNode.insertBefore(vm.$el, myElement) {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1407,7 +1407,7 @@ myElement.parentNode.appendChild(vm.$el) {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1422,7 +1422,7 @@ vm.$el.remove() {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1435,7 +1435,7 @@ Pas réellement utile. Si vous avez des difficultés liés à cette fonctionnali {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1446,18 +1446,18 @@ Pas réellement utile. Si vous avez des difficultés liées à cette fonctionnal {% raw %}
    -

    Mise en évidence

    +

    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` retiré -Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une expérience de débogue optimale. +Utilisez le [Devtools de Vue](https://github.com/vuejs/vue-devtools) pour une expérience de débogage optimale. {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1492,7 +1492,7 @@ new Vue({ {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de replace: false.

    {% endraw %} @@ -1505,7 +1505,7 @@ N'est plus nécessaire car les avertissements se trouvent dans la pile des trace {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.debug.

    {% endraw %} @@ -1516,7 +1516,7 @@ Async est maintenant requis pour les performances de rendu. {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.async.

    {% endraw %} @@ -1527,7 +1527,7 @@ Cela a été retravaillé en temps qu'[option de composant](../api/#delimiters). {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.config.delimiters.

    {% endraw %} @@ -1538,7 +1538,7 @@ L'interpolation HTML a été [retirée en faveur de `v-html`](#Interpolation-HTM {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1551,7 +1551,7 @@ L'option `el` ne peut plus être utilisée avec `Vue.extend`. Elle est seulement {% raw %}
    -

    Mise en évidence

    +

    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 %} @@ -1562,7 +1562,7 @@ Utilisez des composants à la place. {% raw %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.elementDirective.

    {% endraw %} @@ -1571,13 +1571,13 @@ Utilisez des composants à la place. 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). -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). Elles 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. +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. -Le bénéfice des composants fonctionnels face aux partiels est qu'ils peuvent être bien plus dynamique, 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. +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 %}
    -

    Mise en évidence

    +

    Comment procéder ?

    Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de Vue.partial.

    {% endraw %} From e4502e0e3cca0d8d2c230c53c82ef507a639b744 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 21 Aug 2017 18:10:49 +0200 Subject: [PATCH 12/12] =?UTF-8?q?Double=20=C2=AB=20=C3=A9galement=20=C2=BB?= =?UTF-8?q?=20removing.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- src/v2/guide/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 216fe91e6a..b230d46cbd 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -32,7 +32,7 @@ Cela dépend de plusieurs critères comme : > Si je passe à Vue 2, dois-je aussi mettre à jour Vuex et Vue-Router ? -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) également. 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. +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. 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.