Add links for free video content at Vue School (#2177)

Author: hootlex

src/v2/cookbook/form-validation.md

@@ -6,6 +6,8 @@ order: 3
 
 ## Base Example
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-form-validation-diy?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Form Validation Lesson">Watch a free lesson on Vue School</a></div>
+
 Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.
 
 Given a form of three fields, make two required. Let's look at the HTML first:

src/v2/guide/class-and-style.md

@@ -7,6 +7,7 @@ order: 6
 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
+<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-dynamic-classes?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Dynamic Classes Lesson">Watch a free video lesson on Vue School</a></div>
 
 ### Object Syntax
 

src/v2/guide/components-dynamic-async.md

@@ -201,6 +201,8 @@ Check out more details on `<keep-alive>` in the [API reference](../api/#keep-ali
 
 ## Async Components
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Async Components lesson">Watch a free video lesson on Vue School</a></div>
+
 In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
 
 ``` js

src/v2/guide/components-registration.md

@@ -6,6 +6,8 @@ order: 101
 
 > This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/global-vs-local-components?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Component Registration lesson">Watch a free video lesson on Vue School</a></div>
+
 ## Component Names
 
 When registering a component, it will always be given a name. For example, in the global registration we've seen so far:

src/v2/guide/components.md

@@ -4,6 +4,8 @@ type: guide
 order: 11
 ---
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vuejs-components-fundamentals?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Components Fundamentals Course">Watch a free video course on Vue School</a></div>
+
 ## Base Example
 
 Here's an example of a Vue component:

src/v2/guide/custom-directive.md

@@ -6,6 +6,8 @@ order: 302
 
 ## Intro
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/create-vuejs-directive?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Custom Directives lesson">Watch a free video lesson on Vue School</a></div>
+
 In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:
 
 {% raw %}

src/v2/guide/instance.md

@@ -123,6 +123,8 @@ In the future, you can consult the [API reference](../api/#Instance-Properties)
 
 ## Instance Lifecycle Hooks
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Lifecycle Hooks Lesson">Watch a free lesson on Vue School</a></div>
+
 Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
 
 For example, the [`created`](../api/#created) hook can be used to run code after an instance is created:

src/v2/guide/single-file-components.md

@@ -6,6 +6,8 @@ order: 401
 
 ## Introduction
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/introduction-to-single-file-components?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Single File Components lesson">Watch a free video lesson on Vue School</a></div>
+
 In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page.
 
 This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:

themes/vue/source/css/_scrimba.styl

@@ -1,4 +1,4 @@
-.scrimba
+.scrimba, .vueschool
   background-color #e7ecf3
   padding 1em 1.25em
   border-radius 2px