recupero il codice della precedente lezione e lo spezzo in componenti

Cristiano Magro

2024-12-28 f31b9ed504b53b81d9e61a1326ddc64bce6cb6d6

recupero il codice della precedente lezione e lo spezzo in componenti

 07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue

New file
@@ -0,0 +1,32 @@
<template>
    <section>
        <h2>My friends</h2>
        <ul>
            <friend-contact></friend-contact>
            <friend-contact></friend-contact>
        </ul>
    </section>
</template>

<script>
export default {
    data() {
        return {
            friends: [
                {
                    id: "manuel",
                    name: "Manuel Lorenz",
                    phone: "01234 5678 991",
                    email: "manuel@localhost.com",
                },
                {
                    id: "julie",
                    name: "Julie Jones",
                    phone: "09876 543 221",
                    email: "julie@localhost.com",
                },
            ],
        }
    },
};
</script>

 07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue

New file
@@ -0,0 +1,33 @@
<template>
    <li>
        <h2>{{ friend.name }}</h2>
        <button @click="toggleDetails">
            {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
        </button>
        <ul v-if="detailsAreVisible">
            <li><strong>Phone:</strong> {{ friend.phone }}</li>
            <li><strong>Email:</strong> {{ friend.email }}</li>
        </ul>
    </li>
</template>

<script>
export default {
    data() {
        return {
            detailsAreVisible: false,
            friend: {
                id: "manuel",
                name: "Manuel Lorenz",
                phone: "01234 5678 991",
                email: "manuel@localhost.com",
            }
        }
    },
    methods: {
        toggleDetails() {
            this.detailsAreVisible = !this.detailsAreVisible;
        },
    },
};
</script>

 07 - development setup/vue-cli-01-a-new-vue-project/src/main.js

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

createApp({}).mount('');
import App from "./App.vue";
import FriendContact from "./components/FriendContact.vue";

const app = createApp(App);

app.component("friend-contact", FriendContact);

app.mount("#app");