Merge pull request #150 from vuejs/docs-video

docs: add migration videoLesson

Author: Jinjiang

package.json

@@ -5,6 +5,7 @@
     "vuepress": "^1.3.0"
   },
   "scripts": {
+    "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src"
   },

src/.vuepress/components/VideoLesson.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="video-lesson">
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot></slot>
+    </a>
+  </section>
+</template>
+
+<style lang="scss">
+.video-lesson {
+  display: flex;
+  align-items: center;
+  background-color: #e7ecf3;
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  color: #486491;
+  position: relative;
+  margin: 24px 0;
+
+  a {
+    color: #486491;
+    position: relative;
+    padding-left: 16px;
+  }
+
+  &::before {
+    content: '\f144';
+    font-family: 'FontAwesome';
+    font-size: 2em;
+    display: inline-block;
+    color: #73abfe;
+    vertical-align: middle;
+  }
+}
+</style>

src/.vuepress/styles/index.styl

@@ -125,31 +125,6 @@
   }
 }
 
-.scrimba,
-.vueschool {
-  background-color: #e7ecf3;
-  padding: 1em 1.25em;
-  border-radius: 2px;
-  color: #486491;
-  position: relative;
-  margin: 24px 0;
-
-  a {
-    color: #486491;
-    position: relative;
-    padding-left :16px;
-  }
-
-  &::before {
-    content: "\f144";
-    font-family: 'FontAwesome';
-    font-size: 2em;
-    display: inline-block;
-    color: #73abfe;
-    vertical-align: middle;
-  }
-}
-
 .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
   font-size: inherit;
   cursor: pointer!important;

src/guide/component-custom-events.md

@@ -23,6 +23,8 @@ this.$emit('myEvent')
 
 ## 定义自定义事件
 
+<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">在 Vue School 上观看关于定义自定义事件的免费视频。</VideoLesson>
+
 可以通过 `emits` 选项在组件上定义已发出的事件。
 
 ```js

src/guide/composition-api-introduction.md

@@ -6,6 +6,8 @@
 在阅读文档之前，你应该已经熟悉了这两个 [Vue 基础](introduction.md) 和[创建组件](component-basics.md)。
 :::
 
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api" title="Learn how Composition API works in depth with Vue Mastery">在 Vue Mastery 上观看关于组合 API 的免费视频。</VideoLesson>
+
 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。
 
 假设在我们的应用程序中，我们有一个视图来显示某个用户的仓库列表。除此之外，我们还希望应用搜索和筛选功能。处理此视图的组件可能如下所示：
@@ -67,6 +69,9 @@ export default {
 
 ### `setup` 组件选项
 
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Learn how setup works with Vue Mastery">观看 Vue Mastery 上的免费 setup 视频。</VideoLesson>
+
+
 新的 `setup` 组件选项在**创建组件之前**执行，一旦 `props` 被解析，并充当合成 API 的入口点。
 
 :::warning

src/guide/reactivity.md

@@ -2,6 +2,8 @@
 
 现在是时候深入了！Vue 最独特的特性之一，是其非侵入性的响应性系统。数据模型是被代理的 JavaScript 对象。而当你修改它们时，视图会进行更新。这让状态管理非常简单直观，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应性系统的底层的细节。
 
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity" title="Learn how how reactivity works in depth with Vue Mastery">在 Vue Mastery 上免费观看关于深入响应性原理的视频。</VideoLesson>
+
 ## 什么是响应性
 
 这个术语在程序设计中经常被提及，但这是什么意思呢？响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。人们通常展示的典型例子，是一份 excel 电子表格 (一个非常好的例子)。