Skip to content

Commit 05c75f6

Browse files
add Vue School links (vuejs#1546)
1 parent bfdad76 commit 05c75f6

File tree

13 files changed

+122
-0
lines changed

13 files changed

+122
-0
lines changed
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="vueschool">
3+
<a
4+
:href="`${href}?friend=vuejs`"
5+
target="_blank"
6+
rel="sponsored noopener"
7+
:title="title"
8+
>
9+
<slot>Watch a free video lesson on Vue School</slot>
10+
</a>
11+
</div>
12+
</template>
13+
<script>
14+
export default {
15+
props: {
16+
href: { type: String, required: true },
17+
title: { type: String, required: true },
18+
},
19+
}
20+
</script>
21+
<style scoped>
22+
.vueschool {
23+
margin: 28px 0;
24+
background-color: var(--vt-c-bg-soft);
25+
padding: 1em 1.25em;
26+
border-radius: 2px;
27+
position: relative;
28+
display: flex;
29+
border-radius: 8px;
30+
}
31+
.vueschool a {
32+
color: var(--c-text);
33+
position: relative;
34+
padding-left: 36px;
35+
}
36+
.vueschool a:before {
37+
content: '';
38+
position: absolute;
39+
display: block;
40+
width: 30px;
41+
height: 30px;
42+
top: calc(50% - 15px);
43+
left: -4px;
44+
border-radius: 50%;
45+
background-color: #73abfe;
46+
}
47+
.vueschool a:after {
48+
content: '';
49+
position: absolute;
50+
display: block;
51+
width: 0;
52+
height: 0;
53+
top: calc(50% - 5px);
54+
left: 8px;
55+
border-top: 5px solid transparent;
56+
border-bottom: 5px solid transparent;
57+
border-left: 8px solid #fff;
58+
}
59+
</style>

.vitepress/theme/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { h, App } from 'vue'
33
import { VPTheme } from '@vue/theme'
44
import Banner from './components/Banner.vue'
55
import PreferenceSwitch from './components/PreferenceSwitch.vue'
6+
import VueSchoolLink from './components/VueSchoolLink.vue'
67
import {
78
preferComposition,
89
preferSFC,
@@ -25,5 +26,6 @@ export default Object.assign({}, VPTheme, {
2526
app.provide('prefer-composition', preferComposition)
2627
app.provide('prefer-sfc', preferSFC)
2728
app.provide('filter-headers', filterHeadersByPreference)
29+
app.component('VueSchoolLink', VueSchoolLink)
2830
}
2931
})

src/guide/components/events.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
44
5+
<div class="options-api">
6+
<VueSchoolLink href="https://vueschool.io/lessons/defining-custom-events-emits" title="Free Vue.js Lesson on Defining Custom Events"/>
7+
</div>
8+
59
## Emitting and Listening to Events
610

711
A component can emit custom events directly in template expressions (e.g. in a `v-on` handler) using the built-in `$emit` function:

src/guide/components/props.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
44
5+
<div class="options-api">
6+
<VueSchoolLink href="https://vueschool.io/lessons/vue-3-reusable-components-with-props" title="Free Vue.js Props Lesson"/>
7+
</div>
8+
59
## Props Declaration
610

711
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).

src/guide/components/slots.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
44
5+
<VueSchoolLink href="https://vueschool.io/lessons/vue-3-component-slots" title="Free Vue.js Slots Lesson"/>
6+
57
## Slot Content and Outlet
68

79
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.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ A common need for data binding is manipulating an element's class list and its i
44

55
## Binding HTML Classes
66

7+
<div class="options-api">
8+
<VueSchoolLink href="https://vueschool.io/lessons/dynamic-css-classes-with-vue-3" title="Free Vue.js Dynamic CSS Classes Lesson"/>
9+
</div>
10+
11+
<div class="composition-api">
12+
<VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-dynamic-css-classes-with-vue" title="Free Vue.js Dynamic CSS Classes Lesson"/>
13+
</div>
14+
715
### Binding to Objects
816

917
We can pass an object to `:class` (short for `v-bind:class`) to dynamically toggle classes:

src/guide/essentials/computed.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Computed Properties
22

3+
<div class="options-api">
4+
<VueSchoolLink href="https://vueschool.io/lessons/computed-properties-in-vue-3" title="Free Vue.js Computed Properties Lesson"/>
5+
</div>
6+
7+
<div class="composition-api">
8+
<VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-computed-properties-in-vue-with-the-composition-api" title="Free Vue.js Computed Properties Lesson"/>
9+
</div>
10+
311
## Basic Example
412

513
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:

src/guide/essentials/conditional.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Conditional Rendering
22

3+
<div class="options-api">
4+
<VueSchoolLink href="https://vueschool.io/lessons/conditional-rendering-in-vue-3" title="Free Vue.js Conditional Rendering Lesson"/>
5+
</div>
6+
7+
<div class="composition-api">
8+
<VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-conditionals-in-vue" title="Free Vue.js Conditional Rendering Lesson"/>
9+
</div>
10+
311
<script setup>
412
import { ref } from 'vue'
513
const awesome = ref(true)

src/guide/essentials/event-handling.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Event Handling
22

3+
<div class="options-api">
4+
<VueSchoolLink href="https://vueschool.io/lessons/user-events-in-vue-3" title="Free Vue.js Events Lesson"/>
5+
</div>
6+
37
## Listening to Events
48

59
We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="handler"` or with the shortcut, `@click="handler"`.

src/guide/essentials/forms.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ const multiSelected = ref([])
1515

1616
# Form Input Bindings
1717

18+
<div class="options-api">
19+
<VueSchoolLink href="https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3" title="Free Lesson on User Inputs with Vue.js"/>
20+
</div>
21+
22+
<div class="composition-api">
23+
<VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-user-inputs-in-vue" title="Free Lesson on User Inputs with Vue.js"/>
24+
</div>
25+
1826
When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript. It can be cumbersome to manually wire up value bindings and change event listeners:
1927

2028
```vue-html

0 commit comments

Comments
 (0)