in Vue.JS by
Q:
How Vue Handling User Input?

► Click here to show 1 Answer

0 votes
by

let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances:

<div id="app-5">

  <p>{{ message }}</p>

  <button v-on:click="reverseMessage">Reverse Message</button>

</div>

var app5 = new Vue({

  el: '#app-5',

  data: {

    message: 'Hello Vue.js!'

  },

  methods: {

    reverseMessage: function () {

      this.message = this.message.split('').reverse().join('')

    }

  }

})

Hello Vue.js!

Reverse Message

Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.

Vue also provides the v-model directive that makes two-way binding between form input and app state a breeze:

<div id="app-6">

  <p>{{ message }}</p>

  <input v-model="message">

</div>

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

Hello Vue!

Vue JS
Learn More with Madanswer

Related questions

0 votes
asked Oct 7, 2019 by Tate
...