Skip to content

Commit 05c75f6

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

File tree

13 files changed

+122
-0
lines changed

13 files changed

+122
-0
lines changed

‎.vitepress/theme/components/VueSchoolLink.vue

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

‎src/guide/essentials/list.md

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

3+
<div class="options-api">
4+
<VueSchoolLink href="https://vueschool.io/lessons/list-rendering-in-vue-3" title="Free Vue.js List Rendering Lesson"/>
5+
</div>
6+
7+
<div class="composition-api">
8+
<VueSchoolLink href="https://vueschool.io/lessons/vue-fundamentals-capi-list-rendering-in-vue" title="Free Vue.js List Rendering Lesson"/>
9+
</div>
10+
311
## `v-for`
412

513
We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on:

‎src/guide/essentials/reactivity-fundamentals.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ Top-level imports and variables declared in `<script setup>` are automatically u
165165

166166
## Declaring Methods \*
167167

168+
<VueSchoolLink href="https://vueschool.io/lessons/methods-in-vue-3" title="Free Vue.js Methods Lesson"/>
169+
168170
To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods:
169171

170172
```js{7-11}

‎src/guide/scaling-up/routing.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
## Official Router
44

55
<!-- TODO update links -->
6+
<div>
7+
<VueSchoolLink href="https://vueschool.io/courses/vue-router-4-for-everyone" title="Free Vue Router Course">
8+
Watch a Free Video Course on Vue School
9+
</VueSchoolLink>
10+
</div>
611

712
For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router-next). For more details, see vue-router's [documentation](https://router.vuejs.org/).
813

0 commit comments

Comments
 (0)