uso di due app sulla stessa pagina
| New file |
| | |
|---|
| | | const app = Vue.createApp({ |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | currentUserInput: '', |
|---|
| | | message: 'Vue is great!', |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | saveInput(event) { |
|---|
| | | this.currentUserInput = event.target.value; |
|---|
| | | }, |
|---|
| | | setText() { |
|---|
| | | this.message = this.currentUserInput; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
| | | |
|---|
| | | const app2 = Vue.createApp({ |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | favoriteMeal:'pizza', |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: {}, |
|---|
| | | watch: {}, |
|---|
| | | methods: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app2.mount("#app2"); |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8" /> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|---|
| | | <title>Vue Basics</title> |
|---|
| | | <link |
|---|
| | | href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" |
|---|
| | | rel="stylesheet" |
|---|
| | | /> |
|---|
| | | <link rel="stylesheet" href="styles.css" /> |
|---|
| | | <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script> |
|---|
| | | <script src="app.js" defer></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <h1>Vue Behind The Scenes</h1> |
|---|
| | | </header> |
|---|
| | | <section id="app"> |
|---|
| | | <h2>How Vue Works</h2> |
|---|
| | | <input type="text" @input="saveInput"> |
|---|
| | | <button @click="setText">Set Text</button> |
|---|
| | | <p>{{ message }}</p> |
|---|
| | | </section> |
|---|
| | | <section id="app2"> |
|---|
| | | <p>{{ favoriteMeal }}</p> |
|---|
| | | </section> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | * { |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | html { |
|---|
| | | font-family: 'Jost', sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | header { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 3rem auto; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 1rem; |
|---|
| | | background-color: #4fc08d; |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app, #app2 { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 3rem auto; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 1rem; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app h2, |
|---|
| | | #app2 h2 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #4fc08d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app p, |
|---|
| | | #app2 p { |
|---|
| | | font-size: 1.25rem; |
|---|
| | | font-weight: bold; |
|---|
| | | border: 1px solid #4fc08d; |
|---|
| | | background-color: #4fc08d; |
|---|
| | | color: white; |
|---|
| | | padding: 0.5rem; |
|---|
| | | border-radius: 25px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app input { |
|---|
| | | font: inherit; |
|---|
| | | border: 1px solid #ccc; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app input:focus { |
|---|
| | | outline: none; |
|---|
| | | border-color: #1b995e; |
|---|
| | | background-color: #d7fdeb; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app button { |
|---|
| | | font: inherit; |
|---|
| | | cursor: pointer; |
|---|
| | | border: 1px solid #ff0077; |
|---|
| | | background-color: #ff0077; |
|---|
| | | color: white; |
|---|
| | | padding: 0.05rem 1rem; |
|---|
| | | box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26); |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app button:hover, |
|---|
| | | #app button:active { |
|---|
| | | background-color: #ec3169; |
|---|
| | | border-color: #ec3169; |
|---|
| | | box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); |
|---|
| | | } |
|---|
