[Vuejs]-Vue Components with data and methods

In your data property, define a variable that will hold access to the name so to speak. In this case, we’ll initialize it with a value of Alice:

data () {
  return {
    name: 'Alice'
  }
}

We can add a click method now and bind it to our div element so that it will swap the name:

methods: {
  swap () {
    this.name = 'Bob'
  }

}

Finally, we need to modify our template to receive a click handler and use dynamic bindings to display our name property from our data object:

template: `<div @click="swap">Welcome, <span v-text="name"></span></div>`

Note that in the above illustration the v-text is a directive and we have bound the value of our name property to it, which we modify through the @click handler we assigned to the swap function.

You can use the event @click on the div, with that you bind the click event to a specific method in this case I create toggleName()

  Vue.component('greet', {
      data() {
        return {
         name: 'Alice'
        }
      },
      methods: {
        toggleName() {
          this.name = this.name == 'Alice' ? 'Bob' : 'Alice';
        }
      },
      template: '<div @click="toggleName">Welcome {{ name }}</div>'
    })

Then we create a method that accesses to the property defined in data in this case is name When we use the reserved word this we access to our instance and from there w can access the property name. Then we create a toggle for the name.

In order to access the variable in our template we need to use the special curly braces
{{ name }} this time the this is not needed.