Categories

Oct 1, 2019 in Vue.JS

Q: How Vue Handling User Input?

1 Answer

Oct 1, 2019

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!

Click here to read more about Vue JS
Click here to read more about Insurance

Related questions

Madanswer
Oct 7, 2019
Oct 9, 2019 in Vue.JS
Oct 7, 2019 in Vue.JS
...