index.html

<!DOCTYPE html>
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <div id="app" v-cloak>
      <p>{{ fullName }}</p>
      <hr />

      <p><a :href="url" target="_blank">Google</a></p>
      <p v-html="raw_url"></p>
      <p>{{ age }}</p>

      <label>First Name</label>
      <input type="text" v-model.lazy.trim="firstName" />

      <label>Middle Name</label>
      <input type="text" @keyup.enter="updateMiddleName" />

      <label>Last Name</label>
      <input
        type="text"
        :value="lastName"
        @input.prevent="updateLastName('Last name event triggered!', $event)"
      />

      <label>Age</label>
      <input type="number" v-model.number="age" />

      <button type="button" @click="increment">Increment Age</button>
      <button type="button" @click="age--">Decrement Age</button>
    </div>

    <!-- <div id="app2">{{ firstName }} {{ lastName }}</div> -->

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
  </body>
</html>