DEV Community

Cover image for VueJs Beginners part 2 - Methods
Hash
Hash

Posted on

VueJs Beginners part 2 - Methods

To add methods to a component instance we use the methods option.
we can define them the way we defined data and indeed methods is a object of functions.

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
)}
Enter fullscreen mode Exit fullscreen mode

Event and key Modifiers:

It is a very common need to call something like event.preventDefault() inside event handlers. it can be done in method itself but there are some modifiers to apply them easier.

examples:

@click.right
@click.prevent.stop
@keyup.13

<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>

<!-- only call `submit` when the `key` is `Enter` -->
<input @keyup.enter="submit" />
Enter fullscreen mode Exit fullscreen mode

do you want more check here

Run and edit them yourself here

Top comments (0)