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