Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	README.md
#	package.json
#	src/v2/api/index.md
#	src/v2/cookbook/adding-instance-properties.md
#	src/v2/cookbook/serverless-blog.md
#	src/v2/guide/components.md
#	src/v2/guide/render-function.md
#	src/v2/guide/state-management.md
#	src/v2/style-guide/index.md

Author: MachinisteWeb

_config.yml

@@ -187,4 +187,3 @@ alias:
   examples/svg.html: v2/examples/svg.html
   examples/todomvc.html: v2/examples/todomvc.html
   examples/tree-view.html: v2/examples/tree-view.html
-

package.json

@@ -2,27 +2,27 @@
   "name": "vuejs.org",
   "private": true,
   "hexo": {
-    "version": "3.4.4"
+    "version": "3.7.0"
   },
   "scripts": {
     "start": "hexo server",
     "build": "node pre-deploy.js && hexo clean && hexo generate",
     "deploy": "npm run build && hexo deploy"
   },
   "dependencies": {
-    "hexo": "^3.4.4",
+    "hexo": "^3.6.0",
     "hexo-deployer-git": "0.3.1",
     "hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git",
     "hexo-generator-archive": "^0.1.5",
     "hexo-generator-category": "^0.1.3",
     "hexo-generator-feed": "^1.2.2",
     "hexo-generator-index": "^0.2.1",
     "hexo-generator-tag": "^0.2.0",
-    "hexo-offline": "^0.2.2",
+    "hexo-offline": "^0.2.3",
     "hexo-renderer-ejs": "^0.3.1",
     "hexo-renderer-marked": "^0.3.0",
     "hexo-renderer-stylus": "^0.3.3",
-    "hexo-server": "^0.2.2",
-    "request": "^2.83.0"
+    "hexo-server": "^0.3.1",
+    "request": "^2.85.0"
   }
 }

src/v2/api/index.md

@@ -460,7 +460,11 @@ type: api
   })
   ```
 
-  <p class="tip">Notez que __vous ne devriez pas utiliser de fonctions fléchées pour la propriété `data`__ (exemple: `data: () => { return { a: this.maPropriete }}`). La raison est que les fonctions fléchées sont liées au contexte parent, donc `this` ne correspondra pas à l'instance de Vue et  `this.maPropriete` vaudra `undefined`.</p>
+  Notez que si vous utilisez la fonctions fléchées avec la propriété `data`, `this` ne sera plus l'instance du composant, mais vous pouvez toujours la récupérer en tant que premier argument de la fonction :
+
+  ```js
+  data: vm => ({ a: vm.myProp })
+  ```
 
 - **Voir aussi :** [Réactivité dans le détail](../guide/reactivity.html)
 
@@ -533,7 +537,13 @@ type: api
 
   Les propriétés calculées qui seront ajoutées à l'instance de Vue. Tous les accesseurs (« getters ») et mutateurs (« setters ») ont leur contexte `this` automatiquement lié à l'instance de Vue.
 
-  <p class="tip">Notez que __vous ne devriez pas utiliser de fonctions fléchées pour définir une propriété calculée__ (exemple: `aDouble: () => this.a * 2`). La raison est que les fonctions fléchées sont liées au contexte parent, donc `this` ne correspondra pas à l'instance de Vue et `this.a` vaudra `undefined`.</p>
+  Notez que si vous utilisez la fonctions fléchées avec la propriété `data`, `this` ne sera plus l'instance du composant, mais vous pouvez toujours la récupérer en tant que premier argument de la fonction :
+
+  ```js
+  computed: {
+    aDouble: vm => vm.a * 2
+  }
+  ```
 
   Les propriétés calculées sont mises en cache, et réévaluées uniquement lorsque leurs dépendances réactives changent. Notez que si une certaine dépendance est en dehors de la portée de l'instance (et donc non réactive), la propriété calculée ne sera __pas__ mise à jour.
 
@@ -1396,7 +1406,7 @@ type: api
 
 - **Détails :**
 
-  Un objet contenant les composants enfants ayant une référence `ref` enregistrée.
+  Un objet contenant des éléments du DOM et des composants, ayant des [attributs `ref`](#ref) enregistrée.
 
 - **Voir aussi :**
   - [Les refs des composants enfants](../guide/components.html#Les-refs-des-composants-enfants)
@@ -1859,21 +1869,18 @@ type: api
 
   Attache un écouteur d'évènement à l'élément. Le type d'évènement écouté est indiqué comme argument. L'expression peut être soit un nom de méthode, soit une ligne d'instruction, ou simplement omise si des modificateurs sont présents.
 
-  À partir de la 2.4.0+, `v-on` supporte aussi la liaison à un objet de paires évènement/écouteur sans argument. Notez que lorsque vous utilisez la syntaxe objet, elle ne supporte aucun modificateur.
-
-  Quand utilisé sur un élément HTML standard, il écoute uniquement les [**évènements natifs du DOM**](https://developer.mozilla.org/fr/docs/Web/Events). Quand utilisé sur un élément personnalisé de composant, il écoute également les **évènements personnalisés** émis depuis ce composant enfant.
+  Quand utilisé sur un élément standard, il écoute uniquement les [**évènements natifs du DOM**](https://developer.mozilla.org/fr/docs/Web/Events). Quand utilisé sur un élément personnalisé de composant, il écoute également les **évènements personnalisés** émis depuis ce composant enfant.
 
   Lorsque des évènements natifs du DOM sont écoutés, la méthode reçoit l'évènement natif comme unique argument. Si la valeur de la directive est une ligne d'instruction, l'instruction a accès à la propriété spéciale `$event` : `v-on:click="handle('ok', $event)"`.
 
+  À partir de la 2.4.0+, `v-on` supporte aussi la liaison à un objet de paires évènement/écouteur sans argument. Notez que lorsque vous utilisez la syntaxe objet, elle ne supporte aucun modificateur.
+
 - **Exemple :**
 
   ```html
   <!-- nom de méthode -->
   <button v-on:click="faireCeci"></button>
 
-  <!-- syntaxe objet (2.4.0+) -->
-  <button v-on="{ mousedown: faireCeci, mouseup: faireCela }"></button>
-
   <!-- ligne d'instruction -->
   <button v-on:click="faireCela('hello', $event)"></button>
 
@@ -1900,6 +1907,9 @@ type: api
 
   <!-- l'évènement click sera déclenché une seule fois maximum -->
   <button v-on:click.once="faireCeci"></button>
+
+  <!-- syntaxe objet (2.4.0+) -->
+  <button v-on="{ mousedown: faireCeci, mouseup: faireCela }"></button>
   ```
 
   Écouter des évènements personnalisés sur un composant enfant (le gestionnaire est appelé quand `mon-evenement` est émis depuis l'enfant):

src/v2/cookbook/adding-instance-properties.md

@@ -165,7 +165,7 @@ Si ce que vous voulez ajouter n'a rien à voir avec Vue spécifiquement, cela pe
 ```js
 var App = Object.freeze({
   name: 'Mon App',
-  description: '2.1.4',
+  version: '2.1.4',
   helpers: {
     // Ceci est une version purement fonctionnelle
     // de la méthode $reverseText décrite plus haut

src/v2/cookbook/form-validation.md

@@ -21,17 +21,17 @@ Given a form of three fields, make two required. Let's look at the HTML first:
   </p>
 
   <p>
-    <label for="name">Name<label>
+    <label for="name">Name</label>
     <input type="text" name="name" id="name" v-model="name">
   </p>
 
   <p>
-    <label for="age">Age<label>
+    <label for="age">Age</label>
     <input type="number" name="age" id="age" v-model="age" min="0">
   </p>
 
   <p>
-    <label for="movie">Favorite Movie<label>
+    <label for="movie">Favorite Movie</label>
     <select name="movie" id="movie" v-model="movie">
       <option>Star Wars</option>
       <option>Vanilla Sky</option>
@@ -93,17 +93,17 @@ For the second example, the second text field (age) was switched to email which
   </p>
 
   <p>
-    <label for="name">Name<label>
+    <label for="name">Name</label>
     <input type="text" name="name" id="name" v-model="name">
   </p>
 
   <p>
-    <label for="email">Email<label>
+    <label for="email">Email</label>
     <input type="email" name="email" id="email" v-model="email">
   </p>
 
   <p>
-    <label for="movie">Favorite Movie<label>
+    <label for="movie">Favorite Movie</label>
     <select name="movie" id="movie" v-model="movie">
       <option>Star Wars</option>
       <option>Vanilla Sky</option>

src/v2/cookbook/serverless-blog.md

@@ -4,7 +4,7 @@ type: cookbook
 order: 5
 ---
 
-<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right? What you're looking for a blog that's powered entirely by API's you can consume directly from your Vue.js application. This tutorial will teach you how to do just that, let's dive in!</p>
+<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right? What you're looking for is a blog that's powered entirely by API's you can consume directly from your Vue.js application. This tutorial will teach you how to do just that, let's dive in!</p>
 
 We're going to quickly build a CMS-powered blog with Vue.js. It uses [ButterCMS](https://buttercms.com/), an API-first CMS that lets you manage content using the ButterCMS dashboard and integrate our content API into your Vue.js app. You can use ButterCMS for new or existing Vue.js projects.
 

src/v2/cookbook/unit-testing-vue-components.md

@@ -162,7 +162,7 @@ describe('Foo', () => {
   // assert the error is rendered
   expect(wrapper.find('.error').exists()).toBeTruthy()
 
-  // update the `username` and assert error is longer rendered
+  // update the `username` and assert error is no longer rendered
   wrapper.setData({ username: 'Lachlan' })
   expect(wrapper.find('.error').exists()).toBeFalsy()
   })
@@ -178,7 +178,7 @@ The below example improves the test by:
 
 - only making one assertion per `it` block
 - having short, clear test descriptions
-- providing only the minimum data requires for the test
+- providing only the minimum data required for the test
 - refactoring duplicated logic (creating the `wrapper` and setting the `username` variable) into a factory function
 
 *Updated test*:

src/v2/cookbook/using-axios-to-consume-apis.md

@@ -124,7 +124,7 @@ new Vue({
       .catch(error => {
         console.log(error)
         this.errored = true
-      }).
+      })
       .finally(() => this.loading = false)
   }
 })
@@ -157,7 +157,7 @@ You can hit the rerun button on this pen to see the loading status briefly while
 <p data-height="300" data-theme-id="32763" data-slug-hash="6c01922c9af3883890fd7393e8147ec4" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Fourth Step Axios and Vue" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/6c01922c9af3883890fd7393e8147ec4/">Fourth Step Axios and Vue</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-This can be even futher improved with the use of components for different sections and more distinct error reporting, depending on the API you're using and the complexity of your application.
+This can be even further improved with the use of components for different sections and more distinct error reporting, depending on the API you're using and the complexity of your application.
 
 ## Alternative Patterns
 

src/v2/guide/components-custom-events.md

@@ -0,0 +1,168 @@
+---
+title: Custom Events
+type: guide
+order: 103
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Event Names
+
+Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
+
+```js
+this.$emit('myEvent')
+```
+
+Listening to the kebab-cased version will have no effect:
+
+```html
+<my-component v-on:my-event="doSomething"></my-component>
+```
+
+Unlike components and props, event names will never be used as variable or property names in JavaScript, so there's no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` -- making `myEvent` impossible to listen to.
+
+For these reasons, we recommend you **always use kebab-case for event names**.
+
+## Customizing Component `v-model`
+
+> New in 2.2.0+
+
+By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` attribute for a [different purpose](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value). Using the `model` option can avoid a conflict in such cases:
+
+```js
+Vue.component('base-checkbox', {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    checked: Boolean
+  },
+  template: `
+    <input
+      type="checkbox"
+      v-bind:checked="checked"
+      v-on:change="$emit('change', $event.target.checked)"
+    >
+  `
+})
+```
+
+Now when using `v-model` on this component:
+
+```js
+<base-checkbox v-model="lovingVue"></base-checkbox>
+```
+
+the value of `lovingVue` will be passed to the `checked` prop. The `lovingVue` property will then be updated when `<base-checkbox>` emits a `change` event with a new value.
+
+<p class="tip">Note that you still have to declare the <code>checked</code> prop in component's <code>props</code> option.</p>
+
+## Binding Native Events to Components
+
+There may be times when you want to listen directly to a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`:
+
+```html
+<base-input v-on:focus.native="onFocus"></base-input>
+```
+
+This can be useful sometimes, but it's not a good idea when you're trying to listen on a very specific element, like an `<input>`. For example, the `<base-input>` component above might refactor so that the root element is actually a `<label>` element:
+
+```html
+<label>
+  {{ label }}
+  <input
+    v-bind="$attrs"
+    v-bind:value="value"
+    v-on:input="$emit('input', $event.target.value)"
+  >
+</label>
+```
+
+In that case, the `.native` listener in the parent would silently break. There would be no errors, but the `onFocus` handler wouldn't be called when we expected it to.
+
+To solve this problem, Vue provides a `$listeners` property containing an object of listeners being used on the component. For example:
+
+```js
+{
+  focus: function (event) { /* ... */ }
+  input: function (value) { /* ... */ },
+}
+```
+
+Using the `$listeners` property, you can forward all event listeners on the component to a specific child element with `v-on="$listeners"`. For elements like `<input>`, that you also want to work with `v-model`, it's often useful to create a new computed property for listeners, like `inputListeners` below:
+
+```js
+Vue.component('base-input', {
+  inheritAttrs: false,
+  props: ['label', 'value'],
+  computed: {
+    inputListeners: function () {
+      var vm = this
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign({},
+        // We add all the listeners from the parent
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: function (event) {
+            vm.$emit('input', event.target.value)
+          }
+        }
+      )
+    }
+  },
+  template: `
+    <label>
+      {{ label }}
+      <input
+        v-bind="$attrs"
+        v-bind:value="value"
+        v-on="inputListeners"
+      >
+    </label>
+  `
+})
+```
+
+Now the `<base-input>` component is a **fully transparent wrapper**, meaning it can be used exactly like a normal `<input>` element: all the same attributes and listeners will work.
+
+## `.sync` Modifier
+
+> New in 2.3.0+
+
+In some cases, we may need "two-way binding" for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.
+
+That's why instead, we recommend emitting events in the pattern of `update:my-prop-name`. For example, in a hypothetical component with a `title` prop, we could communicate the intent of assigning a new value with:
+
+```js
+this.$emit('update:title', newTitle)
+```
+
+Then the parent can listen to that event and update a local data property, if it wants to. For example:
+
+```html
+<text-document
+  v-bind:title="doc.title"
+  v-on:update:title="doc.title = $event"
+></text-document>
+```
+
+For convenience, we offer a shorthand for this pattern with the `.sync` modifier:
+
+```html
+<text-document v-bind:title.sync="doc.title"></text-document>
+```
+
+The `.sync` modifier can also be used with `v-bind` when using an object to set multiple props at once:
+
+```html
+<text-document v-bind.sync="doc"></text-document>
+```
+
+This passes each property in the `doc` object (e.g. `title`) as an individual prop, then adds `v-on` update listeners for each one.
+
+<p class="tip">Using <code>v-bind.sync</code> with a literal object, such as in <code>v-bind.sync="{ title: doc.title }"</code>, will not work, because there are too many edge cases to consider in parsing a complex expression like this.</p>