| 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'); |
|---|
| 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@next" defer></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> |
|---|
| | | </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 { |
|---|
| | | 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 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #4fc08d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app 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); |
|---|
| | | } |
|---|
| 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 data = { |
|---|
| | | message: 'Hello!', |
|---|
| | | longMessage: 'Hello! World!' |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handler = { |
|---|
| | | set(target, key, value) { |
|---|
| | | if (key === 'message') { |
|---|
| | | target.longMessage = value + ' World!'; |
|---|
| | | } |
|---|
| | | target.message = value; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const proxy = new Proxy(data, handler); |
|---|
| | | |
|---|
| | | proxy.message = 'Hello!!!!'; |
|---|
| | | |
|---|
| | | console.log(proxy.longMessage); |
|---|
| 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@next" defer></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> |
|---|
| | | </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 { |
|---|
| | | 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 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #4fc08d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app 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); |
|---|
| | | } |
|---|
| 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' |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app2.mount('#app2'); |
|---|
| | | |
|---|
| | | // .... |
|---|
| | | |
|---|
| | | const data = { |
|---|
| | | message: 'Hello!', |
|---|
| | | longMessage: 'Hello! World!' |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handler = { |
|---|
| | | set(target, key, value) { |
|---|
| | | if (key === 'message') { |
|---|
| | | target.longMessage = value + ' World!'; |
|---|
| | | } |
|---|
| | | target.message = value; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const proxy = new Proxy(data, handler); |
|---|
| | | |
|---|
| | | proxy.message = 'Hello!!!!'; |
|---|
| | | |
|---|
| | | console.log(proxy.longMessage); |
|---|
| 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@next" defer></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"> |
|---|
| | | <!-- DOES NOT WORK: <p>{{ message }}</p> --> |
|---|
| | | <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, |
|---|
| | | #app2 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); |
|---|
| | | } |
|---|
| 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({ |
|---|
| | | template: ` |
|---|
| | | <p>{{ favoriteMeal }}</p> |
|---|
| | | `, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | favoriteMeal: 'Pizza' |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app2.mount('#app2'); |
|---|
| | | |
|---|
| | | // .... |
|---|
| | | |
|---|
| | | const data = { |
|---|
| | | message: 'Hello!', |
|---|
| | | longMessage: 'Hello! World!' |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handler = { |
|---|
| | | set(target, key, value) { |
|---|
| | | if (key === 'message') { |
|---|
| | | target.longMessage = value + ' World!'; |
|---|
| | | } |
|---|
| | | target.message = value; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const proxy = new Proxy(data, handler); |
|---|
| | | |
|---|
| | | proxy.message = 'Hello!!!!'; |
|---|
| | | |
|---|
| | | console.log(proxy.longMessage); |
|---|
| 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@next" defer></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"> |
|---|
| | | <!-- DOES NOT WORK: <p>{{ message }}</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, |
|---|
| | | #app2 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); |
|---|
| | | } |
|---|
| 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; |
|---|
| | | this.message = this.$refs.userText.value; |
|---|
| | | // console.dir(this.$refs.userText); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
| | | |
|---|
| | | const app2 = Vue.createApp({ |
|---|
| | | template: ` |
|---|
| | | <p>{{ favoriteMeal }}</p> |
|---|
| | | `, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | favoriteMeal: 'Pizza' |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app2.mount('#app2'); |
|---|
| | | |
|---|
| | | // .... |
|---|
| | | |
|---|
| | | const data = { |
|---|
| | | message: 'Hello!', |
|---|
| | | longMessage: 'Hello! World!' |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handler = { |
|---|
| | | set(target, key, value) { |
|---|
| | | if (key === 'message') { |
|---|
| | | target.longMessage = value + ' World!'; |
|---|
| | | } |
|---|
| | | target.message = value; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const proxy = new Proxy(data, handler); |
|---|
| | | |
|---|
| | | proxy.message = 'Hello!!!!'; |
|---|
| | | |
|---|
| | | console.log(proxy.longMessage); |
|---|
| 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@next" defer></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" ref="userText"> |
|---|
| | | <button @click="setText">Set Text</button> |
|---|
| | | <p>{{ message }}</p> |
|---|
| | | </section> |
|---|
| | | <section id="app2"> |
|---|
| | | <!-- DOES NOT WORK: <p>{{ message }}</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, |
|---|
| | | #app2 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); |
|---|
| | | } |
|---|
| 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; |
|---|
| | | this.message = this.$refs.userText.value; |
|---|
| | | // console.dir(this.$refs.userText); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | beforeCreate() { |
|---|
| | | console.log('beforeCreate()'); |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | console.log('created()'); |
|---|
| | | }, |
|---|
| | | beforeMount() { |
|---|
| | | console.log('beforeMount()'); |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | console.log('mounted()'); |
|---|
| | | }, |
|---|
| | | beforeUpdate() { |
|---|
| | | console.log('beforeUpdate()'); |
|---|
| | | }, |
|---|
| | | updated() { |
|---|
| | | console.log('updated()'); |
|---|
| | | }, |
|---|
| | | beforeUnmount() { |
|---|
| | | console.log('beforeUnmount()'); |
|---|
| | | }, |
|---|
| | | unmounted() { |
|---|
| | | console.log('unmounted()'); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
| | | |
|---|
| | | setTimeout(function () { |
|---|
| | | app.unmount(); |
|---|
| | | }, 3000); |
|---|
| | | |
|---|
| | | const app2 = Vue.createApp({ |
|---|
| | | template: ` |
|---|
| | | <p>{{ favoriteMeal }}</p> |
|---|
| | | `, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | favoriteMeal: 'Pizza', |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app2.mount('#app2'); |
|---|
| | | |
|---|
| | | // .... |
|---|
| | | |
|---|
| | | const data = { |
|---|
| | | message: 'Hello!', |
|---|
| | | longMessage: 'Hello! World!', |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handler = { |
|---|
| | | set(target, key, value) { |
|---|
| | | if (key === 'message') { |
|---|
| | | target.longMessage = value + ' World!'; |
|---|
| | | } |
|---|
| | | target.message = value; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const proxy = new Proxy(data, handler); |
|---|
| | | |
|---|
| | | proxy.message = 'Hello!!!!'; |
|---|
| | | |
|---|
| | | // console.log(proxy.longMessage); |
|---|
| 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@next" defer></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" ref="userText"> |
|---|
| | | <button @click="setText">Set Text</button> |
|---|
| | | <p>{{ message }}</p> |
|---|
| | | </section> |
|---|
| | | <section id="app2"> |
|---|
| | | <!-- DOES NOT WORK: <p>{{ message }}</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, |
|---|
| | | #app2 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); |
|---|
| | | } |
|---|
| 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; |
|---|
| | | this.message = this.$refs.userText.value; |
|---|
| | | // console.dir(this.$refs.userText) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | beforeCreate(){ |
|---|
| | | console.log("beforeCreate()"); |
|---|
| | | }, |
|---|
| | | created(){ |
|---|
| | | console.log("create()"); |
|---|
| | | }, |
|---|
| | | beforeMount(){ |
|---|
| | | console.log("beforeMount()"); |
|---|
| | | }, |
|---|
| | | mounted(){ |
|---|
| | | console.log("mounted()"); |
|---|
| | | }, |
|---|
| | | beforeUpdate(){ |
|---|
| | | console.log("beforeUpdate()"); |
|---|
| | | }, |
|---|
| | | updated(){ |
|---|
| | | console.log("updated()"); |
|---|
| | | }, |
|---|
| | | beforeUnmount(){ |
|---|
| | | console.log("beforeUnmount()"); |
|---|
| | | }, |
|---|
| | | unmounted(){ |
|---|
| | | console.log("upmounted()"); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount("#app"); |
|---|
| | | |
|---|
| | | const app2 = Vue.createApp({ |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | favoriteMeal: "pizza!!", |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: {}, |
|---|
| | | watch: {}, |
|---|
| | | methods: {}, |
|---|
| | | template: ` |
|---|
| | | <p>{{ favoriteMeal }}</p> |
|---|
| | | `, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | 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" ref="userText"> |
|---|
| | | <button @click="setText">Set Text</button> |
|---|
| | | <p>{{ message }}</p> |
|---|
| | | </section> |
|---|
| | | <section id="app2"> |
|---|
| | | |
|---|
| | | </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); |
|---|
| | | } |
|---|
| 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@next" defer></script> |
|---|
| | | <script src="app.js" defer></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <h1>FriendList</h1> |
|---|
| | | </header> |
|---|
| | | <section id="app"> |
|---|
| | | <ul> |
|---|
| | | <li> |
|---|
| | | <h2>Manuel Lorenz</h2> |
|---|
| | | <button>Show Details</button> |
|---|
| | | <ul> |
|---|
| | | <li><strong>Phone:</strong> 01234 5678 991</li> |
|---|
| | | <li><strong>Email:</strong> manuel@localhost.com</li> |
|---|
| | | </ul> |
|---|
| | | </li> |
|---|
| | | <li> |
|---|
| | | <h2>Julie Jones</h2> |
|---|
| | | <button>Show Details</button> |
|---|
| | | <ul> |
|---|
| | | <li><strong>Phone:</strong> 09876 543 221</li> |
|---|
| | | <li><strong>Email:</strong> julie@localhost.com</li> |
|---|
| | | </ul> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </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: #58004d; |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app ul { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | list-style: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app li { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 1rem auto; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 1rem; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app h2 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #58004d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #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); |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | const app = Vue.createApp({ |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | detailsAreVisible: false, |
|---|
| | | 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', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | toggleDetails() { |
|---|
| | | this.detailsAreVisible = !this.detailsAreVisible; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
| 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@next" defer></script> |
|---|
| | | <script src="app.js" defer></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <h1>FriendList</h1> |
|---|
| | | </header> |
|---|
| | | <section id="app"> |
|---|
| | | <ul> |
|---|
| | | <li v-for="friend in friends" :key="friend.id"> |
|---|
| | | <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> |
|---|
| | | </ul> |
|---|
| | | </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: #58004d; |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app ul { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | list-style: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app li { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 1rem auto; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 1rem; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app h2 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #58004d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #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); |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | const app = Vue.createApp({ |
|---|
| | | 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', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.component('friend-contact', { |
|---|
| | | 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> |
|---|
| | | `, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | detailsAreVisible: false, |
|---|
| | | friend: { |
|---|
| | | id: 'manuel', |
|---|
| | | name: 'Manuel Lorenzo', |
|---|
| | | phone: '01234 5678 991', |
|---|
| | | email: 'manuel@localhost.com', |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | toggleDetails() { |
|---|
| | | this.detailsAreVisible = !this.detailsAreVisible; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount('#app'); |
|---|
| 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@next" defer></script> |
|---|
| | | <script src="app.js" defer></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <h1>FriendList</h1> |
|---|
| | | </header> |
|---|
| | | <friend-contact></friend-contact> |
|---|
| | | <section id="app"> |
|---|
| | | <ul> |
|---|
| | | <friend-contact></friend-contact> |
|---|
| | | <friend-contact></friend-contact> |
|---|
| | | </ul> |
|---|
| | | </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: #58004d; |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app ul { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | list-style: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app li { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 1rem auto; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 1rem; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app h2 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #58004d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #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); |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | const app = Vue.createApp({ |
|---|
| | | 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", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: {}, |
|---|
| | | watch: {}, |
|---|
| | | methods: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.component("friend-contact", { |
|---|
| | | 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> |
|---|
| | | `, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | detailsAreVisible: false , |
|---|
| | | friend : { |
|---|
| | | id: "manuel", |
|---|
| | | name: "Manuel Lorenz", |
|---|
| | | phone: "01234 5678 991", |
|---|
| | | email: "manuel@localhost.com", |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | toggleDetails() { |
|---|
| | | this.detailsAreVisible = !this.detailsAreVisible; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount("#app"); |
|---|
| 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>FriendList</h1> |
|---|
| | | </header> |
|---|
| | | <section id="app"> |
|---|
| | | <ul> |
|---|
| | | <friend-contact></friend-contact> |
|---|
| | | </ul> |
|---|
| | | </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: #58004d; |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app ul { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | list-style: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app li { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | margin: 1rem auto; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 1rem; |
|---|
| | | text-align: center; |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #app h2 { |
|---|
| | | font-size: 2rem; |
|---|
| | | border-bottom: 4px solid #ccc; |
|---|
| | | color: #58004d; |
|---|
| | | margin: 0 0 1rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #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); |
|---|
| | | } |
|---|
