Merge branch 'master' into 2.6

Author: yyx990803

README.md

@@ -72,9 +72,9 @@ Russian translation is maintained by Translation Gang.
 
 ### Spanish
 
-Spanish translation is maintained by VueJS-ES.
+Spanish translation is maintained by [1950Labs](https://1950labs.com) and Vue.js Montevideo ([Leonel More](https://twitter.com/leonelmore), [Sebastian Camacho](https://twitter.com/sxcamacho), and [Diana Rodriguez](https://vue.beingadev.rocks).
 
-* Translation Repo - [/vuejs-es/vuejs.org](https://github.com/vuejs-es/vuejs.org)
+* Translation Repo - [/1950Labs/vuejs.org](https://github.com/1950Labs/vuejs.org)
 
 ### Vietnamese
 

src/images/vuetron-hierarchy.gif

@@ -1521,6 +1521,9 @@ type: api
   // function
   vm.$watch(
     function () {
+      // everytime the expression `this.a + this.b` yields a different result,
+      // the handler will be called. It's as if we were watching a computed
+      // property without defining the computed property itself
       return this.a + this.b
     },
     function (newVal, oldVal) {

src/v2/api/index.md

@@ -100,16 +100,6 @@ There are other methods of debugging, varying in complexity. The most popular an
 
 <p class="tip">Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.</p>
 
-### Vuetron
-
-[Vuetron](http://vuetron.io/) is a really nice project that extends some of the work that vue-devtools has done. In addition to the normal devtools workflow, you are able to:
-
-* Quickly view API Request/Response: if you're using the fetch API for requests, this event is displayed for any request sent. The expanded card displays the request data as well as the response data.
-* Subscribe to specific parts of your application’s state for faster debugging
-* Visualize component hierarchy, and an animation allows you to collapse or expand the tree for specific hierarchy views.
-
-![Vuetron Hierarchy](/images/vuetron-hierarchy.gif)
-
 ### Simple Debugger Statement
 
 The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done.

src/v2/cookbook/debugging-in-vscode.md

@@ -11,7 +11,7 @@ So you built your first Vue.js app using the amazing [Vue.js webpack template](h
 Let's start by creating a `Dockerfile` in the root folder of our project:
 
 ```docker
-FROM node:9.11.1-alpine
+FROM node:lts-alpine
 
 # install simple http server for serving static content
 RUN npm install -g http-server
@@ -63,15 +63,15 @@ Let's refactor our `Dockerfile` to use NGINX:
 
  ```docker
 # build stage
-FROM node:9.11.1-alpine as build-stage
+FROM node:lts-alpine as build-stage
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
 RUN npm run build
 
 # production stage
-FROM nginx:1.13.12-alpine as production-stage
+FROM nginx:stable-alpine as production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

src/v2/cookbook/dockerize-vuejs-app.md

@@ -45,8 +45,9 @@ export default {
 
 ```js
 import { shallowMount } from '@vue/test-utils'
+import Hello from './Hello.vue'
 
-test('Foo', () => {
+test('Hello', () => {
   // render the component
   const wrapper = shallowMount(Hello)
 
@@ -144,6 +145,7 @@ And our first attempt at test:
 
 ```js
 import { shallowMount } from '@vue/test-utils'
+import Foo from './Foo.vue'
 
 describe('Foo', () => {
   it('renders a message and responds correctly to user input', () => {

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

@@ -14,7 +14,7 @@ order: 12
 </div>
 {% endraw %}
 
-> [Live Demo](https://vue-hn.now.sh/)
+> [Live Demo](https://vue-hn.herokuapp.com/)
 > Note: the demo may need some spin up time if nobody has accessed it for a certain period.
 >
 > [[Source](https://github.com/vuejs/vue-hackernews-2.0)]

src/v2/examples/hackernews.md

@@ -268,7 +268,7 @@ Vue.component('blog-post', {
 
 Now, whenever a new property is added to `post` objects, it will automatically be available inside `<blog-post>`.
 
-## Sending Messages to Parents with Events
+## Listening to Child Components Events
 
 As we develop our `<blog-post>` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:
 
@@ -323,15 +323,7 @@ The problem is, this button doesn't do anything:
 </button>
 ```
 
-When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, Vue instances provide a custom events system to solve this problem. To emit an event to the parent, we can call the built-in [**`$emit`** method](../api/#vm-emit), passing the name of the event:
-
-```html
-<button v-on:click="$emit('enlarge-text')">
-  Enlarge text
-</button>
-```
-
-Then on our blog post, we can listen for this event with `v-on`, just as we would with a native DOM event:
+When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, Vue instances provide a custom events system to solve this problem. The parent can choose to listen to any event on the child component instance with `v-on`, just as we would with a native DOM event:
 
 ```html
 <blog-post
@@ -340,6 +332,16 @@ Then on our blog post, we can listen for this event with `v-on`, just as we woul
 ></blog-post>
 ```
 
+Then the child component can emit an event on itself by calling the built-in [**`$emit`** method](../api/#vm-emit), passing the name of the event:
+
+```html
+<button v-on:click="$emit('enlarge-text')">
+  Enlarge text
+</button>
+```
+
+Thanks to the `v-on:enlarge-text="postFontSize += 0.1"` listener, the parent will receive the event and update `postFontSize` value.
+
 {% raw %}
 <div id="blog-posts-events-demo" class="demo">
   <div :style="{ fontSize: postFontSize + 'em' }">

src/v2/guide/components.md

@@ -223,24 +223,28 @@ The `.passive` modifier is especially useful for improving performance on mobile
 
 ## Key Modifiers
 
-When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events:
+When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for `v-on` when listening for key events:
 
 ``` html
-<!-- only call `vm.submit()` when the `keyCode` is 13 -->
-<input v-on:keyup.13="submit">
+<!-- only call `vm.submit()` when the `key` is PageDown -->
+<input @keyup.page-down="onPageDown">
 ```
 
-Remembering all the `keyCode`s is a hassle, so Vue provides aliases for the most commonly used keys:
+In the above example, the handler will only be called if `$event.key` is equal to `'PageDown'`.
 
-``` html
-<!-- same as above -->
-<input v-on:keyup.enter="submit">
+You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.
+
+### Key Codes
+
+<p class="tip">The use of `keyCode` events [is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) and may not be supported in new browsers.</p>
 
-<!-- also works for shorthand -->
-<input @keyup.enter="submit">
+Using `keyCode` attributes is also permitted:
+
+``` html
+<input v-on:keyup.13="submit">
 ```
 
-Here's the full list of key modifier aliases:
+Vue provides aliases for the most commonly used key codes when necessary for legacy browser support:
 
 - `.enter`
 - `.tab`
@@ -252,27 +256,15 @@ Here's the full list of key modifier aliases:
 - `.left`
 - `.right`
 
+<p class="tip">A few keys (`.esc` and all arrow keys) have inconsistent `key` values in IE9, so these built-in aliases should be preferred if you need to support IE9.</p>
+
 You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object:
 
 ``` js
 // enable `v-on:keyup.f1`
 Vue.config.keyCodes.f1 = 112
 ```
 
-### Automatic Key Modifiers
-
-> New in 2.5.0+
-
-You can also directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case:
-
-``` html
-<input @keyup.page-down="onPageDown">
-```
-
-In the above example, the handler will only be called if `$event.key === 'PageDown'`.
-
-<p class="tip">A few keys (`.esc` and all arrow keys) have inconsistent `key` values in IE9, their built-in aliases should be preferred if you need to support IE9.</p>
-
 ## System Modifier Keys
 
 > New in 2.1.0+

src/v2/guide/events.md

@@ -151,7 +151,7 @@ rollup({
   // ...
   plugins: [
     alias({
-      'vue': 'vue/dist/vue.esm.js'
+      'vue': require.resolve('vue/dist/vue.esm.js')
     })
   ]
 })

src/v2/guide/installation.md

@@ -125,7 +125,7 @@ Since `$nextTick()` returns a promise, you can achieve the same as the above usi
 
 ``` js
   methods: {
-    async updateMessage: function () {
+    updateMessage: async function () {
       this.message = 'updated'
       console.log(this.$el.textContent) // => 'not updated'
       await this.$nextTick()

src/v2/guide/reactivity.md

@@ -480,7 +480,7 @@ Especially when the template version is so simple in comparison:
 </anchored-heading>
 ```
 
-That's why there's a [Babel plugin](https://github.com/vuejs/babel-plugin-transform-vue-jsx) to use JSX with Vue, getting us back to a syntax that's closer to templates:
+That's why there's a [Babel plugin](https://github.com/vuejs/jsx) to use JSX with Vue, getting us back to a syntax that's closer to templates:
 
 ``` js
 import AnchoredHeading from './AnchoredHeading.vue'
@@ -497,9 +497,9 @@ new Vue({
 })
 ```
 
-<p class="tip">Aliasing `createElement` to `h` is a common convention you'll see in the Vue ecosystem and is actually required for JSX. If `h` is not available in the scope, your app will throw an error.</p>
+<p class="tip">Aliasing `createElement` to `h` is a common convention you'll see in the Vue ecosystem and is actually required for JSX. Starting with [version 3.4.0](https://github.com/vuejs/babel-plugin-transform-vue-jsx#h-auto-injection) of the Babel plugin for Vue, we automatically inject `const h = this.$createElement` in any method and getter (not functions or arrow functions), declared in ES2015 syntax that has JSX, so you can drop the `(h)` parameter. With prior versions of the plugin, your app would throw an error if `h` was not available in the scope.</p>
 
-For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage).
+For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/jsx#installation).
 
 ## Functional Components
 

src/v2/guide/render-function.md

@@ -11,3 +11,7 @@ We have created a standalone guide for creating server-rendered Vue applications
 ## Nuxt.js
 
 Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: [Nuxt.js](https://nuxtjs.org/). Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try.
+
+## Quasar Framework SSR + PWA
+
+[Quasar Framework](https://quasar-framework.org/) will generate an SSR app (with optional PWA handoff) that leverages its best-in-class build system, sensible configuration and developer extensibility to make designing and building your idea a breeze. With over one hundred specific "Material Design 2.0"-compliant components, you can decide which ones to execute on the server, which are available in the browser - and even manage the `<meta>` tags of your site. Quasar is a node.js and webpack based development environment that supercharges and streamlines rapid development of SPA, PWA, SSR, Electron and Cordova apps - all from one codebase.