Merge pull request #4 from vuejs/master

Sync branch english-version

Author: mazipan

src/images/logo-vuemastery.svg

@@ -509,6 +509,15 @@ type: api
 
   A list/hash of attributes that are exposed to accept data from the parent component. It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.
 
+  With Object-based syntax, you can use following options:
+    - **type:** can be one of the following native constructors: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, any custom constructor function or an array of those. Will check if a prop has a given type, and will throw a warning if it doesn't. [More information](../guide/components-props.html#Prop-Types) on prop types.
+    - **default:** `any`
+    Specifies a default value for the prop. If the prop is not passed, this value will be used instead. Object or array defaults must be returned from a factory function.
+    - **required:** `Boolean`
+    Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.
+    - **validator:** `Function`
+    Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation [here](../guide/components-props.html#Prop-Validation).
+
 - **Example:**
 
   ``` js
@@ -535,7 +544,7 @@ type: api
   })
   ```
 
-- **See also:** [Props](../guide/components.html#Props)
+- **See also:** [Props](../guide/components-props.html)
 
 ### propsData
 

src/v2/api/index.md

@@ -298,7 +298,7 @@ created() {
 
 ## Alternative Patterns
 
-An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent.now.sh/guide/writing#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world.
+An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent-module.netlify.com/guide/writing/#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world.
 
 ## Wrap up
 

src/v2/cookbook/serverless-blog.md

@@ -0,0 +1,116 @@
+---
+title: Themes
+type: examples
+is_new: true
+order: 13
+---
+> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application. 
+
+{% raw %}
+<div id="themes-example" class="themes-grid">
+   <div v-for="product in products" :key="product.name" class="item-preview">
+     <a class="item-preview-img" :href="`https://www.creative-tim.com/product/${product.name}?affiliate_id=${affiliateId}`" rel="nofollow">
+     <img :src="`https://raw.githubusercontent.com/creativetimofficial/public-assets/master/${product.name}/${product.name}.jpg`" :alt="`${product.title} - ${product.description}`"></a>
+     <div class="item-preview-title-container">
+      <h3 :id="product.name" data-type="theme-product-title" class="item-preview-title" :class="{'free': product.free}">{{product.title}}</h3>
+      <b v-if="product.price" class="item-preview-price">{{product.price}}$</b>
+     </div>
+     <div class="item-preview-description">{{product.description}}</div>
+   </div>
+   <div class="see-more-container">
+    <a :href="`https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=${affiliateId}`"
+       class="button white see-more-link">
+       See More Themes
+    </a>
+   </div>
+</div>
+<script>
+new Vue({
+  el: '#themes-example',
+  data: {
+    affiliateId: 116187,
+    products: [
+      {
+        name: 'vue-argon-design-system',
+        title: 'Vue Argon Design System',
+        free: true,
+        description: 'Free Vue.js Design System'
+      },
+      {
+        name: 'vue-black-dashboard-pro',
+        title: 'Vue Black Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-paper-dashboard-2-pro',
+        title: 'Vue Paper Dashboard 2 Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-kit',
+        title: 'Vue Material Kit',
+        free: true,
+        description: 'Free Vue.js UI Kit'
+      },
+      {
+        name: 'vue-black-dashboard',
+        title: 'Vue Black Dashboard',
+        free: true,
+        description: 'Free Vue.js Admin Template'
+      },
+      {
+        name: 'vue-now-ui-kit-pro',
+        title: 'Vue Now UI Kit Pro',
+        free: false,
+        price: 79,
+        description: 'Premium Vue.js UI Kit'
+      },
+      {
+        name: 'vue-now-ui-dashboard-pro',
+        title: 'Vue Now UI Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-now-ui-kit',
+        title: 'Vue Now UI Kit',
+        free: true,
+        description: 'Free Vue.js UI Kit'
+      },
+      {
+        name: 'vue-light-bootstrap-dashboard-pro',
+        title: 'Vue Light Bootstrap Dashboard Pro',
+        free: false,
+        price: 49,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-dashboard-pro',
+        title: 'Vue Material Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-kit-pro',
+        title: 'Vue Material Kit Pro',
+        free: false,
+        price: 89,
+        description: 'Premium Vue.js UI Kit'
+      },
+      {
+        name: 'vue-light-bootstrap-dashboard',
+        title: 'Vue Light Bootstrap Dashboard',
+        free: true,
+        description: 'Free Vue.js Admin Template'
+      }
+    ]
+  }
+})
+</script>
+{% endraw %}

src/v2/examples/themes.md

@@ -41,7 +41,9 @@ props: {
   likes: Number,
   isPublished: Boolean,
   commentIds: Array,
-  author: Object
+  author: Object,
+  callback: Function,
+  contactsPromise: Promise // or any other constructor
 }
 ```
 

src/v2/guide/components-props.md

@@ -207,11 +207,15 @@ requireComponent.keys().forEach(fileName => {
   // Get PascalCase name of component
   const componentName = upperFirst(
     camelCase(
-      // Strip the leading `./` and extension from the filename
-      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
+      // Gets the file name regardless of folder depth
+      fileName
+        .split('/')
+        .pop()
+        .replace(/\.\w+$/, '')
     )
   )
 
+
   // Register component globally
   Vue.component(
     componentName,

src/v2/guide/components-registration.md

@@ -332,15 +332,15 @@ That means the value of `v-slot` can actually accept any valid JavaScript expres
 This can make the template much cleaner, especially when the slot provides many props. It also opens other possibilities, such as renaming props, e.g. `user` to `person`:
 
 ``` html
-<current-user v-slot="{ user: person }">>
+<current-user v-slot="{ user: person }">
   {{ person.firstName }}
 </current-user>
 ```
 
 You can even define fallbacks, to be used in case a slot prop is undefined:
 
 ``` html
-<current-user v-slot="{ user = { firstName: 'Guest' } }">>
+<current-user v-slot="{ user = { firstName: 'Guest' } }">
   {{ user.firstName }}
 </current-user>
 ```

src/v2/guide/components-slots.md

@@ -393,6 +393,8 @@ You may have noticed that Vue components are very similar to **Custom Elements**
 
 2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.
 
+Although Vue doesn't use custom elements internally, it has [great interoperability](https://custom-elements-everywhere.com/#vue) when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.
+
 ## Ready for More?
 
 We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!

src/v2/guide/index.md

@@ -142,7 +142,7 @@ new Vue({
 
 There are also other hooks which will be called at different stages of the instance's lifecycle, such as [`mounted`](../api/#mounted), [`updated`](../api/#updated), and [`destroyed`](../api/#destroyed). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it.
 
-<p class="tip">Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since arrow functions are bound to the parent context, `this` will not be the Vue instance as you'd expect, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.</p>
+<p class="tip">Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.</p>
 
 ## Lifecycle Diagram
 

src/v2/guide/instance.md

@@ -441,6 +441,8 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 
 ## `v-for` with `v-if`
 
+<p class="tip">Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](/v2/style-guide/#Avoid-v-if-with-v-for-essential) for details.</p>
+
 When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only _some_ items, like below:
 
 ``` html

src/v2/guide/list.md

@@ -154,7 +154,7 @@ Dynamic arguments are expected to evaluate to a string, with the exception of `n
 
 #### Dynamic Argument Expression Constraints
 
-<p class="tip">Dynamic argument expressions have some syntax constraints because certain characters are invalid inside HTML attribute names, such as spaces and quotes.</p>
+<p class="tip">Dynamic argument expressions have some syntax constraints because certain characters are invalid inside HTML attribute names, such as spaces and quotes. You also need to avoid uppercase keys when using in-DOM templates.</p>
 
 For example, the following is invalid:
 
@@ -165,6 +165,13 @@ For example, the following is invalid:
 
 The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.
 
+In addition, if you are using in-DOM templates (templates directly written in an HTML file), you have to be aware that browsers will coerce attribute names into lowercase:
+
+``` html
+<!-- This will be converted to v-bind:[someattr] in in-DOM templates. -->
+<a v-bind:[someAttr]="value"> ... </a>
+```
+
 ### Modifiers
 
 Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:

src/v2/guide/syntax.md

@@ -764,7 +764,7 @@ order: 803
     {
       name: 'James McGlasson',
       title: 'Head of Marketing Communications',
-      imageUrl: 'https://media.licdn.com/dms/image/C4E03AQHxi_fy33l5Mg/profile-displayphoto-shrink_800_800/0?e=1550707200&v=beta&t=6kPVnuYMxbxR_oAz3rdAeuDB-S8Om8e5W3zwbcH0dQI',
+      imageUrl: 'https://media.licdn.com/dms/image/C4E03AQHxi_fy33l5Mg/profile-displayphoto-shrink_800_800/0?e=1556150400&v=beta&t=KADJ_7nuWuYFPQaKtK7QuI96iC0gPKc198GZ-_dXr_0',
       city: 'Amsterdam, Netherlands',
       languages: ['en', 'nl', 'de'],
       work: {
@@ -797,9 +797,13 @@ order: 803
       title: 'Fox Tech Guru',
       city: 'Kyiv, Ukraine',
       languages: ['uk', 'ru', 'en'],
+      reposOfficial: [
+        'vuejs.org'
+      ],
       work: {
-        role: 'CTO',
-        org: 'Vue Vixens',
+        role: 'Senior Frontend Engineer',
+        org: 'GitLab',
+        orgUrl: 'https://gitlab.com/'
       },
       github: 'NataliaTepluhina',
       twitter: 'N_Tepluhina',

src/v2/guide/team.md

@@ -72,7 +72,8 @@ gold_sponsors:
   - url: 'https://webdock.io/en'
     img: webdock.png
     name: Webdock
-  - url: 'https://syncfusion.com/products/vue'
+  - url: >-
+      http://www.syncfusion.com/?utm_source=vuejs&utm_medium=list&utm_campaign=vuejsjslistcy19
     img: syncfusion.png
     name: SyncFusion
   - url: 'https://opteo.com/vue'

themes/vue/_config.yml

@@ -78,7 +78,6 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <%- partial('partials/vuemastery_banner.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>