124 First Components & Props

2、新建组件LearningResource.vue

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

3、在App.vue中使用组件

<template>
    <ul>
        <learning-resource v-for="res in storedResources" :key="res.id" :title="res.title"
            :description="res.description" :link="res.link">
        </learning-resource>
    </ul>
</template>

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

export default {
    components: {
        LearningResource,
    },
    data() {
        return {
            storedResources: [
                {
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official guide for using Vue.js.',
                    link: 'https://vuejs.org/guide/',
                },
                {
                    id: 'api-reference',
                    title: 'API Reference',
                    description: 'The API reference for using Vue.js.',
                    link: 'https://vuejs.org/api/',
                },
                {
                    id: 'examples',
                    title: 'Examples',
                    description: 'A list of examples for using Vue.js.',
                    link: 'https://vuejs.org/examples/',
                }
            ]
        };
    },
}
</script>