Merge branch 'master' into api/index.md

Author: sylvainpolletvillard

README.md

@@ -16,45 +16,4 @@ $ hexo server
 
 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 ;)
+Pour connaître la liste de tous les autres projets de traduction, rendez-vous sur [la liste officielle des projets de traduction](https://github.com/vuejs/vuejs.org#on-translations).

_config.yml

@@ -93,6 +93,37 @@ markdown:
   smartLists: true
   smartypants: true
 
+# Offline
+## Config passed to sw-precache
+## https://github.com/JLHwung/hexo-offline
+offline:
+  maximumFileSizeToCacheInBytes: 10485760
+  staticFileGlobs:
+    - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,json,xml}
+  stripPrefix: public
+  verbose: true
+  runtimeCaching:
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: sendgrid.sp1.convertro.com
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: ad.doubleclick.net
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: cdn.jsdelivr.net
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: fonts.googleapis.com
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: fonts.gstatic.com
+
 # Deployment
 ## Docs: http://zespia.tw/hexo/docs/deployment.html
 deploy:

package.json

@@ -6,17 +6,18 @@
     "version": "3.2.2"
   },
   "dependencies": {
-    "hexo": "^3.2.2",
+    "hexo": "3.2.2",
     "hexo-deployer-git": "0.1.0",
     "hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git",
     "hexo-generator-archive": "^0.1.4",
     "hexo-generator-category": "^0.1.3",
     "hexo-generator-feed": "^1.1.0",
     "hexo-generator-index": "^0.2.0",
     "hexo-generator-tag": "^0.2.0",
+    "hexo-offline": "^0.2.0",
     "hexo-renderer-ejs": "^0.2.0",
     "hexo-renderer-marked": "^0.2.10",
     "hexo-renderer-stylus": "^0.3.1",
     "hexo-server": "^0.2.0"
   }
-}
+}

src/_posts/011-component.md

@@ -54,7 +54,7 @@ The only exception to the rule is `v-with` (and `paramAttributes` which compiles
 
 ### Cleaner Event Communication
 
-Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It's also possible to trigger undesired listners further up the chain if we do not cancel the event.
+Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It's also possible to trigger undesired listeners further up the chain if we do not cancel the event.
 
 The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, [a new directive `v-events`](/api/directives.html#v-events) has been introduced to enable exactly this behavior.
 

src/_posts/vue-next.md

@@ -5,7 +5,7 @@ date: 2014-07-29 00:04:55
 
 ## 0.10.6
 
-Vue.js 0.10.6 has been released! This is another small bug-fix release and will be the last maintainance version before the next major release.
+Vue.js 0.10.6 has been released! This is another small bug-fix release and will be the last maintenance version before the next major release.
 
 <!-- more -->
 
@@ -22,6 +22,6 @@ Some of you might have noticed there is a [next](https://github.com/yyx990803/vu
 - Fix some issues that are caused by design flaws in the current version. Because these changes affect the design of some core modules, it is actually easier to rewrite than to apply on the current codebase.
 - Improve general code quality (in particular, `compiler.js` as of now is a big pile of mess, and comments are not consistent across the codebase.)
 
-Take note that the `next` branch is still in **very** early stage. The internals will change a lot, and when it comes out it **will** break current applications. Despite that I will try to keep the API changes to a minimum. Major differences with current 0.10 branch are documented in [`changes.md`](https://github.com/yyx990803/vue/blob/next/changes.md). The list is obviously incomplete and subject to change, some of them are simply ideas, but it at least gives you a taste of what to expect, and I'd appreicate your feedback on any of the topics.
+Take note that the `next` branch is still in **very** early stage. The internals will change a lot, and when it comes out it **will** break current applications. Despite that I will try to keep the API changes to a minimum. Major differences with current 0.10 branch are documented in [`changes.md`](https://github.com/yyx990803/vue/blob/next/changes.md). The list is obviously incomplete and subject to change, some of them are simply ideas, but it at least gives you a taste of what to expect, and I'd appreciate your feedback on any of the topics.
 
 Share your thoughts at [vuejs/Discussion](https://github.com/vuejs/Discussion/issues).

src/images/data.png

@@ -0,0 +1,3 @@
+---
+type: menu
+---

src/images/hn-architecture.png

@@ -1,21 +1,24 @@
 # Support Vue.js Development
 
-<a href="https://www.patreon.com/evanyou" target="_blank">
-  <img style="width:120px" src="https://s3.amazonaws.com/patreon_public_assets/toolbox/patreon.png">
-  <span>Support Vue.js on Patreon (recurring pledge)</span>
-</a>
+Vue.js is an MIT licensed open source project and completely free to use.
+However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support Vue.js development by [pledging on Patreon](https://www.patreon.com/evanyou) (recurring, with perks for different tiers) or [donating on PayPal](https://www.paypal.me/evanyou) (one time).
+
+## Current Premium Sponsors:
 
-<a href="https://www.paypal.me/evanyou" target="_blank">
-  <img style="width:120px" src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png">
-  <span>Donate via PayPal (one time)</span>
-</a>
+### Platinum ($2000/mo)
 
-## Current premium sponsors:
+<p style="text-align: center;">
+  <a href="https://stdlib.com">
+    <img style="width:300px" src="/images/stdlib.png">
+  </a>
+</p>
 
-<p style="text-align: center; padding-top: 30px; margin-bottom: 0"><a href="http://www.thedifferenceengine.io/"><img src="/images/tde.png" style="width: 300px"></a></p>
+### 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:140px;top:1px">
+    <img src="/images/deepstream.png" style="width:140px">
+  </a><a href="https://jsfiddle.net">
     <img src="/images/jsfiddle.png">
   </a><a href="https://laravel.com">
     <img src="/images/laravel.png">
@@ -29,22 +32,19 @@
     <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.png">
+    <img src="/images/vuejobs.svg">
   </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><a href="https://famebroker.com" target="_blank" style="width:135px">
+    <img src="/images/famebroker.png" style="width:135px">
+  </a><a href="https://component.io" target="_blank" style="width:140px">
+    <img src="/images/component_io.png" style="width:140px">
   </a>
 </p>
 
-Vue.js is an MIT licensed open source project and completely free to use.
-However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support Vue.js development by [pledging on Patreon](https://www.patreon.com/evanyou) or [donating on PayPal](https://www.paypal.me/evanyou).
-
 If you run a business and are using Vue in a revenue-generating product, it makes business sense to sponsor Vue development: **it ensures the project that your product relies on stays healthy and actively maintained.** It can also help your exposure in the Vue community and makes it easier to attract Vue developers.
 
 If you are a business that is building core products using Vue.js, I am also open to conversations regarding custom sponsorship / consulting arrangements. [Get in touch on Twitter](https://twitter.com/youyuxi).

src/images/lifecycle.png

@@ -1,10 +1,10 @@
 ---
-type: api
+type: api (En)
 ---
 
 ## Configuration globale
 
-`Vue.config` est un objet contenant les configurations globales de Vue. Vous pouvez modifier les propriétés listées ci-dessous avant de mettre en place votre application :
+<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>`Vue.config` est un objet contenant les configurations globales de Vue. Vous pouvez modifier les propriétés listées ci-dessous avant de mettre en place votre application :</p>
 
 ### silent
 
@@ -108,24 +108,31 @@ 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 quotation marks
+    "media-play-pause" : 179,
     up: [38, 87]
   }
   ```
 
-  Définit des alias pour les touches du clavier avec `v-on`.
+  ```html
+  <input type="text" @keyup.media-play-pause="method">
+  ```
+
+  Définit des alias pour les touches avec `v-on`.
 
 ### performance
 
 > Nouveau en 2.2.0
 
 - **Type :** `boolean`
 
-- **Par défaut :** `false`
+- **Par défaut :** `false` (à partir de la 2.2.3)
 
 - **Utilisation :**
 
@@ -1051,7 +1058,12 @@ Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattach
     },
     props: {
       // cela permet d'utiliser la prop `value` à d'autres fins
-      value: String
+      value: String,
+      // utilise `checked` comme prop qui prend la place de `value`
+      checked: {
+        type: Number,
+        default: 0
+      }
     },
     // ...
   })
@@ -1661,9 +1673,10 @@ Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattach
   - `.{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.
-  - `.left` - (2.2.0) only trigger handler for left button mouse events.
-  - `.right` - (2.2.0) only trigger handler for right button mouse events.
-  - `.middle` - (2.2.0) only trigger handler for middle button mouse events.
+  - `.left` - (2.2.0+) only trigger handler for left button mouse events.
+  - `.right` - (2.2.0+) only trigger handler for right button mouse events.
+  - `.middle` - (2.2.0+) only trigger handler for middle button mouse events.
+  - `.passive` - (2.3.0+) attaches a DOM event with `{ passive: true }`.
 
 - **Utilisation :**
 
@@ -1733,7 +1746,8 @@ Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattach
 
 - **Modifiers:**
   - `.prop` - Bind as a DOM property instead of an attribute. ([what's the difference?](http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028))
-  - `.camel` - transform the kebab-case attribute name into camelCase. (supported since 2.1.0)
+  - `.camel` - (2.1.0+) transform the kebab-case attribute name into camelCase.
+  - `.sync` - (2.3.0+) a syntax sugar that expands into a `v-on` handler for updating the bound value.
 
 - **Utilisation :**
 
@@ -1775,6 +1789,9 @@ Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattach
   <!-- 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="$props"></child-component>
+
   <!-- XLink -->
   <svg><a :xlink:special="foo"></a></svg>
   ```
@@ -1790,6 +1807,7 @@ Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattach
 - **Voir aussi :**
   - [Class and Style Bindings](../guide/class-and-style.html)
   - [Components - Component Props](../guide/components.html#Props)
+  - [Components - `.sync` Modifier](../guide/components.html#sync-Modifier)
 
 ### v-model
 
@@ -1943,6 +1961,31 @@ Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattach
 
 - **Voir aussi :** [Named Slots](../guide/components.html#Named-Slots)
 
+### is
+
+- **Expects:** `string`
+
+  Used for [dynamic components](../guide/components.html#Dynamic-Components) and to work around [limitations of in-DOM templates](../guide/components.html#DOM-Template-Parsing-Caveats).
+
+  For example:
+
+  ``` html
+  <!-- component changes when currentView changes -->
+  <component v-bind:is="currentView"></component>
+
+  <!-- necessary because <my-row> would be invalid inside -->
+  <!-- a <table> element and so would be hoisted out      -->
+  <table>
+    <tr is="my-row"></tr>
+  </table>
+  ```
+
+  For detailed usage, follow the links in the description above.
+
+- **See also:**
+  - [Dynamic Components](../guide/components.html#Dynamic-Components)
+  - [DOM Template Parsing Caveats](../guide/components.html#DOM-Template-Parsing-Caveats)
+
 ## Built-In Components
 
 ### component

src/images/mvvm.png

@@ -0,0 +1,9 @@
+---
+title: Temps réel avec deepstreamHub
+type: examples
+order: 9
+---
+
+> Cet exemple utilise [deepstreamHub](https://deepstreamhub.com/) pour synchroniser les données en temps réel, émettre des évènements et faire de l'intéraction distante entre clients (vous pouvez l'ouvrir dans plusieurs fenêtres de navigateurs).
+
+<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/images/props-events.png

@@ -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/images/state.png

@@ -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/images/transition.png

@@ -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/menu/index.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/support-vuejs/index.md

@@ -191,4 +191,16 @@ La syntaxe tableau pour `v-bind:style` permet d'appliquer plusieurs objets de st
 
 ### Préfixage automatique
 
-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.
+Quand vous utilisez une propriété CSS qui nécessite un [préfixe vendeur](https://developer.mozilla.org/fr/docs/Glossaire/Pr%C3%A9fixe_Vendeur) dans `v-bind:style`, par exemple `transform`, Vue le détectera automatiquement, et ajoutera les préfixes appropriés aux styles appliqués.
+
+### Valeurs multiples
+
+> 2.3.0+
+
+Introduit avec la 2.3, vous pouvez fournir de multiples valeurs de préfixes à une propriété style, par exemple :
+
+``` html
+<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
+```
+
+This will only render the last value in the array which the browser supports. In this example, it will render `display: flex` for browsers that support the unprefixed version of flexbox.