From bf24d3ca8c4bd3913255f7113d57acda455dc3e7 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 13:52:19 +0100 Subject: [PATCH 1/8] add link for Class Binding lesson --- src/guide/class-and-style.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index e1fec4bcf7..4aabc38266 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -3,6 +3,7 @@ A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays. ## Binding HTML Classes +Watch a free video lesson on Vue School ### Object Syntax From 464f7fec3be859056ff891d8afe4f881d8cda89f Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 14:02:01 +0100 Subject: [PATCH 2/8] add link for Event Handling lesson --- src/guide/events.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/events.md b/src/guide/events.md index 7d9e2d5701..ba7c52d18a 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,5 +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"` From e41423d14aaf45b484ae7c530cb7b89d86828fb6 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 14:05:22 +0100 Subject: [PATCH 3/8] Add link for Computed Properties lesson --- src/guide/computed.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/computed.md b/src/guide/computed.md index ab4bb2965b..d3b1247df8 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -2,6 +2,8 @@ ## 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 bcd32412f43f1a1474352d789bff064c15e9a3c4 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 14:07:41 +0100 Subject: [PATCH 4/8] Add link for Conditional Rendering lesson --- src/guide/conditional.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/conditional.md b/src/guide/conditional.md index c35f1e2efb..c39d94de1c 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,5 +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. From f1dbd708be0733618f205e8ff4c24d860a497f42 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 14:08:59 +0100 Subject: [PATCH 5/8] Add link for List Rendering lesson --- src/guide/list.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/list.md b/src/guide/list.md index e21714896c..b46ad634f2 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,5 +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: From e8e3d7da28b300c207ae1e23635df6162bd2d10f Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 14:15:03 +0100 Subject: [PATCH 6/8] Add link to Methods lesson --- src/guide/data-methods.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md index 69c6a14c80..4806bb5f8a 100644 --- a/src/guide/data-methods.md +++ b/src/guide/data-methods.md @@ -1,5 +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: From d7fca3db124cd457bfe8d5adaed2030c08743a4e Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 26 Mar 2021 14:15:19 +0100 Subject: [PATCH 7/8] Add link to Form Input lesson --- src/guide/forms.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/forms.md b/src/guide/forms.md index 7eabf9826f..34dca0be19 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -1,5 +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. From d307d345fa1eab23839eb21a413057cd1f563d22 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Wed, 28 Apr 2021 19:30:13 +0200 Subject: [PATCH 8/8] Add link to Using Vue Devtools with Vue.js 3 lesson --- src/guide/installation.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/guide/installation.md b/src/guide/installation.md index 5949c9ebc8..88f6494808 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -18,6 +18,8 @@ Detailed release notes for each version are available on [GitHub](https://github ## Vue Devtools > 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.