From 3b0bbd1dfa9b1c5451d4827c42e4ed28f633cea3 Mon Sep 17 00:00:00 2001 From: Daniel Kelly Date: Fri, 11 Feb 2022 15:03:56 -0600 Subject: [PATCH] add Vue School links --- .vitepress/theme/components/VueSchoolLink.vue | 59 +++++++++++++++++++ .vitepress/theme/index.ts | 2 + src/guide/components/events.md | 4 ++ src/guide/components/props.md | 4 ++ src/guide/components/slots.md | 2 + src/guide/essentials/class-and-style.md | 8 +++ src/guide/essentials/computed.md | 8 +++ src/guide/essentials/conditional.md | 8 +++ src/guide/essentials/event-handling.md | 4 ++ src/guide/essentials/forms.md | 8 +++ src/guide/essentials/list.md | 8 +++ .../essentials/reactivity-fundamentals.md | 2 + src/guide/scaling-up/routing.md | 5 ++ 13 files changed, 122 insertions(+) create mode 100644 .vitepress/theme/components/VueSchoolLink.vue 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 d31e241fb0..6c72b112a7 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 +
+ +
+ +
+ +
+