Vue

for V-on:change

HTML

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

<div id="app">
  <input type="text" @input="addEvent" @change="addEvent" value="rurs"  />
  <input type="range" min="0" max="100" @input="addEvent" @change="addEvent" />
  <input type="checkbox" @input="addEvent" @change="addEvent" />
  <input type="radio" name="radio" value="raj" @input="addEvent"  @change="addEvent" />
  <input type="radio" name="radio" value="rurs" @input="addEvent"  @change="addEvent" />
  <select @input="addEvent" @change="addEvent">
  <option value="1">1</option>
  <option value="2">2</option>
  </select>
  <ul>
    <li v-for="event in events">{{ eventText(event) }}</li>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#app',
  data: {
  	events: []
  },
  methods: {
  	addEvent ({ type, target }) {
    alert(type)
      event = {
          type,
          isCheckbox: target.type === 'checkbox',
          target: {
            value: target.value,
            checked: target.checked
          }
      }
    	this.events.push(event)
    },
    eventText (e) {
    	return `${e.type}: ${e.isCheckbox ? e.target.checked : e.target.value}`
		}
  }
})