Merge branch 'master' into master

Author: yann-yinn

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 public/
 .deploy*/
 src/_drafts
+.idea/

Makefile

@@ -8,7 +8,7 @@ deploy:
 update:
 	cd ../vue && \
 		git checkout -- dist && \
-		git checkout dev && \
+		git checkout master && \
 		npm run build
 	cp ../vue/dist/vue.min.js themes/vue/source/js/vue.min.js
 	cp ../vue/dist/vue.js themes/vue/source/js/vue.js

README.md

@@ -1,6 +1,6 @@
 # fr.vuejs.org
 
-Ce site est assemblé avec [hexo](http://hexo.io/). Le contenu du Site est écrit au format Markdown et se trouve dans `src`. Les Pull requests son les bienvenues !
+Ce site est assemblé avec [hexo](http://hexo.io/). Le contenu du Site est écrit au format Markdown et se trouve dans `src`. Les Pull requests sont les bienvenues !
 
 ## Développement
 
@@ -11,3 +11,38 @@ $ npm install -g hexo-cli
 $ npm install
 $ hexo server
 ```
+
+## En cours de traduction
+
+La traduction pour ce projet de documentation est actuellement maintenu dans des dépôts forkés depuis celui-ci.
+
+### Mandarin
+
+* Dépôt de traduction - [/vuejs/cn.vuejs.org](https://github.com/vuejs/cn.vuejs.org)
+
+### Japonais
+
+* Dépôt de traduction - [/vuejs/jp.vuejs.org](https://github.com/vuejs/jp.vuejs.org)
+
+### Russe
+
+La traduction Russe est maintenu par Translation Gang.
+
+* Dépôt de traduction — [/translation-gang/ru.vuejs.org](https://github.com/translation-gang/ru.vuejs.org)
+* Mainteneur principal - [Grigoriy Beziuk](https://gbezyuk.github.io)
+
+### Italien
+
+* Dépôt de traduction - [/vuejs/it.vuejs.org](https://github.com/vuejs/it.vuejs.org)
+
+### Coréen
+
+À FAIRE : fournir des informations ici
+
+### Vous voulez participer à la traduction ?
+
+Si vous vous sentez d'attaque pour une traduction seul, forkez simplement ce dépôt, créez un ticket « work-in-progress » pour informer les autres que vous êtes entrain de le traduire, et en avant.
+
+Si vous êtes plutôt du genre à participer au sein d'une équipe, peut-être que Translation Gang est fait pour vous ? Faites nous savoir de quel manière vous êtes prêt à rejoindre cette communauté internationale de traduction open-source. N'hésitez pas à contacter [Grigoriy Beziuk](https://gbezyuk.github.io) ou n'importe qui parmi [l'équipe](https://github.com/orgs/translation-gang/people).
+
+Et merci à vous par avance ;)

src/images/transition.png

@@ -1750,21 +1750,27 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   - `mode` - string, Controls the timing sequence of leaving/entering transitions. Available modes are `"out-in"` and `"in-out"`; defaults to simultaneous.
   - `enter-class` - string
   - `leave-class` - string
+  - `appear-class` - string
+  - `enter-to-class` - string
+  - `leave-to-class` - string
+  - `appear-to-class` - string
   - `enter-active-class` - string
   - `leave-active-class` - string
-  - `appear-class` - string
   - `appear-active-class` - string
 
 - **Events:**
   - `before-enter`
-  - `enter`
-  - `after-enter`
   - `before-leave`
-  - `leave`
-  - `after-leave`
   - `before-appear`
+  - `enter`
+  - `leave`
   - `appear`
+  - `after-enter`
+  - `after-leave`
   - `after-appear`
+  - `enter-cancelled`
+  - `leave-cancelled` (`v-show` only)
+  - `appear-cancelled`
 
 - **Usage:**
 

src/v2/api/index.md

@@ -1,32 +1,32 @@
 ---
-title: Class and Style Bindings
+title: Liaisons de classes et de styles
 type: guide
 order: 6
 ---
 
-<p class="tip">**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).**</p>A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
+Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind`  pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant la concaténation de chaîne de caractères est fastidieuse, et source d'erreur. Pour cette raison, Vue fournit des améliorations spécifiques quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux.
 
-## Binding HTML Classes
+## Liaison de Classes HTML
 
-### Object Syntax
+### Syntaxe Objet
 
-We can pass an object to `v-bind:class` to dynamically toggle classes:
+Il est possible de passer un objet à `v-bind:class` pour permuter les classes automatiquement :
 
 ``` html
 <div v-bind:class="{ active: isActive }"></div>
 ```
 
-The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`.
+La syntaxe ci-dessus signifie que la classe `active` sera présente si la propriété `isActive` est [évaluée à vrai](https://developer.mozilla.org/fr/docs/Glossaire/Truthy).
 
-You can have multiple classes toggled by having more fields in the object. In addition, the `v-bind:class` directive can also co-exist with the plain `class` attribute. So given the following template:
+Vous pouvez permuter plusieurs classes en ayant plus de champs dans l'objet. De plus, la directive `v-bind:class` peut aussi coexister avec l'attribut `class`. Donc, avec le template suivant :
 
 ``` html
 <div class="static"
      v-bind:class="{ active: isActive, 'text-danger': hasError }">
 </div>
 ```
 
-And the following data:
+Et les données suivantes :
 
 ``` js
 data: {
@@ -35,15 +35,15 @@ data: {
 }
 ```
 
-It will render:
+Le rendu sera :
 
 ``` html
 <div class="static active"></div>
 ```
 
-When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`.
+Quand `isActive` ou `hasError` change, la liste des classes sera mise à jour en conséquence. Par exemple, si `hasError` devient `true`, la liste des classes deviendra `"static active text-danger"`.
 
-The bound object doesn't have to be inline:
+L'objet lié n'a pas besoin d'être déclaré dans l'attribut :
 
 ``` html
 <div v-bind:class="classObject"></div>
@@ -57,7 +57,7 @@ data: {
 }
 ```
 
-This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern:
+Ceci rendra le même résultat. Il est également possible de lier une [propriété calculée](computed.html) qui retourne un objet. C'est une méthode courante et puissante :
 
 ``` html
 <div v-bind:class="classObject"></div>
@@ -77,9 +77,9 @@ computed: {
 }
 ```
 
-### Array Syntax
+### Syntaxe Tableau
 
-We can pass an array to `v-bind:class` to apply a list of classes:
+Il est possible de passer un tableau à `v-bind:class` pour appliquer une liste de classes :
 
 ``` html
 <div v-bind:class="[activeClass, errorClass]">
@@ -91,69 +91,69 @@ data: {
 }
 ```
 
-Which will render:
+Ce qui rendra :
 
 ``` html
 <div class="active text-danger"></div>
 ```
 
-If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
+Si vous voulez permuter une classe de la liste en fonction d'une condition, vous pouvez le faire avec une expression ternaire :
 
 ``` html
 <div v-bind:class="[isActive ? activeClass : '', errorClass]">
 ```
 
-This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is `true`.
+Ceci appliquera toujours la classe `errorClass`, mais appliquera `activeClass` uniquement quand `isActive` vaut `true`.
 
-However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
+En revanche, ce peut être un peu verbeux si vous avez plusieurs classes conditionnelles. C'est pourquoi il est aussi possible d'utiliser la syntaxe objet dans la syntaxe tableau :
 
 ``` html
 <div v-bind:class="[{ active: isActive }, errorClass]">
 ```
 
-### With Components
+### Avec des Composants
 
-> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.
+> Cette section suppose la connaissance de [Vue Composants](components.html). N'hésitez pas à l'ignorer et y revenir plus tard.
 
-When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.
+Quand vous utilisez l'attribut `class` sur un composant personnalisé, ces classes seront ajoutées à l'élément à la racine du composant. Les classes présentes sur cet élément ne seront pas réécrites.
 
-For example, if you declare this component:
+Par exemple, si vous déclarez ce composant :
 
 ``` js
 Vue.component('my-component', {
   template: '<p class="foo bar">Hi</p>'
 })
 ```
 
-Then add some classes when using it:
+​Puis ajoutez quelques classes quand vous l'utilisez : 
 
 ``` html
 <my-component class="baz boo"></my-component>
 ```
 
-The rendered HTML will be:
+Le rendu HTML sera :
 
 ``` html
 <p class="foo bar baz boo">Hi</p>
 ```
 
-The same is true for class bindings:
+C'est aussi vrai pour la liaison de classe :
 
 ``` html
 <my-component v-bind:class="{ active: isActive }"></my-component>
 ```
 
-When `isActive` is truthy, the rendered HTML will be:
+Quand `isActive` est évalué à vrai, le rendu HTML sera :
 
 ``` html
 <p class="foo bar active"></p>
 ```
 
-## Binding Inline Styles
+## Liaison de Styles HTML
 
-### Object Syntax
+### Syntaxe objet
 
-The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
+La syntaxe objet pour `v-bind:style` est assez simple - cela ressemble presque à CSS, sauf que c'est un objet JavaScript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS :
 
 ``` html
 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
@@ -165,7 +165,7 @@ data: {
 }
 ```
 
-It is often a good idea to bind to a style object directly so that the template is cleaner:
+C'est souvent une bonne idée de lier directement un objet de style, pour que le template soit plus propre :
 
 ``` html
 <div v-bind:style="styleObject"></div>
@@ -179,16 +179,16 @@ data: {
 }
 ```
 
-Again, the object syntax is often used in conjunction with computed properties that return objects.
+Encore une fois, la syntaxe objet est souvent utilisée en conjonction avec des propriétées calculées retournant des objets.
 
-### Array Syntax
+### Syntaxe tableau
 
-The array syntax for `v-bind:style` allows you to apply multiple style objects to the same element:
+La syntaxe tableau pour `v-bind:style` permet d'appliquer plusieurs objets de style à un même élément.
 
 ``` html
 <div v-bind:style="[baseStyles, overridingStyles]">
 ```
 
-### Auto-prefixing
+### Préfixage automatique
 
-When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
+Quand vous utilisez une propriété CSS qui nécessite un préfixe vendeur dans `v-bind:style`, par exemple `transform`, Vue le détectera automatiquement, et ajoutera les préfixes appropriés aux styles appliqués.

src/v2/guide/class-and-style.md

@@ -301,7 +301,7 @@ Cela dit, il serait problement plus judicieux de faire une comparaison entre le
 
 Knockout fut un pionnier dans le domaine du MVVM et du suivi de dépendances, et son système de réactivité est vraiment très similaire à Vue. C'est son [support des navigateurs](http://knockoutjs.com/documentation/browser-support.html) qui est vraiment impressionnant considérant tout ce qu'il permet de faire avec un support jusqu'à IE6 ! Vue d'un autre côté ne supporte que IE9+.
 
-Avec le temps cependant, le développement de Knockout a ralenti et il commence a se montrer un peu agé. Par exemple, son système de composant manque d'un ensemble complet de points d'ancrage au cycle de vie et même si c'est un cas d'utilisation commun, l'interface pour passer des composants enfants à un composant est quelque peu laborieuse en comparaison de Vue.
+Avec le temps cependant, le développement de Knockout a ralenti et il commence a se montrer un peu agé. Par exemple, son système de composant manque d'un ensemble complet de hooks au cycle de vie et même si c'est un cas d'utilisation commun, l'interface pour passer des composants enfants à un composant est quelque peu laborieuse en comparaison de Vue.
 
 Il semble aussi y avoir une différence de philosophie dans le design des APIs qui, si vous êtes curieux, peut être démontrée en étudiant comment chacun gère la création [d'une simple todo list](https://gist.github.com/chrisvfritz/9e5f2d6826af00fcbace7be8f6dccb89). C'est assurément quelque chose de subjectif, mais beaucoup considèrent l'API de Vue moins complexe et mieux structurée.
 

src/v2/guide/comparison.md

@@ -1011,7 +1011,7 @@ Vue.component('async-webpack-example', function (resolve) {
 })
 ```
 
-You can also return a `Promise` in the resolve function, so with Webpack 2 + ES2015 syntax you can do:
+You can also return a `Promise` in the factory function, so with Webpack 2 + ES2015 syntax you can do:
 
 ``` js
 Vue.component(

src/v2/guide/components.md

@@ -65,7 +65,11 @@ rollup({
 
 ## Pre-Compiling Templates
 
-When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive. The easiest way to pre-compile templates is using [Single-File Components](./single-file-components.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
+When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.
+
+The easiest way to pre-compile templates is using [Single-File Components](./single-file-components.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
+
+If you are using Webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step.
 
 ## Extracting Component CSS
 

src/v2/guide/deployment.md

@@ -72,8 +72,7 @@ Pour Browserify, vous pouvez ajouter un alias dans votre package.json :
 },
 ```
 
-<p class="tip">Ne faites PAS `import Vue from 'vue/dist/vue.js'` — 
-en effet, certains outils ou bibliothèques tierces peuvent également importer Vue, ce qui peut forcer l'app à charger conjointement les builds runtime et standalone et mener à des erreurs.</p>
+<p class="tip">Ne faites PAS `import Vue from 'vue/dist/vue.js'` — en effet, certains outils ou bibliothèques tierces peuvent également importer Vue, ce qui peut forcer l'app à charger conjointement les builds runtime et standalone et mener à des erreurs.</p>
 
 ### Environnements CSP