Merge branch 'master' of https://github.com/vuejs/vuejs.org into vuejs-master

Author: Triloworld

.github/pull_request_template.md

@@ -1,3 +1,3 @@
 Note
 ====
-We're currently in the process of migrating Vue's documentation to v3. To ensure smooth progress, only PR's that fix critical bugs and/or misinformation will be accepted. If yours is not one of them, consider [creating an issue](https://github.com/vuejs/vuejs.org/issues/new) instead and we will label it as `post-3.0` for later tackling.
+This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the v3 doc repo: https://github.com/vuejs/docs-next.

README.md

@@ -1,5 +1,7 @@
 # vuejs.org
 
+> Important: This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the [v3 doc repo](https://github.com/vuejs/docs-next).
+
 Niniejsza strona została zbudowana w oparciu o [hexo](http://hexo.io/). Zawartość strony zapisywana jest w formacie Markdown w plikach umieszczonych w `src`. Pull requesty są mile widziane!
 
 ## Pisanie

src/v2/api/index.md

@@ -1059,8 +1059,6 @@ type: api
 
 - **Details:**
 
-  <p class="tip">`provide` and `inject` are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code.</p>
-
   This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React's context feature.
 
   The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support `Symbol` and `Reflect.ownKeys`.
@@ -1384,10 +1382,14 @@ type: api
 
 - **Read only**
 
+- **Reactive?** No
+
 - **Details:**
 
   Used to programmatically access content [distributed by slots](../guide/components.html#Content-Distribution-with-Slots). Each [named slot](../guide/components.html#Named-Slots) has its own corresponding property (e.g. the contents of `v-slot:foo` will be found at `vm.$slots.foo`). The `default` property contains either nodes not included in a named slot or contents of `v-slot:default`.
 
+  Please note that slots are **not** reactive. If you need a component to re-render based on changes to data passed to a slot, we suggest considering a different strategy that relies on a reactive instance option, such as `props` or `data`.
+
   **Note:** `v-slot:foo` is supported in v2.6+. For older versions, you can use the [deprecated syntax](../guide/components-slots.html#Deprecated-Syntax).
 
   Accessing `vm.$slots` is most useful when writing a component with a [render function](../guide/render-function.html).

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

@@ -58,7 +58,7 @@ new Vue({
 })
 ```
 
-It would be `"My App"`, then `"The name of some other app"`, because `this.appName` is overwritten ([sort of](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch5.md)) by `data` when the instance is created. We scope instance properties with `$` to avoid this. You can even use your own convention if you'd like, such as `$_appName` or `ΩappName`, to prevent even conflicts with plugins or future features.
+It would be `"My App"`, then `"The name of some other app"`, because `this.appName` is overwritten ([sort of](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch5.md)) by `data` when the instance is created. We scope instance properties with `$` to avoid this. You can even use your own convention if you'd like, such as `$_appName` or `ΩappName`, to prevent even conflicts with plugins or future features.
 
 ## Real-World Example: Replacing Vue Resource with Axios
 

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

@@ -121,7 +121,7 @@ So, delivering our Vue.js app as a Docker image helps reducing, if not removing
 
 ### Effects of Continuous Delivery
 
-By leveraging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters).
+By leveraging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matter).
 
 So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence.
 

src/v2/guide/comparison.md

@@ -111,7 +111,7 @@ React is renowned for its steep learning curve. Before you can really get starte
 While Vue scales up just as well as React, it also scales down just as well as jQuery. That's right - to get started, all you have to do is drop a single script tag into the page:
 
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 ```
 
 Then you can start writing Vue code and even ship the minified version to production without feeling guilty or having to worry about performance problems.

src/v2/guide/components-dynamic-async.md

@@ -106,6 +106,7 @@ new Vue({
   background: #f0f0f0;
   margin-bottom: -1px;
   margin-right: -1px;
+  overflow-anchor: none;
 }
 .dynamic-component-demo-tab-button:hover {
   background: #e0e0e0;

src/v2/guide/components-props.md

@@ -347,6 +347,7 @@ This pattern allows you to use base components more like raw HTML elements, with
 
 ```html
 <base-input
+  label="Username:"
   v-model="username"
   required
   placeholder="Enter your username"

src/v2/guide/index.md

@@ -24,14 +24,14 @@ The easiest way to try out Vue.js is using the [Hello World example](https://cod
 
 ``` html
 <!-- development version, includes helpful console warnings -->
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
 or:
 
 ``` html
 <!-- production version, optimized for size and speed -->
-<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 ```
 
 The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.

src/v2/guide/installation.md

@@ -41,8 +41,8 @@ Pobierz i uwzględnij tag script. `Vue` zostanie zarejestrowane jako zmienna glo
 
 Aby zacząć prototypowanie lub naukę, możesz skorzystać z najnowszej wersji za pomocą:
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+``` html
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 ```
 
 W produkcji, zalecamy użycie określonego numeru wersji i kompilacji, aby uniknąć niespodziewanych błędów spowodowanych nowszą wersją:

src/v2/guide/instance.md

@@ -24,10 +24,10 @@ A Vue application consists of a **root Vue instance** created with `new Vue`, op
 Root Instance
 └─ TodoList
    ├─ TodoItem
-   │  ├─ DeleteTodoButton
-   │  └─ EditTodoButton
+   │  ├─ TodoButtonDelete
+   │  └─ TodoButtonEdit
    └─ TodoListFooter
-      ├─ ClearTodosButton
+      ├─ TodosButtonClear
       └─ TodoListStatistics
 ```
 

src/v2/guide/syntax.md

@@ -98,7 +98,7 @@ These expressions will be evaluated as JavaScript in the data scope of the owner
 {{ if (ok) { return message } }}
 ```
 
-<p class="tip">Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.</p>
+<p class="tip">Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9) such as `Math` and `Date`. You should not attempt to access user-defined globals in template expressions.</p>
 
 ## Directives
 
@@ -167,7 +167,7 @@ Dynamic argument expressions have some syntax constraints because certain charac
 
 The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.
 
-When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
+When using in-DOM templates (i.e., templates written directly in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
 
 ``` html
 <!--

src/v2/guide/team.md

@@ -412,19 +412,19 @@ order: 803
       languages: ['hi', 'en'],
       work: {
         role: 'Software Engineer',
-        org: 'Myntra',
-        orgUrl: 'https://www.myntra.com/'
+        org: 'Grammarly',
+        orgUrl: 'https://grammarly.com/'
       },
       github: 'znck',
       twitter: 'znck0',
       reposOfficial: [
         'rollup-plugin-vue', 'vue-issue-helper'
       ],
       reposPersonal: [
-        'keynote', 'bootstrap-for-vue', 'vue-interop'
+        'vue-developer-experience', 'prop-types', 'grammarly'
       ],
       links: [
-        'https://znck.me', 'https://www.codementor.io/znck'
+        'https://znck.me'
       ]
     },
     {
@@ -795,6 +795,7 @@ order: 803
         role: 'Organizer',
         org: 'VueConf US'
       },
+      imageUrl:'https://pbs.twimg.com/profile_images/1541624512/profile-pic-09-11-2011_400x400.png',
       twitter: 'prpatel',
       links: [
         'https://us.vuejs.org/'
@@ -809,6 +810,7 @@ order: 803
         role: 'Organizer',
         org: 'VueConf US'
       },
+      imageUrl:'https://pbs.twimg.com/profile_images/916531463905992706/MNvTkO5K_400x400.jpg',
       twitter: 'vincentmayers',
       links: [
         'https://us.vuejs.org/'
@@ -823,6 +825,7 @@ order: 803
         role: 'Creator',
         org: 'Vue.js Amsterdam'
       },
+      imageUrl: 'https://pbs.twimg.com/profile_images/1123492769299877888/aviXE_M5_400x400.jpg',
       twitter: 'lukevscostas',
       linkedin: 'luke-kenneth-thomas-578b3916a',
       links: [
@@ -838,6 +841,7 @@ order: 803
         role: 'Event Manager',
         org: 'Vue.js Amsterdam'
       },
+      imageUrl:'https://pbs.twimg.com/profile_images/1110510517951627269/LDzDyd4N_400x400.jpg',
       twitter: 'josgerards88',
       linkedin: 'josgerards',
       links: [
@@ -1201,12 +1205,12 @@ order: 803
       github: 'filrak',
       twitter: 'filrakowski',
       work: {
-        role: 'Co-founder of Vue Storefront',
-        org: 'Divante',
-        orgUrl: 'https://divante.co/'
+        role: 'Co-founder & CTO',
+        org: 'Vue Storefront',
+        orgUrl: 'https://vuestorefront.io'
       },
       reposPersonal: [
-        'DivanteLtd/vue-storefront', 'DivanteLtd/storefront-ui'
+        'vuestorefront/vue-storefront', 'vuestorefront/storefront-ui'
       ],
       links: [
         'https://vuestorefront.io',

src/v2/guide/testing.md

@@ -4,8 +4,6 @@ type: guide
 order: 402
 ---
 
-# Testing
-
 ## Introduction
 
 When it comes to building reliable applications, tests can play a critical role in an individual or team's ability to build new features, refactor code, fix bugs, etc. While there are many schools of thought with testing, there are three categories often discussed in the context of web applications:
@@ -64,7 +62,7 @@ Mocha is a JavaScript test framework that is focused on being flexible. Because
 
 ### Introduction
 
-To test most Vue components, they must be mounted to the DOM (either virtual or real) in order to fully assert that they are working. This is another framework-agnostic concept. As a result, component testing frameworks were created to give users the ability to do this in a reliable way while also providing Vue-specific conveniences such as integrations for Vuex, Vue Router, and other Vue plugins.
+To test most Vue components, they must be mounted to the DOM (either virtual or real) in order to fully assert that they are working. This is another framework-agnostic concept. As a result, component testing frameworks were created to give users the ability to do this reliably while also providing Vue-specific conveniences such as integrations for Vuex, Vue Router, and other Vue plugins.
 
 ### Choosing Your Framework
 
@@ -76,7 +74,7 @@ It should be no surprise that one of the first criteria is that a component test
 
 #### First-class error reporting
 
-When tests fail, it is critical that your component testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, they should also provides context for why a test fails, e.g., what is expected vs what was received.
+When tests fail, it is critical that your component testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, they should also provide context for why a test fails, e.g., what is expected vs what was received.
 
 ### Recommendations
 
@@ -116,9 +114,7 @@ While end-to-end (E2E) testing on the web has gained a negative reputation for u
 
 One of the primary benefits that end-to-end (E2E) testing is known for is its ability to test your application across multiple browsers. While it may seem desirable to have 100% cross-browser coverage, it is important to note that cross browser testing has diminishing returns on a team's resources due the additional time and machine power required to run them consistently. As a result, it is important to be mindful of this trade-off when choosing the amount of cross-browser testing your application needs.
 
-::: tip
-A recent development in for catching browser-specific issues is using application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for browsers that are not as commonly used (e.g., < IE11, older Safari versions, etc.).
-:::
+<p class="tip">A recent development in E2E for catching browser-specific issues is using application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for browsers that are not as commonly used (e.g., < IE11, older Safari versions, etc.).</p>
 
 #### Faster feedback loops
 

src/v2/guide/typescript.md

@@ -4,13 +4,13 @@ type: guide
 order: 403
 ---
 
-> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support. 
+> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.
 
 ## Official Declaration in NPM Packages
 
 A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue ships with [official type declarations](https://github.com/vuejs/vue/tree/dev/types) for [TypeScript](https://www.typescriptlang.org/) - not only in Vue core, but also for [vue-router](https://github.com/vuejs/vue-router/tree/dev/types) and [vuex](https://github.com/vuejs/vuex/tree/dev/types) as well.
 
-Since these are [published on NPM](https://cdn.jsdelivr.net/npm/vue/types/), and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don't need any additional tooling to use TypeScript with Vue.
+Since these are [published on NPM](https://cdn.jsdelivr.net/npm/vue@2/types/), and the latest TypeScript knows how to resolve type declarations in NPM packages, this means when installed via NPM, you don't need any additional tooling to use TypeScript with Vue.
 
 ## Recommended Configuration
 
@@ -195,7 +195,7 @@ If you find type inference or member completion isn't working, annotating certai
 ```ts
 import Vue, { PropType } from 'vue'
 
-interface ComplexMessage { 
+interface ComplexMessage {
   title: string,
   okMessage: string,
   cancelMessage: string
@@ -204,7 +204,7 @@ const Component = Vue.extend({
   props: {
     name: String,
     success: { type: String },
-    callback: { 
+    callback: {
       type: Function as PropType<() => void>
     },
     message: {

src/v2/style-guide/index.md

@@ -45,7 +45,7 @@ Some features of Vue exist to accommodate rare edge cases or smoother migrations
 
 **Component names should always be multi-word, except for root `App` components, and built-in components provided by Vue, such as `<transition>` or `<component>`.**
 
-This [prevents conflicts](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.
+This [prevents conflicts](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.
 
 {% raw %}<div class="style-example example-bad">{% endraw %}
 #### Bad