Creating Our First Vue App

by Mayank Kumar Chaudhari

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An Awesome Vuejs Course</title>
  </head>

  <body>
    <div id="app">
      <h1>My First Aesome Vue Project!</h1>
      <input type="text" v-model="name">
      <p>{{name}}</p>
      <br>
      <span style="color:red">The value of the p tag above changes according to what you write in input</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>

</html>

CSS

body {
  text-align: center;
}

JavaScript

let myVue = new Vue({
  el: '#app',
  // 
  data: {
    name: 'Mayank Chaudhari'
  }
});