Merge pull request #2 from vuejs/master

Sync 21-02-2019

Author: mazipan

assets/why-vue/arabic.js.srt

@@ -698,7 +698,7 @@ type: api
 
 ### el
 
-- **Type:** `string | HTMLElement`
+- **Type:** `string | Element`
 
 - **Restriction:** only respected in instance creation via `new`.
 
@@ -1311,7 +1311,7 @@ type: api
 
 ### vm.$el
 
-- **Type:** `HTMLElement`
+- **Type:** `Element`
 
 - **Read only**
 
@@ -2642,7 +2642,7 @@ Used to denote a `<template>` element as a scoped slot.
   </keep-alive>
   ```
 
-<p class="tip">`<keep-alive>` does not work with functional components because they do not have instances to be cached.</p>
+  <p class="tip">`<keep-alive>` does not work with functional components because they do not have instances to be cached.</p>
 
 - **See also:** [Dynamic Components - keep-alive](../guide/components.html#keep-alive)
 

src/images/logo-vuemastery.svg

@@ -57,7 +57,7 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
       "webRoot": "${workspaceFolder}/src",
       "breakOnLoad": true,
       "sourceMapPathOverrides": {
-        "webpack:///src/*": "${webRoot}/*"
+        "webpack:///./src/*": "${webRoot}/*"
       }
     },
     {

src/v2/api/index.md

@@ -6,4 +6,4 @@ order: 3
 
 > This is an example of creating a reusable grid component and using it with external data.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/xkkbfL3L/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

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

@@ -17,6 +17,7 @@ this.$emit('myEvent')
 Listening to the kebab-cased version will have no effect:
 
 ```html
+<!-- Won't work -->
 <my-component v-on:my-event="doSomething"></my-component>
 ```
 

src/v2/examples/grid-component.md

@@ -10,9 +10,9 @@ order: 105
 
 Earlier, we used the `is` attribute to switch between components in a tabbed interface:
 
-```html
+{% codeblock lang:html %}
 <component v-bind:is="currentTabComponent"></component>
-```
+{% endcodeblock %}
 
 When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little:
 

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

@@ -331,6 +331,8 @@ When the `inline-template` special attribute is present on a child component, th
 </my-component>
 ```
 
+Your inline template needs to be defined inside the DOM element to which Vue is attached.
+
 <p class="tip">However, <code>inline-template</code> makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the <code>template</code> option or in a <code>&lt;template&gt;</code> element in a <code>.vue</code> file.</p>
 
 ### X-Templates
@@ -349,6 +351,8 @@ Vue.component('hello-world', {
 })
 ```
 
+Your x-template needs to be defined outside the DOM element to which Vue is attached.
+
 <p class="tip">These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.</p>
 
 ## Controlling Updates

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

@@ -188,7 +188,7 @@ To specify prop validations, you can provide an object with validation requireme
 ``` js
 Vue.component('my-component', {
   props: {
-    // Basic type check (`null` matches any type)
+    // Basic type check (`null` and `undefined` values will pass any type validation)
     propA: Number,
     // Multiple possible types
     propB: [String, Number],

src/v2/guide/components-edge-cases.md

@@ -82,7 +82,7 @@ As a rule, remember that:
 
 ## Fallback Content
 
-There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be be rendered only when no content is provided. For example, in a `<submit-button>` component:
+There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. For example, in a `<submit-button>` component:
 
 ```html
 <button type="submit">
@@ -225,7 +225,7 @@ Note that **`v-slot` can only be added to a `<template>`** (with [one exception]
 
 ## Scoped Slots
 
-> Updated in 2.6.0+. [See here](#Deprecated-Syntax) for the deprecated syntax using the `slot-props` attribute.
+> Updated in 2.6.0+. [See here](#Deprecated-Syntax) for the deprecated syntax using the `slot-scope` attribute.
 
 Sometimes, it's useful for slot content to have access to data only available in the child component. For example, imagine a `<current-user>` component with the following template:
 
@@ -363,7 +363,7 @@ You can even define fallbacks, to be used in case a slot prop is undefined:
 
 > New in 2.6.0+
 
-Similar to `v-on` and `v-bind`, `v-slot` also has a shorthand, replacing everything before the argument (`v-slot:`) with the special symbol `#`. For example, `v-slot:header` and be rewritten as `#header`:
+Similar to `v-on` and `v-bind`, `v-slot` also has a shorthand, replacing everything before the argument (`v-slot:`) with the special symbol `#`. For example, `v-slot:header` can be rewritten as `#header`:
 
 ```html
 <base-layout>

src/v2/guide/components-props.md

@@ -28,9 +28,9 @@ Components are reusable Vue instances with a name: in this case, `<button-counte
 </div>
 ```
 
-```js
+{% codeblock lang:js %}
 new Vue({ el: '#components-demo' })
-```
+{% endcodeblock %}
 
 {% raw %}
 <div id="components-demo" class="demo">

src/v2/guide/components-slots.md

@@ -6,26 +6,17 @@ order: 7
 
 ## `v-if`
 
-In string templates, for example [Handlebars](https://handlebarsjs.com/), we would write a conditional block like this:
+The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
 
 ``` html
-<!-- Handlebars template -->
-{{#if ok}}
-  <h1>Yes</h1>
-{{/if}}
-```
-
-In Vue, we use the `v-if` directive to achieve the same:
-
-``` html
-<h1 v-if="ok">Yes</h1>
+<h1 v-if="awesome">Vue is awesome!</h1>
 ```
 
 It is also possible to add an "else block" with `v-else`:
 
 ``` html
-<h1 v-if="ok">Yes</h1>
-<h1 v-else>No</h1>
+<h1 v-if="awesome">Vue is awesome!</h1>
+<h1 v-else>Oh no 😢</h1>
 ```
 
 ### Conditional Groups with `v-if` on `<template>`

src/v2/guide/components.md

@@ -10,6 +10,11 @@ You can use the `v-model` directive to create two-way data bindings on form inpu
 
 <p class="tip">`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component.</p>
 
+`v-model` internally uses different properties and emits different events for different input elements:
+- text and textarea elements use `value` property and `input` event;
+- checkboxes and radiobuttons use `checked` property and `change` event;
+- select fields use `value` as a prop and `change` as an event.
+
 <p class="tip" id="vmodel-ime-tip">For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.</p>
 
 ### Text

src/v2/guide/conditional.md

@@ -211,9 +211,9 @@ to a definition like below in your `routes` configuration:
 
 If you need multiple aliases, you can also use an array syntax:
 
-``` js
+{% codeblock lang:js %}
 alias: ['/manage', '/administer', '/administrate']
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">

src/v2/guide/forms.md

@@ -210,15 +210,15 @@ The implicitly assigned `$index` and `$key` variables have been removed in favor
 
 `track-by` has been replaced with `key`, which works like any other attribute: without the `v-bind:` or `:` prefix, it is treated as a literal string. In most cases, you'd want to use a dynamic binding which expects a full expression instead of a key. For example, in place of:
 
-``` html
+{% codeblock lang:html %}
 <div v-for="item in items" track-by="id">
-```
+{% endcodeblock %}
 
 You would now write:
 
-``` html
+{% codeblock lang:html %}
 <div v-for="item in items" v-bind:key="item.id">
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -400,9 +400,9 @@ For enumerated attributes, in addition to the falsy values above, the string `"f
 
 When used on a component, `v-on` now only listens to custom events `$emit`ted by that component. To listen for a native DOM event on the root element, you can use the `.native` modifier. For example:
 
-``` html
+{% codeblock lang:html %}
 <my-component v-on:click.native="doSomething"></my-component>
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -602,9 +602,9 @@ As you can see, `v-model`'s two-way binding doesn't make sense here. Setting `st
 
 Instead, you should use an array of __objects__ so that `v-model` can update the field on the object. For example:
 
-``` html
+{% codeblock lang:html %}
 <input v-for="obj in objects" v-model="obj.str">
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -709,7 +709,7 @@ The `.literal` modifier has been removed, as the same can be easily achieved by
 
 For example, you can update:
 
-``` js
+``` html
 <p v-my-directive.literal="foo bar baz"></p>
 ```
 
@@ -990,9 +990,9 @@ computed: {
 
 You can even order by multiple columns:
 
-``` js
+{% codeblock lang:js %}
 _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -1070,9 +1070,9 @@ function pluralizeKnife (count) {
 
 For a very naive implementation, you could do something like this:
 
-``` js
+{% codeblock lang:js %}
 '$' + price.toFixed(2)
-```
+{% endcodeblock %}
 
 In many cases though, you'll still run into strange behavior (e.g. `0.035.toFixed(2)` rounds up to `0.04`, but `0.045` rounds down to `0.04`). To work around these issues, you can use the [`accounting`](http://openexchangerates.github.io/accounting.js/) library to more reliably format currencies.
 
@@ -1365,9 +1365,9 @@ Instead, retrieve reactive data directly.
 
 Use the native DOM API:
 
-``` js
+{% codeblock lang:js %}
 myElement.appendChild(vm.$el)
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -1380,9 +1380,9 @@ myElement.appendChild(vm.$el)
 
 Use the native DOM API:
 
-``` js
+{% codeblock lang:js %}
 myElement.parentNode.insertBefore(vm.$el, myElement)
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -1395,15 +1395,15 @@ myElement.parentNode.insertBefore(vm.$el, myElement)
 
 Use the native DOM API:
 
-``` js
+{% codeblock lang:js %}
 myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)
-```
+{% endcodeblock %}
 
 Or if `myElement` is the last child:
 
-``` js
+{% codeblock lang:js %}
 myElement.parentNode.appendChild(vm.$el)
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">
@@ -1416,9 +1416,9 @@ myElement.parentNode.appendChild(vm.$el)
 
 Use the native DOM API:
 
-``` js
+{% codeblock lang:js %}
 vm.$el.remove()
-```
+{% endcodeblock %}
 
 {% raw %}
 <div class="upgrade-path">

src/v2/guide/migration-vue-router.md

@@ -1068,13 +1068,15 @@ order: 803
       city: 'Washington, DC, USA',
       languages: ['en', 'zh'],
       work: {
-        role: 'Full Stack Engineer',
+        role: 'Senior Frontend Engineer',
         org: 'GitLab (Meltano)',
       },
+      reposOfficial: [
+        'vuejs/events'
+      ],
       github: 'bencodezen',
       twitter: 'bencodezen',
       links: [
-        'https://www.vuemeetups.org',
         'https://bencodezen.io/'
       ]
     },

src/v2/guide/migration.md

@@ -425,8 +425,8 @@ Vue.component('animated-integer', {
 
       new TWEEN.Tween({ tweeningValue: startValue })
         .to({ tweeningValue: endValue }, 500)
-        .onUpdate(function (object) {
-          vm.tweeningValue = object.tweeningValue.toFixed(0)
+        .onUpdate(function () {
+          vm.tweeningValue = this.tweeningValue.toFixed(0)
         })
         .start()
 

src/v2/guide/team.md

@@ -1215,9 +1215,9 @@ props: {
 }
 ```
 
-``` html
+{% codeblock lang:html %}
 <WelcomeMessage greetingText="hi"/>
-```
+{% endcodeblock %}
 {% raw %}</div>{% endraw %}
 
 {% raw %}<div class="style-example example-good">{% endraw %}
@@ -1229,9 +1229,9 @@ props: {
 }
 ```
 
-``` html
+{% codeblock lang:html %}
 <WelcomeMessage greeting-text="hi"/>
-```
+{% endcodeblock %}
 {% raw %}</div>{% endraw %}