diff --git a/.vitepress/theme/components/VueSchoolLink.vue b/.vitepress/theme/components/VueSchoolLink.vue
new file mode 100644
index 000000000..fbb96aa06
--- /dev/null
+++ b/.vitepress/theme/components/VueSchoolLink.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 72df24118..0072fce9e 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import { h, App } from 'vue'
import { VPTheme } from '@vue/theme'
import Banner from './components/Banner.vue'
import PreferenceSwitch from './components/PreferenceSwitch.vue'
+import VueSchoolLink from './components/VueSchoolLink.vue'
import {
preferComposition,
preferSFC,
@@ -25,5 +26,6 @@ export default Object.assign({}, VPTheme, {
app.provide('prefer-composition', preferComposition)
app.provide('prefer-sfc', preferSFC)
app.provide('filter-headers', filterHeadersByPreference)
+ app.component('VueSchoolLink', VueSchoolLink)
}
})
diff --git a/src/guide/components/events.md b/src/guide/components/events.md
index ad9326e9f..82cb7e1af 100644
--- a/src/guide/components/events.md
+++ b/src/guide/components/events.md
@@ -2,6 +2,10 @@
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
+
+
+
+
## Emitting and Listening to Events
A component can emit custom events directly in template expressions (e.g. in a `v-on` handler) using the built-in `$emit` function:
diff --git a/src/guide/components/props.md b/src/guide/components/props.md
index 88b26f48e..d11fcc131 100644
--- a/src/guide/components/props.md
+++ b/src/guide/components/props.md
@@ -2,6 +2,10 @@
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
+
+
+
+
## Props Declaration
Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in the next section).
diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md
index 0111cc9fe..21315645f 100644
--- a/src/guide/components/slots.md
+++ b/src/guide/components/slots.md
@@ -2,6 +2,8 @@
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
+
+
## Slot Content and Outlet
We have learned that components can accept props, which can be JavaScript values of any type. But how about template content? In some cases, we may want to pass a template fragment to a child component, and let the child component render the fragment within its own template.
diff --git a/src/guide/essentials/class-and-style.md b/src/guide/essentials/class-and-style.md
index 373e18fb5..64085c14b 100644
--- a/src/guide/essentials/class-and-style.md
+++ b/src/guide/essentials/class-and-style.md
@@ -4,6 +4,14 @@ A common need for data binding is manipulating an element's class list and its i
## Binding HTML Classes
+
+
+
+
+
+
+
+
### Binding to Objects
We can pass an object to `:class` (short for `v-bind:class`) to dynamically toggle classes:
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 0abd9f96b..e4cab179e 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -1,5 +1,13 @@
# Computed Properties
+
+
+
+
+
+
+
+
## Basic Example
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:
diff --git a/src/guide/essentials/conditional.md b/src/guide/essentials/conditional.md
index 8f70c3c27..729fc9116 100644
--- a/src/guide/essentials/conditional.md
+++ b/src/guide/essentials/conditional.md
@@ -1,5 +1,13 @@
# Conditional Rendering
+
+
+
+
+
+
+
+