Merge remote-tracking branch 'upstreamfr/master' into french_components

Author: MachinisteWeb

src/images/fancygrid.png

@@ -16,7 +16,9 @@ However, the amount of effort needed to maintain and develop new features for th
 ### Gold ($500/mo)
 
 <p style="text-align: center; margin-top: 0; margin-bottom: 60px" class="sponsors-page">
-  <a href="https://jsfiddle.net">
+  <a href="https://deepstreamhub.com" target="_blank" style="width:130px;top:1px">
+    <img src="/images/deepstream.png" style="width:130px">
+  </a><a href="https://jsfiddle.net">
     <img src="/images/jsfiddle.png">
   </a><a href="https://laravel.com">
     <img src="/images/laravel.png">
@@ -30,14 +32,16 @@ However, the amount of effort needed to maintain and develop new features for th
     <img src="/images/monterail.png">
   </a><a href="https://www.trisoft.ro/" target="_blank">
     <img src="/images/trisoft.png">
-  </a><a href="http://actualize.co" target="_blank" style="width:180px">
-    <img src="/images/actualize.png" style="width:180px">
   </a><a href="https://www.2mhost.com/" target="_blank">
     <img src="/images/2mhost.png">
   </a><a href="https://vuejobs.com/?ref=vuejs" target="_blank" style="position:relative;top:6px">
     <img src="/images/vuejobs.svg">
   </a><a href="https://leanpub.com/vuejs2" target="_blank">
     <img src="/images/tmvuejs2.png">
+  </a><a href="https://fancygrid.com" target="_blank">
+    <img src="https://fancygrid.com/logo/logo.png">
+  </a><a href="https://component.io" target="_blank" style="width:150px">
+    <img src="/images/component_io.png" style="width:150px">
   </a>
 </p>
 

src/support-vuejs/index.md

@@ -107,15 +107,22 @@ type: api
 
 - **Utilisation :**
 
-  ``` js
+  ```js
   Vue.config.keyCodes = {
     v: 86,
     f1: 112,
+    // camelCase won`t work
     mediaPlayPause: 179,
+    // instead you can use kebab-case with double quatation mark
+    "media-play-pause" : 179,
     up: [38, 87]
   }
   ```
 
+  ```html
+  <input type="text" @keyup.media-play-pause="method">
+  ```
+  
   Définit des alias pour les touches du clavier avec `v-on`.
 
 ### performance
@@ -124,7 +131,7 @@ type: api
 
 - **Type:** `boolean`
 
-- **Default:** `false`
+- **Default:** `false (from 2.2.3)`
 
 - **Usage**:
 
@@ -642,7 +649,7 @@ if (version === 2) {
     An alternative to string templates allowing you to leverage the full programmatic power of JavaScript. The render function receives a `createElement` method as it's first argument used to create `VNode`s.
 
     If the component is a functional component, the render function also receives an extra argument `context`, which provides access to contextual data since functional components are instance-less.
-    
+
     <p class="tip">The `render` function has priority over the render function compiled from `template` option or in-DOM HTML template of the mounting element which is specified by the `el` option.</p>
 
   - **Voir aussi :**
@@ -1048,7 +1055,12 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
     },
     props: {
       // this allows using the `value` prop for a different purpose
-      value: String
+      value: String,
+      // use `checked` as the prop which take the place of `value`
+      checked: {
+        type: Number,
+        default: 0
+      }
     },
     // ...
   })
@@ -1772,6 +1784,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   <!-- prop binding. "prop" must be declared in my-component. -->
   <my-component :prop="someThing"></my-component>
 
+  <!-- pass down parent props in common with a child component -->
+  <child-component v-bind.prop="$props"></child-component>
+
   <!-- XLink -->
   <svg><a :xlink:special="foo"></a></svg>
   ```

src/v2/api/index.md

@@ -0,0 +1,9 @@
+---
+title: Realtime with deepstreamHub
+type: examples
+order: 9
+---
+
+> This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).
+
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/deepstream.md

@@ -1,7 +1,7 @@
 ---
 title: Firebase + Validation
 type: examples
-order: 2
+order: 10
 ---
 
 > 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.

src/v2/examples/firebase.md

@@ -1,7 +1,7 @@
 ---
 title: Clone de HackerNews
 type: examples
-order: 10
+order: 12
 ---
 
 > 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.

src/v2/examples/hackernews.md

@@ -6,4 +6,4 @@ order: 8
 
 > Dans cet exemple nous utilisons un plugin jQuery tiers (select2) en le plaçant à l'intérieur d'un composant personnalisé.
 
-<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/fruqrvdL/456/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/v2/examples/select2.md

@@ -1,7 +1,7 @@
 ---
 title: TodoMVC
 type: examples
-order: 9
+order: 11
 ---
 
 > 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).

src/v2/examples/todomvc.md

@@ -139,7 +139,7 @@ Dans Vue, nous avons également des [fonctions de rendu](https://vuejs.org/v2/gu
 <template>
   <div class="list-container">
     <ul v-if="items.length">
-      <li v-for="item in items">
+      <li v-for="item in items" :key="item.id">
         {{ item.name }}
       </li>
     </ul>
@@ -199,7 +199,7 @@ Une autre différence importante entre ces offres est que les bibliothèques acc
 
 Pour finir, Vue offre un [outil de génération de projet en ligne de commande](https://github.com/vuejs/vue-cli) qui rend trivial le démarrage d'un nouveau projet en utilisant le système de système de build de votre choix, incluant [Webpack](https://github.com/vuejs-templates/webpack), [Browserify](https://github.com/vuejs-templates/browserify), ou même sans [système de création](https://github.com/vuejs-templates/simple). React fait aussi des progrès de ce côté là avec [create-react-app](https://github.com/facebookincubator/create-react-app), mais a pour le moment quelques limitations :
 
-- Il ne permet aucune configuration durant la génération du projet, là où les templates de projet Vue permettent une personnalisation à la façon Yeoman.
+- Il ne permet aucune configuration durant la génération du projet, là où les templates de projet Vue permettent une personnalisation à la façon [Yeoman](http://yeoman.io/).
 - Il ne propose qu'un seul template qui présume que vous concevez une application web monopage, là où Vue offre une large variété de templates pour différents objectifs et outils de *build*.
 - Il ne permet pas la génération de projets depuis des templates faits par les utilisateurs, ce qui peut être particulièrement utile en entreprise avec des conventions pré-établies.
 

src/v2/guide/comparison.md

@@ -186,6 +186,7 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
 <form v-on:submit.prevent></form>
 
 <!-- use capture mode when adding the event listener -->
+<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
 <div v-on:click.capture="doThis">...</div>
 
 <!-- only trigger handler if event.target is the element itself -->

src/v2/guide/events.md

@@ -121,7 +121,7 @@ createElement(
 
 ### The Data Object In-Depth
 
-One thing to note: similar to how `v-bind:class` and `v-bind:style` have special treatment in templates, they have their own top-level fields in VNode data objects.
+One thing to note: similar to how `v-bind:class` and `v-bind:style` have special treatment in templates, they have their own top-level fields in VNode data objects. This object also allows you to bind normal HTML attributes as well as DOM properties such as `innerHTML` (this would replace the `v-html` directive):
 
 ``` js
 {

src/v2/guide/render-function.md

@@ -9,6 +9,5 @@
 <%- partial('partials/ecosystem_dropdown') %>
 <%- partial('partials/language_dropdown') %>
 <li>
-  <a href="https://vue.threadless.com" target="_blank" class="nav-link shop">Shop</a>
-  <span class="new-label">NEW!</span>
+  <a href="https://vue.threadless.com" target="_blank" class="nav-link shop">Boutique</a>
 </li>

themes/vue/layout/partials/main_menu.ejs

@@ -2,6 +2,9 @@
   <img style="width: 180px" src="<%- url_for("/images/stdlib.png") %>">
 </a>
 <br>
+<a href="https://deepstreamhub.com" target="_blank" style="width:130px;top:1px">
+  <img src="<%- url_for("/images/deepstream.png") %>" style="width:130px">
+</a>
 <a href="https://jsfiddle.net/" target="_blank">
   <img src="<%- url_for("/images/jsfiddle.png") %>">
 </a>
@@ -26,9 +29,15 @@
 <a href="https://www.2mhost.com/" target="_blank" style="width:90px">
   <img src="<%- url_for("/images/2mhost.png") %>" style="width:90px">
 </a>
-<a href="https://vuejobs.com/?ref=vuejs" target="_blank" style="width:90px;top:5px">
-  <img src="<%- url_for("/images/vuejobs.svg") %>" style="width:90px">
+<a href="https://vuejobs.com/?ref=vuejs" target="_blank" style="width:80px;top:4px">
+  <img src="<%- url_for("/images/vuejobs.svg") %>" style="width:80px">
 </a>
 <a href="https://leanpub.com/vuejs2" target="_blank">
   <img src="<%- url_for("/images/tmvuejs2.png") %>">
 </a>
+<a href="https://fancygrid.com" target="_blank" style="width:110px;">
+  <img src="<%- url_for("/images/fancygrid.png") %>" style="width:110px">
+</a>
+<a href="https://component.io" target="_blank" style="width:120px;top:1px">
+  <img src="<%- url_for("/images/component_io.png") %>" style="width:120px">
+</a>