From 143867d282eade8797c832be3c0d9788abf82ec9 Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:27:39 -0500 Subject: [PATCH 1/8] add link for computed properties lesson --- src/guide/computed.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/computed.md b/src/guide/computed.md index ab4bb2965b..487874eea0 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -2,6 +2,7 @@ ## 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, if we have an object with a nested array: ```js From 5384401f84afbdf9e9a275522f5a179d5879385e Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:29:03 -0500 Subject: [PATCH 2/8] add link for conditional rendering lesson --- src/guide/conditional.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/conditional.md b/src/guide/conditional.md index c35f1e2efb..03d98633c8 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,5 +1,6 @@ # Conditional Rendering +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. From 6c1c5382a6ea6ecafc4db401e79900fa5c7c551b Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:30:26 -0500 Subject: [PATCH 3/8] add link for data and methods lesson --- src/guide/data-methods.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md index 69c6a14c80..9227b7a06a 100644 --- a/src/guide/data-methods.md +++ b/src/guide/data-methods.md @@ -1,5 +1,6 @@ # Data Properties and Methods +Learn how to work with data and methods with a free Vue School lesson ## Data Properties The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance: From a3ab1973ff60b83827824b3ce7053a44d1a0750f Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:31:31 -0500 Subject: [PATCH 4/8] add link for event handling lesson --- src/guide/events.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/events.md b/src/guide/events.md index c39136024c..4cea8c1d64 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,5 +1,6 @@ # Event Handling +Learn how to handle events in a free Vue School lesson ## Listening to Events We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="methodName"` or with the shortcut, `@click="methodName"` From 4cdde79787cc94bd638ea2278a416655266f4b2b Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:32:27 -0500 Subject: [PATCH 5/8] added link for form input lesson --- src/guide/forms.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/forms.md b/src/guide/forms.md index 5eccb21c68..06a3a86bb0 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -1,5 +1,6 @@ # Form Input Bindings +Learn how to work with form inputs with a free Vue School lesson ## Basic Usage You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. From a9a1ec5db57649dc2c72afb294b284f3fb3b0fe9 Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:34:33 -0500 Subject: [PATCH 6/8] add link to devtools lesson --- src/guide/installation.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/installation.md b/src/guide/installation.md index 1b9296d590..6025baa31e 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -19,6 +19,8 @@ Detailed release notes for each version are available on [GitHub](https://github > Currently in Beta - Vuex and Router integration is still WIP +Learn how to install and use Vue Devtools in a free Vue School lesson + When using Vue, we recommend also installing the [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface. [Get the Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) From be07f8c949c746c5d261d357cbbf69ef72368017 Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Thu, 27 May 2021 13:35:25 -0500 Subject: [PATCH 7/8] add link for list rendering lesson --- src/guide/list.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/list.md b/src/guide/list.md index 34bc3fe3b7..dbde4c4730 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,5 +1,6 @@ # List Rendering +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: From 1cd4be81b1937997edba1dd053a503b5f6c00311 Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Fri, 28 May 2021 08:14:43 -0500 Subject: [PATCH 8/8] added line breaks after video lesson links --- src/guide/computed.md | 1 + src/guide/conditional.md | 1 + src/guide/data-methods.md | 1 + src/guide/events.md | 1 + src/guide/forms.md | 1 + src/guide/list.md | 1 + 6 files changed, 6 insertions(+) diff --git a/src/guide/computed.md b/src/guide/computed.md index 487874eea0..d3b1247df8 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -3,6 +3,7 @@ ## 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, if we have an object with a nested array: ```js diff --git a/src/guide/conditional.md b/src/guide/conditional.md index 03d98633c8..c39d94de1c 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,6 +1,7 @@ # Conditional Rendering 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/guide/data-methods.md b/src/guide/data-methods.md index 9227b7a06a..4806bb5f8a 100644 --- a/src/guide/data-methods.md +++ b/src/guide/data-methods.md @@ -1,6 +1,7 @@ # Data Properties and Methods Learn how to work with data and methods with a free Vue School lesson + ## Data Properties The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance: diff --git a/src/guide/events.md b/src/guide/events.md index 4cea8c1d64..8b7f81b289 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,6 +1,7 @@ # Event Handling Learn how to handle events in a free Vue School lesson + ## Listening to Events We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="methodName"` or with the shortcut, `@click="methodName"` diff --git a/src/guide/forms.md b/src/guide/forms.md index 06a3a86bb0..d32402cb2e 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -1,6 +1,7 @@ # Form Input Bindings Learn how to work with form inputs with a free Vue School lesson + ## Basic Usage You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. diff --git a/src/guide/list.md b/src/guide/list.md index dbde4c4730..8715c1b9c1 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,6 +1,7 @@ # List Rendering 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: