first components e props

Cristiano Magro

2025-01-06 eb387dbd90a2a891ee5ee4458e32cccb460fd9b1

first components e props

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

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

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

export default {
    components:{
        LearningResource: LearningResource,
    },
    data(){
        return {
            storedResouces:[
            storedResouces: [
                {
                    id:'official-guide',
                    title: 'Official Guide',

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

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

<script>
export default {
    props: ['title', 'description', 'link']
}
</script>

 10 - course project/xno-prj-cmp-01-starting-setup/src/main.js

@@ -1,3 +1,5 @@
import { createApp } from 'vue';

createApp({}).mount('#app');
import App from './App.vue';

createApp(App).mount('#app');