diff --git a/src/v2/guide/components-custom-events.md b/src/v2/guide/components-custom-events.md index a6432fa21e..1df316204a 100644 --- a/src/v2/guide/components-custom-events.md +++ b/src/v2/guide/components-custom-events.md @@ -6,6 +6,8 @@ order: 103 > This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components. +
Learn how to work with custom events in a free Vue School lesson
+ ## Event Names Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name: diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md index ec06468a05..493f4b8d56 100644 --- a/src/v2/guide/components-props.md +++ b/src/v2/guide/components-props.md @@ -6,6 +6,8 @@ order: 102 > This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components. +
Learn how component props work with a free lesson on Vue School
+ ## Prop Casing (camelCase vs kebab-case) HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents: diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index e207792b40..e76749811b 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -6,6 +6,8 @@ order: 5 ## Computed Properties +
Learn how computed properties work with a free lesson on Vue School
+ In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example: ``` html diff --git a/src/v2/guide/conditional.md b/src/v2/guide/conditional.md index b90c3cc15e..d667ae5d73 100644 --- a/src/v2/guide/conditional.md +++ b/src/v2/guide/conditional.md @@ -4,6 +4,8 @@ type: guide order: 7 --- +
Learn how conditional rendering works with a free lesson on Vue School
+ ## `v-if` 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. diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 3949117867..7fc8234694 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -4,6 +4,8 @@ type: guide order: 9 --- +
Learn how to handle events in a free Vue School lesson
+ ## Listening to Events We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered. diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index f79f833fc6..0f2e3aa3e8 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -4,6 +4,9 @@ type: guide order: 8 --- +
Learn how to render list with a free Vue School lesson
+ + ## Mapping an Array to Elements with `v-for` We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on: