<div id="app">
  <button class="btn btn-secondary" v-on:click="greeting">Say Hello</button>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  
}

const app = Vue.createApp({
  data: function () {
    return { name: 'John' }
  },
  methods: {
    greeting: function () {
      // the this keyword is used access the data object
      if (this.name) {
        alert(`Hello ${this.name}`)
      } else {
        alert('Hello Friend.')
      }
    }
  }
})

const vm = app.mount('#app')