diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index 0febb18f0f..1e56b50752 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -1,5 +1,7 @@ # Class and Style Bindings +[Watch a free video about class & style bindings on Vue Mastery](https://www.vuemastery.com/courses/intro-to-vue-3/class-and-style-binding-vue3) + 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 diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index 4696fd30b5..07dc96eb21 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -1,5 +1,7 @@ # Components Basics +[Watch a free video about component basics on Vue Mastery](https://www.vuemastery.com/courses/intro-to-vue-3/components-and-props-vue3) + ## Base Example Here's an example of a Vue component: diff --git a/src/guide/forms.md b/src/guide/forms.md index a4531a6178..cc353f8771 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -1,5 +1,7 @@ # Form Input Bindings +[Watch a free video about forms on Vue Mastery](https://www.vuemastery.com/courses/intro-to-vue-3/forms-and-v-model-vue3) + ## 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/instance.md b/src/guide/instance.md index fcdf03da31..0a0ab7a673 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -14,6 +14,8 @@ After the instance is created, we can _mount_ it, passing a container to `mount` Vue.createApp(/* options */).mount('#app') ``` +[Watch a free video on creating a Vue application Vue Mastery](https://www.vuemastery.com/courses/intro-to-vue-3/creating-the-vue-app-vue3) + Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our instance. When you create an instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/options-data.html). diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 242b089cfd..9a9a953cff 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -8,6 +8,8 @@ If you’d like to learn more about Vue before diving in, we