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)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!