Merge branch 'master' into master

Author: sylvainpolletvillard

.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,50 @@ $ 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
+
+La traduction japonaise est maintenue par [Vue.js japan user group](https://github.com/vuejs-jp)
+
+* Dépôt de traduction - [/vuejs/jp.vuejs.org](https://github.com/vuejs/jp.vuejs.org)
+* Mainteneur principal - [kazupon](https://github.com/kazupon)
+
+### Russe
+
+La traduction russe est maintenue 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
+
+La traduction coréenne est maintenue par [Vue.js Korean User group](https://github.com/vuejs-kr).
+
+* Dépôt de traduction - [/vuejs-kr/kr.vuejs.org](https://github.com/vuejs-kr/kr.vuejs.org)
+* Mainteneur principal - [ChangJoo Park](https://github.com/ChangJoo-Park)
+
+### Français
+
+La traduction française est maintenue par Vuejs-FR.
+
+* Dépôt de traduction — [/vuejs-fr/vuejs.org](https://github.com/vuejs-fr/vuejs.org)
+
+### Voulez-vous 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

@@ -25,8 +25,6 @@
     <img src="/images/htmlburger.png">
   </a><a href="https://starter.someline.com/" target="_blank">
     <img src="/images/someline.png">
-  </a><a href="http://gold.xitu.io/?utm_source=vuejs&utm_medium=image&utm_content=juejin&utm_campaign=q3_website" target="_blank">
-    <img width="180px" src="/images/juejin.png">
   </a><a href="http://monterail.com/" target="_blank">
     <img src="/images/monterail.png">
   </a><a href="https://www.trisoft.ro/" target="_blank">
@@ -37,6 +35,10 @@
     <img src="/images/2mhost.png">
   </a><a href="https://vuejobs.com/?ref=vuejs" target="_blank" style="position:relative;top:6px">
     <img src="/images/vuejobs.png">
+  </a><a href="https://leanpub.com/vuejs2" target="_blank">
+    <img src="/images/tmvuejs2.png">
+  </a><a href="https://stdlib.com/" target="_blank">
+    <img src="/images/stdlib.png">
   </a>
 </p>
 

src/support-vuejs/index.md

@@ -662,7 +662,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   Called after a data change causes the virtual DOM to be re-rendered and patched.
 
-  The component's DOM will be in updated state when this hook is called, so you can perform DOM-dependent operations in this hook. However, in most cases you should avoid changing state in this hook, because it may lead to an infinite update loop.
+  The component's DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it's usually better to use a [computed property](#computed) or [watcher](#watch) instead.
 
   **This hook is not called during server-side rendering.**
 
@@ -1329,6 +1329,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   This directive triggers transitions when its condition changes.
 
+<p class="tip">Quand utilisé avec v-if, v-for a une plus grande priorité par rapport à v-if. Voir le <a href="../guide/list.html#v-for-with-v-if">guide sur le rendu de listes</a> pour plus de détails.</p>
+
 - **Voir aussi :** [Conditional Rendering - v-if](../guide/conditional.html)
 
 ### v-else
@@ -1412,6 +1414,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   </div>
   ```
 
+  <p class="tip">When used together with v-if, v-for has a higher priority than v-if. See the <a href="../guide/list.html#v-for-with-v-if">list rendering guide</a> for details.</p>
+
   The detailed usage for `v-for` is explained in the guide section linked below.
 
 - **Voir aussi :**
@@ -1433,6 +1437,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   - `.self` - only trigger handler if event was dispatched from this element.
   - `.{keyCode | keyAlias}` - only trigger handler on certain keys.
   - `.native` - listen for a native event on the root element of component.
+  - `.once` - trigger handler at most once.
 
 - **Utilisation :**
 
@@ -1471,6 +1476,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   <!-- key modifier using keyCode -->
   <input @keyup.13="onEnter">
+
+  <!-- the click event will be triggered at most once -->
+  <button v-on:click.once="doThis"></button>
   ```
 
   Listening to custom events on a child component (the handler is called when "my-event" is emitted on the child):
@@ -1519,7 +1527,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   <!-- shorthand -->
   <img :src="imageSrc">
-  
+
   <!-- with inline string concatenation -->
   <img :src="'/path/to/images/' + fileName">
 
@@ -1742,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`
 
 - **Utilisation :**
 

src/v2/api/index.md

@@ -1,9 +1,9 @@
 ---
-title: GitHub Commits
+title: Commits GitHub
 type: examples
 order: 1
 ---
 
-> This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
+> Cet exemple récupère les dernières informations de commits de Vue.js depuis l'API GitHub et les affiche sous forme de liste. Vous pouvez basculer entre l'affichage des branches master et dev.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/commits.md

@@ -1,7 +1,7 @@
 ---
-title: Elastic Header
+title: Header élastique
 type: examples
 order: 7
 ---
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/elastic-header.md

@@ -4,6 +4,6 @@ type: examples
 order: 2
 ---
 
-> This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
+> Cet exemple utilise [Firebase](https://firebase.google.com/) comme serveur de données persistantes et de synchronisation clientes en temps réel (vous pouvez essayer cela en ouvrant de multiples onglets dans votre navigateur). Il réalise également une validation instantanée en utilisant les propriétés calculées et déclenche des transitions CSS quand des éléments sont ajoutés/supprimés.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/firebase.md

@@ -1,9 +1,9 @@
 ---
-title: Grid Component
+title: Composant tableau
 type: examples
 order: 3
 ---
 
-> This is an example of creating a reusable grid component and using it with external data.
+> Ceci est un exemple de création d'un composant tableau réutilisable et utilisant des données externes.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/xkkbfL3L/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/xkkbfL3L/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/grid-component.md

@@ -1,35 +1,35 @@
 ---
-title: HackerNews Clone
+title: Clone de HackerNews
 type: examples
 order: 10
 ---
 
-> This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + vue-router + vuex, with server-side rendering.
+> Ceci est un build clone du site HackerNews (HN) utilisant l'API Firebase HN officielle, Vue 2.0 + vue-router + vuex, avec un rendu côté serveur.
 
-<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>{% raw %}
+{% raw %}
 <div style="max-width:600px">
   <a href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">
     <img style="width:100%" src="/images/hn.png">
   </a>
 </div>
 {% endraw %}
 
-> [Live Demo](https://vue-hn.now.sh/)
-> Note: the demo may need some spin up time if nobody has accessed it for a certain period.
+> [Démo en ligne](https://vue-hn.now.sh/)
+> Note : la démo peut avoir besoin de temps pour se lancer si personne n'y a accédé depuis un certain temps.
 >
 > [[Source](https://github.com/vuejs/vue-hackernews-2.0)]
 
-## Features
+## Fonctionnalités
 
-- Server Side Rendering
-  - Vue + vue-router + vuex working together
-  - Server-side data pre-fetching
-  - Client-side state & DOM hydration
-- Single-file Vue Components
-  - Hot-reload in development
-  - CSS extraction for production
-- Real-time List Updates with FLIP Animation
+- Rendu Côté Serveur
+  - Vue + vue-router + vuex fonctionnant ensemble
+  - Données serveur préchargées
+  - État Client et Hydratation du DOM
+- Composant Vue Monofichier
+  - Rechargement à chaud en développement
+  - Extraction CSS pour la production
+- Mise à jour en temps-réel de liste avec animation de réordonnement.
 
-## Architecture Overview
+## Présentation d'architecture
 
-<img width="973" alt="Hackernew clone architecture overview" src="/images/hn-architecture.png">
+<img width="973" alt="Présentation d'architecture clone Hackernew" src="/images/hn-architecture.png">

src/v2/examples/hackernews.md

@@ -1,9 +1,9 @@
 ---
-title: Markdown Editor
+title: Éditeur Markdown
 type: examples
 order: 0
 ---
 
-> Dead simple Markdown editor.
+> Éditeur Markdown super simple.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/rdjjpc7a/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/rdjjpc7a/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/index.md

@@ -1,9 +1,9 @@
 ---
-title: Modal Component
+title: Composant fenêtre modale
 type: examples
 order: 6
 ---
 
-> Features used: component, prop passing, content insertion, transitions.
+Fonctionnalités utilisées : composant, passage par attribut, insertion de contenu, transitions.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/modal.md

@@ -1,9 +1,9 @@
 ---
-title: Wrapper Component
+title: Imbrication de composant
 type: examples
 order: 8
 ---
 
-> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
+> Dans cet exemple nous utilisons un plugin jQuery tiers (select2) en le plaçant à l'intérieur d'un composant personnalisé.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/fruqrvdL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/fruqrvdL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/select2.md

@@ -1,9 +1,9 @@
 ---
-title: SVG Graph
+title: Graphe SVG
 type: examples
 order: 5
 ---
 
-> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
+> Cet exemple met en avant l'utilisation combinée d'éléments personnalisés, de propriétés calculées, de liaisons de données bidirectionnelles et du support SVG.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/svg.md

@@ -4,8 +4,8 @@ type: examples
 order: 9
 ---
 
-> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
+> Ceci est une spécification pleinement valide pour une implémentation TodoMVC en moins de 120 lignes effectives (excluant les commentaires et sauts de ligne).
 
-<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><p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.</p>
+<p class="tip">Notez que si votre navigateur est configuré pour bloquer les données/cookies d'un tiers, l'exemple ci-dessous ne fonctionnera pas, ainsi que le `localStorage` qui va échouer lors de la sauvegarde depuis JSFiddle. Vous devrez alors cliquer sur `Edit in JSFiddle` pour voir un résultat fonctionnel.</p>
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/todomvc.md

@@ -1,9 +1,9 @@
 ---
-title: Tree View
+title: Vue d'arborescence
 type: examples
 order: 4
 ---
 
-> Example of a simple tree view implementation showcasing recursive usage of components.
+> Exemple d'une simple implémentation d'une vue d'arborescence mettant en avant l'utilisation récursive d'un composant.
 
-<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><iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/3p0j5sgy/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/3p0j5sgy/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>