corso vuejs
view | history | commit | commitdiff
Cristiano Magro
2024-12-30 05275d80c65c82fd9be1e7137af8514aff9dbbc2
commit | author | age
bc995b 1 <template>
CM 2
3     <section>
4         <header>
5             Esercizio
6         </header>
7         <active-user :username="user.username" :age="user.age"></active-user>
ff5308 8         <user-data @update-user="updateUser"></user-data>
bc995b 9     </section>
CM 10 </template>
11
12 <script>
13 export default {
14     data() {
15         return {
16             user: {
17                 username: "mario",
18                 age: "38",
19             }
20         }
ff5308 21     },
CM 22     methods:{
23         updateUser(user, age){
24             this.user.username = user;
25             this.user.age = age;
26         }
bc995b 27     }
CM 28 }
29 </script>
30
31 <style>
32 @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
33
34 * {
35     box-sizing: border-box;
36 }
37
38 html {
39     font-family: 'Jost', sans-serif;
40 }
41
42 body {
43     margin: 0;
44 }
45
46 header {
47     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
48     margin: 3rem auto;
49     border-radius: 10px;
50     padding: 1rem;
51     background-color: #58004d;
52     color: white;
53     text-align: center;
54     width: 90%;
55     max-width: 40rem;
56 }
57
58 #app form {
59     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
60     margin: 1rem auto;
61     border-radius: 10px;
62     padding: 1rem;
63     text-align: center;
64     width: 90%;
65     max-width: 40rem;
66 }
67
68 #app h2 {
69     font-size: 2rem;
70     color: #58004d;
05275d 71     margin: 0 0 0 0;
bc995b 72 }
CM 73
74 #app button {
75     font: inherit;
76     cursor: pointer;
05275d 77     border: 1px solid #08301a;
CM 78     background-color: #08301a;
bc995b 79     color: white;
CM 80     padding: 0.05rem 1rem;
81     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
05275d 82     border-radius: 10px;
bc995b 83 }
CM 84
85 #app button:hover,
86 #app button:active {
87     background-color: #ec3169;
88     border-color: #ec3169;
89     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
90 }
91
92 #app input {
93     font: inherit;
94     padding: 0.15rem;
95 }
96
97 #app label {
98     font-weight: bold;
99     margin-right: 1rem;
100     width: 7rem;
101     display: inline-block;
102 }
103
104 #app form div {
105     margin: 1rem 0;
106 }
05275d 107
CM 108 #app .user{
109     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
110     margin: 1rem auto;
111     border-radius: 10px;
112     padding: 1rem;
113     text-align: center;
114     width: 90%;
115     max-width: 40rem;
116
117 }
bc995b 118 </style>