stili e nuovo componente

Cristiano Magro

2025-01-07 86991ce9905eeea513635a340cda50f57296d896

stili e nuovo componente

 10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue

@@ -1,51 +1,47 @@
<template>
    <ul>
        <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description"
            :link="res.link">
        </learning-resource>
    </ul>
  <stored-resources :resources="storedResouces"> </stored-resources>
</template>

<script>
import LearningResource from './components/learning-resource/LearningResource.vue';
import StoredResources from './components/learning-resource/StoredResource.vue';

export default {
    components: {
        LearningResource: LearningResource,
    },
    data() {
        return {
            storedResouces: [
                {
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official Vue.js documentation',
                    link: 'https://vuejs.org'
                },
                {
                    id: 'google',
                    title: 'Google',
                    description: 'Learn to google...',
                    link: 'https://google.com'
                },
            ]
        }
    }
}
  components: {
    StoredResources: StoredResources,
  },
  data() {
    return {
      storedResouces: [
        {
          id: 'official-guide',
          title: 'Official Guide',
          description: 'The official Vue.js documentation',
          link: 'https://vuejs.org',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://google.com',
        },
      ],
    };
  },
};
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
  box-sizing: border-box;
}

html {
    font-family: 'Roboto', sans-serif;
  font-family: 'Roboto', sans-serif;
}

body {
    margin: 0;
  margin: 0;
}
</style>
</style>

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue

New file
@@ -0,0 +1,34 @@
<template>
  <ul>
    <learning-resource
      v-for="res in resources"
      :key="res.id"
      :title="res.title"
      :description="res.description"
      :link="res.link"
    >
    </learning-resource>
  </ul>
</template>

<script>
import LearningResource from './LearningResource.vue';

export default {
  components: {
    LearningResource: LearningResource,
  },

  props: ['resources'],
};
</script>

<style>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: auto;
  max-width: 40rem;
}
</style>