udemy/corso-vue.git

parent: 3194f731 | patch | commit | ignore whitespace

Cristiano Magro

2024-12-27 5978c32125c0eca102102eb9e37bd7e3ed4364f5

lesson 05 all step

18 files added

	05 - behind the scenes/behind-scenes-01-starting-setup/app.js	18 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-01-starting-setup/index.html	26 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-01-starting-setup/styles.css	78 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-02-vue-reactivity-deep-dive/app.js	40 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-02-vue-reactivity-deep-dive/index.html	26 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-02-vue-reactivity-deep-dive/styles.css	78 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-03-one-app-vs-multiple-apps/app.js	50 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-03-one-app-vs-multiple-apps/index.html	30 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-03-one-app-vs-multiple-apps/styles.css	82 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-04-understanding-templates/app.js	53 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-04-understanding-templates/index.html	30 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-04-understanding-templates/styles.css	82 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-05-working-with-refs/app.js	55 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-05-working-with-refs/index.html	30 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-05-working-with-refs/styles.css	82 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-06-vue-app-lifecycle-practice/app.js	83 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-06-vue-app-lifecycle-practice/index.html	30 ●●●●● patch \| view \| raw \| blame \| history
	05 - behind the scenes/behind-scenes-06-vue-app-lifecycle-practice/styles.css	82 ●●●●● patch \| view \| raw \| blame \| history

 05 - behind the scenes/behind-scenes-01-starting-setup/app.js

New file
@@ -0,0 +1,18 @@
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');

 05 - behind the scenes/behind-scenes-01-starting-setup/index.html

New file
@@ -0,0 +1,26 @@
<!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>

 05 - behind the scenes/behind-scenes-01-starting-setup/styles.css

New file
@@ -0,0 +1,78 @@
* {
  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);
}

 05 - behind the scenes/behind-scenes-02-vue-reactivity-deep-dive/app.js

New file
@@ -0,0 +1,40 @@
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);

 05 - behind the scenes/behind-scenes-02-vue-reactivity-deep-dive/index.html

New file
@@ -0,0 +1,26 @@
<!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>

 05 - behind the scenes/behind-scenes-02-vue-reactivity-deep-dive/styles.css

New file
@@ -0,0 +1,78 @@
* {
  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);
}

 05 - behind the scenes/behind-scenes-03-one-app-vs-multiple-apps/app.js

New file
@@ -0,0 +1,50 @@
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);

 05 - behind the scenes/behind-scenes-03-one-app-vs-multiple-apps/index.html

New file
@@ -0,0 +1,30 @@
<!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>

 05 - behind the scenes/behind-scenes-03-one-app-vs-multiple-apps/styles.css

New file
@@ -0,0 +1,82 @@
* {
  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);
}

 05 - behind the scenes/behind-scenes-04-understanding-templates/app.js

New file
@@ -0,0 +1,53 @@
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);

 05 - behind the scenes/behind-scenes-04-understanding-templates/index.html

New file
@@ -0,0 +1,30 @@
<!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>

 05 - behind the scenes/behind-scenes-04-understanding-templates/styles.css

New file
@@ -0,0 +1,82 @@
* {
  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);
}

 05 - behind the scenes/behind-scenes-05-working-with-refs/app.js

New file
@@ -0,0 +1,55 @@
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);

 05 - behind the scenes/behind-scenes-05-working-with-refs/index.html

New file
@@ -0,0 +1,30 @@
<!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>

 05 - behind the scenes/behind-scenes-05-working-with-refs/styles.css

New file
@@ -0,0 +1,82 @@
* {
  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);
}

 05 - behind the scenes/behind-scenes-06-vue-app-lifecycle-practice/app.js

New file
@@ -0,0 +1,83 @@
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);

 05 - behind the scenes/behind-scenes-06-vue-app-lifecycle-practice/index.html

New file
@@ -0,0 +1,30 @@
<!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>

 05 - behind the scenes/behind-scenes-06-vue-app-lifecycle-practice/styles.css

New file
@@ -0,0 +1,82 @@
* {
  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
			@@ -0,0 +1,18 @@
			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
			@@ -0,0 +1,26 @@
			<!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
			@@ -0,0 +1,78 @@
			* {
			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
			@@ -0,0 +1,40 @@
			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
			@@ -0,0 +1,50 @@
			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
			@@ -0,0 +1,30 @@
			<!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
			@@ -0,0 +1,82 @@
			* {
			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
			@@ -0,0 +1,53 @@
			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
			@@ -0,0 +1,55 @@
			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
			@@ -0,0 +1,83 @@
			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);