Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	src/v2/api/index.md
#	src/v2/guide/components.md
#	src/v2/guide/custom-directive.md
#	src/v2/guide/list.md
#	src/v2/guide/syntax.md
#	src/v2/guide/transitioning-state.md
#	src/v2/guide/typescript.md
#	themes/vue/layout/partials/language_dropdown.ejs

Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>

Author: MachinisteWeb

src/v2/api/index.md

@@ -670,11 +670,11 @@ if (version === 2) {
     Une alternative aux templates en chaîne de caractères vous permettant d'exploiter toute la puissance programmatique de JavaScript. La fonction de rendu `render` reçoit une méthode `createElement` comme premier argument servant à créer des `VNode`s.
 
     Si le composant est un composant fonctionnel, la fonction `render` recevra aussi un argument supplémentaire `context`, qui donne accès aux données contextuelles puisque les composants fonctionnels sont sans instance.
-    
+
     <p class="tip">La fonction `render` a la priorité par rapport à la fonction de rendu compilée à partir de l'option `template`, ou par rapport au template HTML de l'élément d'ancrage dans le DOM qui est spécifié par l'option `el`.</p>
 
   - **Voir aussi :**
-    - [Fonctions de Rendu](../guide/render-function)
+    - [Fonctions de Rendu](../guide/render-function.html)
 
 ### renderError
 
@@ -702,7 +702,7 @@ if (version === 2) {
     ```
 
   - **Voir aussi ::**
-    - [Fonctions de Rendu](../guide/render-function)
+    - [Fonctions de Rendu](../guide/render-function.html)
 
 
 <p class="tip">Tous les hooks du cycle de vie ont automatiquement leur contexte `this` rattaché à l'instance, afin que vous puissiez accéder aux données, propriétés calculées et méthodes. Cela signifie que __vous ne devriez pas utiliser une fonction fléchée pour définir une méthode du cycle de vie__  (p. ex. `created: () => this.fetchTodos()`). La raison est que les fonctions fléchées utilisent le contexte parent, donc `this` ne sera pas l'instance de Vue comme vous pouvez vous y attendre et `this.fetchTodos` sera `undefined`.</p>

src/v2/guide/components.md

@@ -501,14 +501,14 @@ Voici un exemple :
 
 ``` js
 Vue.component('button-counter', {
-  template: '<button v-on:click="increment">{{ counter }}</button>',
+  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
   data: function () {
     return {
       counter: 0
     }
   },
   methods: {
-    increment: function () {
+    incrementCounter: function () {
       this.counter += 1
       this.$emit('increment')
     }
@@ -536,14 +536,14 @@ new Vue({
 </div>
 <script>
 Vue.component('button-counter', {
-  template: '<button v-on:click="increment">{{ counter }}</button>',
+  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
   data: function () {
     return {
       counter: 0
     }
   },
   methods: {
-    increment: function () {
+    incrementCounter: function () {
       this.counter += 1
       this.$emit('increment')
     }

src/v2/guide/custom-directive.md

@@ -61,9 +61,9 @@ Un objet de définition de directive peut fournir plusieurs fonctions de hook (t
 
 - `inserted`: appelée quand l'élément lié a été inséré dans son nœud parent (cela garantit uniquement sa présence dans le nœud parent, mais pas nécessairement dans le document principal).
 
-- `update`: appelée après que le composant conteneur ait été mis à jour, __mais possiblement avant que ses enfants aient été mis à jour__. La valeur de la directive peut ou pas avoir changé, mais vous pouvez ignorer les mises à jour inutiles en comparant les valeurs actuelles et anciennes de la liaison (voir plus bas les arguments de hook).
+- `update`: appelée après que le composant conteneur VNode ait été mis à jour, __mais possiblement avant que ses enfants aient été mis à jour__. La valeur de la directive peut ou pas avoir changé, mais vous pouvez ignorer les mises à jour inutiles en comparant les valeurs actuelles et anciennes de la liaison (voir plus bas les arguments de hook).
 
-- `componentUpdated`: appelée après que le composant conteneur __et ses enfants__ aient été mis à jour.
+- `componentUpdated`: appelée après que le composant conteneur VNode __et les VNode de ses enfants__ aient été mis à jour.
 
 - `unbind`: appelée uniquement une fois, quand la directive est déliée de l'élément.
 

src/v2/guide/list.md

@@ -249,8 +249,8 @@ Voici un exemple complet d'une simple liste de tâches :
     <li
       is="todo-item"
       v-for="(todo, index) in todos"
-      v-bind:key="index"
-      v-bind:title="todo"
+      v-bind:key="todo.id"
+      v-bind:title="todo.title"
       v-on:remove="todos.splice(index, 1)"
     ></li>
   </ul>
@@ -273,22 +273,35 @@ new Vue({
   data: {
     newTodoText: '',
     todos: [
-      'Faire la vaisselle',
-      'Sortir les poubelles',
-      'Tondre la pelouse'
-    ]
+      {
+        id: 1,
+        title: 'Faire la vaisselle',
+      },
+      {
+        id: 2,
+        title: 'Sortir les poubelles',
+      },
+      {
+        id: 3,
+        title: 'Tondre la pelouse'
+      }
+    ],
+    nextTodoId: 4
   },
   methods: {
     addNewTodo: function () {
-      this.todos.push(this.newTodoText)
+      this.todos.push({
+        id: this.nextTodoId++,
+        title: this.newTodoText
+      })
       this.newTodoText = ''
     }
   }
 })
 ```
 
 {% raw %}
-<div id="todo-list-example" class="demo">
+<div id="todo-list-example">
   <input
     v-model="newTodoText"
     v-on:keyup.enter="addNewTodo"
@@ -298,8 +311,8 @@ new Vue({
     <li
       is="todo-item"
       v-for="(todo, index) in todos"
-      v-bind:key="index"
-      v-bind:title="todo"
+      v-bind:key="todo.id"
+      v-bind:title="todo.title"
       v-on:remove="todos.splice(index, 1)"
     ></li>
   </ul>
@@ -314,19 +327,33 @@ Vue.component('todo-item', {
   ',
   props: ['title']
 })
+
 new Vue({
   el: '#todo-list-example',
   data: {
     newTodoText: '',
     todos: [
-      'Faire la vaisselle',
-      'Sortir les poubelles',
-      'Tondre la pelouse'
-    ]
+      {
+        id: 1,
+        title: 'Faire la vaisselle',
+      },
+      {
+        id: 2,
+        title: 'Sortir les poubelles',
+      },
+      {
+        id: 3,
+        title: 'Tondre la pelouse'
+      }
+    ],
+    nextTodoId: 4
   },
   methods: {
     addNewTodo: function () {
-      this.todos.push(this.newTodoText)
+      this.todos.push({
+        id: this.nextTodoId++,
+        title: this.newTodoText
+      })
       this.newTodoText = ''
     }
   }

src/v2/guide/syntax.md

@@ -132,7 +132,7 @@ Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer
 
 <p class="tip">Les filtres de Vue 2.x peuvent être seulement utilisés à l'intérieur des interpolations de moustaches et des expressions de `v-bind` (ces dernières étant supportées depuis la 2.1.0+) car les filtres ont été conçus à la base dans le but de transformer du texte. Pour des cas plus complexes de transformation de données dans d'autres directives, vous devriez utiliser les [propriétés calculées](computed.html) à la place.</p>
 
-La fonction de filtre reçoit toujours la valeur de l'expression comme premier argument.
+La fonction de filtre reçoit toujours la valeur de l'expression (le résultat de la chaîne) comme premier argument. Dans cet exemple, la fonction de filtre `capitalize` va recevoir la valeur de `message` dans son argument.
 
 ``` js
 new Vue({
@@ -153,19 +153,21 @@ Les filtres peuvent être chaînés :
 {{ message | filterA | filterB }}
 ```
 
+Dans ce cas, `filterA`, définie avec un seul argument, va recevoir la valeur de `message`. Puis la fonction `filterB` va être appelée avec le résultat de `filterA` passé dans `filterB` en tant que simple argument.
+
 Les filtres sont des fonctions JavaScript et peuvent donc recevoir des arguments :
 
 ``` html
 {{ message | filterA('arg1', arg2) }}
 ```
 
-Ici la chaîne de caractères `'arg1'` sera passée au filtre en tant que second argument, et la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument.
+Ici `filterA` est définie comme une fonction prenant trois arguments. La valeur de `message` va être passée en premier argument. La chaîne de caractères `'arg1'` sera passée au filtre `filterA` en tant que second argument, et la valeur de l'expression `arg2` sera évaluée et passée en tant que troisième argument.
 
 ## Abréviations
 
 Le préfixe `v-` sert d'indicateur visuel pour identifier les attributs spécifiques à Vue dans vos templates. C'est pratique lorsque vous utilisez Vue.js pour appliquer des comportements dynamiques sur un balisage existant, mais peut sembler verbeux pour des directives utilisées fréquemment. Par ailleurs, le besoin d'un préfixe `v-`devient moins important quand vous développez une [application monopage](https://fr.wikipedia.org/wiki/Application_web_monopage) où Vue.js gère tous les templates. C'est pourquoi Vue.js fournit des abréviations pour deux des directives les plus utilisées, `v-bind` et `v-on`:
 
-### Abréviation pour `v-bind` 
+### Abréviation pour `v-bind`
 
 ``` html
 <!-- syntaxe complète -->

src/v2/guide/team.md

@@ -872,6 +872,7 @@ order: 31
             var language = languageNameFor[languageCode]
             if (
               languageCode !== 'en' &&
+              preferredLanguageCode &&
               languageCode === preferredLanguageCode.slice(0, 2)
             ) {
               return (

src/v2/guide/transitioning-state.md

@@ -140,11 +140,11 @@ new Vue({
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween(this.tweenedColor)
         .to(this.color, 750)
         .start()
-      
+
       animate()
     }
   },
@@ -216,11 +216,11 @@ new Vue({
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween(this.tweenedColor)
         .to(this.color, 750)
         .start()
-      
+
       animate()
     }
   },
@@ -442,14 +442,14 @@ Vue.component('animated-integer', {
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween({ tweeningValue: startValue })
         .to({ tweeningValue: endValue }, 500)
         .onUpdate(function () {
           vm.tweeningValue = this.tweeningValue.toFixed(0)
         })
         .start()
-      
+
       animate()
     }
   }
@@ -512,14 +512,14 @@ Vue.component('animated-integer', {
           requestAnimationFrame(animate)
         }
       }
-      
+
       new TWEEN.Tween({ tweeningValue: startValue })
         .to({ tweeningValue: endValue }, 500)
         .onUpdate(function () {
           vm.tweeningValue = this.tweeningValue.toFixed(0)
         })
         .start()
-      
+
       animate()
     }
   }
@@ -539,4 +539,15 @@ new Vue({
 </script>
 {% endraw %}
 
-Dans les composants enfants, nous pouvons utiliser n'importe quelle combinaison de stratégies de transition qui ont été abordées dans cette page, ainsi que celles offertes par le [système intégré de transition](transitions.html) de Vue. En utilisant les deux, il existe très peu de limites à ce qui peut être accompli.
+<p>Dans les composants enfants, nous pouvons utiliser n'importe quelle combinaison de stratégies de transition qui ont été abordées dans cette page, ainsi que celles offertes par le [système intégré de transition](transitions.html) de Vue. En utilisant les deux, il existe très peu de limites à ce qui peut être accompli.</p><p class="tip">**La partie suivante est 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>
+
+## Bringing Designs to Life
+
+To animate, by one definition, means to bring to life. Unfortunately, when designers create icons, logos, and mascots, they're usually delivered as images or static SVGs. So although GitHub's octocat, Twitter's bird, and many other logos resemble living creatures, they don't really seem alive.
+
+Vue can help. Since SVGs are just data, we only need examples of what these creatures look like when excited, thinking, or alarmed. Then Vue can help transition between these states, making your welcome pages, loading indicators, and notifications more emotionally compelling.
+
+Sarah Drasner demonstrates this in the demo below, using a combination of timed and interactivity-driven state changes:
+
+<p data-height="265" data-theme-id="light" data-slug-hash="YZBGNp" data-default-tab="result" data-user="sdras" data-embed-version="2" data-pen-title="Vue-controlled Wall-E" class="codepen">See the Pen <a href="https://codepen.io/sdras/pen/YZBGNp/">Vue-controlled Wall-E</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

src/v2/guide/typescript.md

@@ -136,4 +136,64 @@ export default class MyComponent extends Vue {
 }
 ```
 
-Avec cette syntaxe alternative, nos définitions de composant ne sont pas seulement plus courtes, mais TypeScript peut aussi connaître les types de `message` et `onClick` avec des interfaces de déclarations explicites. Cette stratégie peut même vous permettre de gérer des types pour les propriétés calculées, les hooks de cycle de vie et les fonctions de rendu. Pour une utilisation plus détaillée, référez-vous à [la documentation de vue-class-component](https://github.com/vuejs/vue-class-component#vue-class-component).
+<p>Avec cette syntaxe alternative, nos définitions de composant ne sont pas seulement plus courtes, mais TypeScript peut aussi connaître les types de `message` et `onClick` avec des interfaces de déclarations explicites. Cette stratégie peut même vous permettre de gérer des types pour les propriétés calculées, les hooks de cycle de vie et les fonctions de rendu. Pour une utilisation plus détaillée, référez-vous à [la documentation de vue-class-component](https://github.com/vuejs/vue-class-component#vue-class-component).</p><p class="tip">**La partie suivante est 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>
+
+## Declaring Types of Vue Plugins
+
+Plugins may add to Vue's global/instance properties and component options. In these cases, type declarations are needed to make plugins compile in TypeScript. Fortunately, there's a TypeScript feature to augment existing types called [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation).
+
+For example, to declare an instance property `$myProperty` with type `string`:
+
+``` ts
+// 1. Make sure to import 'vue' before declaring augmented types
+import Vue from 'vue'
+
+// 2. Specify a file with the types you want to augment
+//    Vue has the constructor type in types/vue.d.ts
+declare module 'vue/types/vue' {
+  // 3. Declare augmentation for Vue
+  interface Vue {
+    $myProperty: string
+  }
+}
+```
+
+After including the above code as a declaration file (like `my-property.d.ts`) in your project, you can use `$myProperty` on a Vue instance.
+
+```ts
+var vm = new Vue()
+console.log(vm.$myProperty) // This will be successfully compiled
+```
+
+You can also declare additional global properties and component options:
+
+```ts
+import Vue from 'vue'
+
+declare module 'vue/types/vue' {
+  // Global properties can be declared
+  // by using `namespace` instead of `interface`
+  namespace Vue {
+    const $myGlobal: string
+  }
+}
+
+// ComponentOptions is declared in types/options.d.ts
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    myOption?: string
+  }
+}
+```
+
+The above declarations allow the following code to be compiled:
+
+```ts
+// Global property
+console.log(Vue.$myGlobal)
+
+// Additional component option
+var vm = new Vue({
+  myOption: 'Hello'
+})
+```

themes/vue/layout/partials/language_dropdown.ejs

@@ -1,11 +1,11 @@
 <li class="nav-dropdown-container language">
   <a class="nav-link">Traductions</a><span class="arrow"></span>
   <ul class="nav-dropdown">
-    <li><a href="https://cn.vuejs.org/" class="nav-link" target="_blank">中文</a></li>
-    <li><a href="https://jp.vuejs.org/" class="nav-link" target="_blank">日本語</a></li>
-    <li><a href="https://kr.vuejs.org/" class="nav-link" target="_blank">한국어</a></li>
-    <li><a href="https://vuejs.org/" class="nav-link" target="_blank">English</a></li>
-    <li><a href="https://br.vuejs.org/" class="nav-link" target="_blank">Português</a></li>
-    <li><a href="https://ru.vuejs.org/" class="nav-link" target="_blank">Русский</a></li>
+    <li><a href="https://cn.vuejs.org/<%- page.path %>" class="nav-link" target="_blank">中文</a></li>
+    <li><a href="https://jp.vuejs.org/<%- page.path %>" class="nav-link" target="_blank">日本語</a></li>
+    <li><a href="https://kr.vuejs.org/<%- page.path %>" class="nav-link" target="_blank">한국어</a></li>
+    <li><a href="https://vuejs.org/<%- page.path %>" class="nav-link" target="_blank">English</a></li>
+    <li><a href="https://br.vuejs.org/<%- page.path %>" class="nav-link" target="_blank">Português</a></li>
+    <li><a href="https://ru.vuejs.org/<%- page.path %>" class="nav-link" target="_blank">Русский</a></li>
   </ul>
 </li>