The blur event executes when an element lost its focus. Onfocusout event occurs after an element loses its focus so the difference between these two are as follows. The focusout bubbles while blur doesn’t. To further differentiate between them let’s say focus is the opposite of blur.

For example, You want to call a function immediately after the cursor moves from one text box to next. When the input loses focus blur event occurs. The Vue syntax for blur is:

v-on:EVENT_NAME="METHOD"

eg:

<input v-on:blur="handleBlur">



new Vue({
  el: '#app',
  methods: {
    handleBlur(e) {
     console.log('blur', e.target.placeholder)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <input @blur="handleBlur" placeholder="first name">
  <input @blur="handleBlur" placeholder="last name">
</div>