diff --git a/src/images/logo-vuemastery.svg b/src/images/logo-vuemastery.svg deleted file mode 100644 index b4ce163d48..0000000000 --- a/src/images/logo-vuemastery.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/v2/api/index.md b/src/v2/api/index.md index c9231f7c66..bf5b600a1b 100644 --- a/src/v2/api/index.md +++ b/src/v2/api/index.md @@ -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 diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index 7a62d3c72f..84f2a20861 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.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 diff --git a/src/v2/examples/themes.md b/src/v2/examples/themes.md new file mode 100644 index 0000000000..c360b566ac --- /dev/null +++ b/src/v2/examples/themes.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 %} +
+
+ + +
+

{{product.title}}

+ {{product.price}}$ +
+
{{product.description}}
+
+
+ + See More Themes + +
+
+ +{% endraw %} diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md index d89f2632f1..d4ccbc1b67 100644 --- a/src/v2/guide/components-props.md +++ b/src/v2/guide/components-props.md @@ -41,7 +41,9 @@ props: { likes: Number, isPublished: Boolean, commentIds: Array, - author: Object + author: Object, + callback: Function, + contactsPromise: Promise // or any other constructor } ``` diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index ec25f02607..8c4404aa35 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.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, diff --git a/src/v2/guide/components-slots.md b/src/v2/guide/components-slots.md index 76e672dbe2..6ba9bc2710 100644 --- a/src/v2/guide/components-slots.md +++ b/src/v2/guide/components-slots.md @@ -332,7 +332,7 @@ 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 -> + {{ person.firstName }} ``` @@ -340,7 +340,7 @@ This can make the template much cleaner, especially when the slot provides many You can even define fallbacks, to be used in case a slot prop is undefined: ``` html -> + {{ user.firstName }} ``` diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 9f81c29936..2445ace4c4 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.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! diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 826aa97d9c..268bab16d2 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.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. -

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`.

+

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`.

## Lifecycle Diagram diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index 38c76209d7..153a19bc86 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -441,6 +441,8 @@ Similar to template `v-if`, you can also use a `