diff --git a/.vitepress/theme/components/VueSchoolLink.vue b/.vitepress/theme/components/VueSchoolLink.vue
new file mode 100644
index 0000000000..fbb96aa06d
--- /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 72df241180..0072fce9ed 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 ad9326e9f0..82cb7e1afc 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 88b26f48e6..d11fcc1314 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 3ef2e92c54..7e7cba686a 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 373e18fb54..64085c14ba 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 0abd9f96b1..e4cab179ea 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 8f70c3c271..729fc91166 100644
--- a/src/guide/essentials/conditional.md
+++ b/src/guide/essentials/conditional.md
@@ -1,5 +1,13 @@
# Conditional Rendering
+
+
+
+
+
+
+
+