corso vuejs
view | history | commit | commitdiff
Cristiano Magro
2024-12-28 fb09dca31f9a64ca4287579006014157a3d8156c
commit | author | age
f31b9e 1 <template>
498b47 2   <section>
CM 3     <header>
4       <h1>My friends</h1>
5     </header>
6     <ul>
7       <friend-contact 
8       name="Manuel Lorenz" 
9       phone-number="123" 
10       email-address="cicio@ciccio.it"
fb09dc 11       is-favorite="1"
498b47 12       ></friend-contact>
CM 13       <friend-contact
14       name="Jeany Torpedo" 
15       phone-number="123123" 
16       email-address="torpedo@ciccio.it"
17       ></friend-contact>
18     </ul>
19   </section>
f31b9e 20 </template>
CM 21
22 <script>
23 export default {
498b47 24   data() {
CM 25     return {
26       friends: [
27         {
28           id: "manuel",
29           name: "Manuel Lorenz",
30           phone: "01234 5678 991",
31           email: "manuel@localhost.com",
32         },
33         {
34           id: "julie",
35           name: "Julie Jones",
36           phone: "09876 543 221",
37           email: "julie@localhost.com",
38         },
39       ],
40     }
41   },
f31b9e 42 };
f54162 43 </script>
CM 44
45 <style>
498b47 46 @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
f54162 47
CM 48 * {
49   box-sizing: border-box;
50 }
51
52 html {
53   font-family: 'Jost', sans-serif;
54 }
55
56 body {
57   margin: 0;
58 }
59
60 header {
61   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
62   margin: 3rem auto;
63   border-radius: 10px;
64   padding: 1rem;
65   background-color: #58004d;
66   color: white;
67   text-align: center;
68   width: 90%;
69   max-width: 40rem;
70 }
71
72 #app ul {
73   margin: 0;
74   padding: 0;
75   list-style: none;
76 }
77
78 #app li {
79   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
80   margin: 1rem auto;
81   border-radius: 10px;
82   padding: 1rem;
83   text-align: center;
84   width: 90%;
85   max-width: 40rem;
86 }
87
88 #app h2 {
89   font-size: 2rem;
90   border-bottom: 4px solid #ccc;
91   color: #58004d;
92   margin: 0 0 1rem 0;
93 }
94
95 #app button {
96   font: inherit;
97   cursor: pointer;
98   border: 1px solid #ff0077;
99   background-color: #ff0077;
100   color: white;
101   padding: 0.05rem 1rem;
102   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
103 }
104
105 #app button:hover,
106 #app button:active {
107   background-color: #ec3169;
108   border-color: #ec3169;
109   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
110 }
111 </style>