Nebucatnetzer/vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lesson 127: add a BaseCard component

Browse Source
This commit is contained in:
Andreas Zweili 2021-02-08 14:16:56 +01:00
parent 888f02939e
commit 332024563d
4 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
2021-02-08 prj-cmp-01-starting-setup/src/App.vue
View File

@ -4,7 +4,7 @@
</template> </template>
<script> <script>
import TheHeader from './components/layout/TheHeader'; import TheHeader from './components/layouts/TheHeader';
import storedResources from './components/resources/StoredResources'; import storedResources from './components/resources/StoredResources';
export default { export default {
components: { components: {

13
2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseCard.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div><slot></slot></div>
</template>
<style scoped>
div {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
margin: 2rem auto;
max-width: 40rem;
}
</style>

8
2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<li> <li>
<div> <base-card>
<header> <header>
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
<button>Delete</button> <button>Delete</button>
</header> </header>
</div> <p>{{ description }}</p>
<p>{{ description }}</p> <nav><a :href="link">View Resource</a></nav>
<nav><a :href="link">View Resource</a></nav> </base-card>
</li> </li>
</template> </template>

2
2021-02-08 prj-cmp-01-starting-setup/src/main.js
View File

@ -1,7 +1,9 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import BaseCard from './components/UI/BaseCard';
const app = createApp(App); const app = createApp(App);
app.component('base-card', BaseCard);
app.mount('#app'); app.mount('#app');