在Vue中，我們可以使用v-model指令將表單元素與組件的數據綁定起來，實現雙向數據綁定。然而，有時候我們需要對一些表單元素的值進行監聽，例如input、textarea等元素的輸入事件。這時候，我們就需要使用v-on指令來綁定事件，通過事件的回調函數來監聽表單元素的值的變化。

<template>
<div>
<input v-model="inputValue" v-on:input="handleInput">
</div>
 </template>
<script>
export default {
data(){
return {
inputValue: ''
}
},
methods:{
handleInput(e){
this.inputValue = e.target.value;
console.log(this.inputValue);
}
}
}
 </script>

在上面的代碼中，我們通過v-model指令將表單元素input與組件的data中的inputValue進行了雙向綁定。同時，我們也使用了v-on指令來監聽input元素的輸入事件，并且通過handleInput方法將輸入的值賦值給inputValue，并在控制臺中打印出來。

對于一些特殊的表單元素，例如picker、switch等，我們需要使用其它的事件來監聽其值的變化。例如，對于小程序中的picker組件，我們需要使用bindchange事件來監聽其選擇的值的變化。

<template>
<div>
<picker value="{{selected}}" range="{{range}}" bindchange="handlePickerChange"></picker>
</div>
 </template>
<script>
export default {
data(){
return {
selected: 0,
range: [1,2,3,4,5,6,7,8,9,10],
}
},
methods:{
handlePickerChange(e){
this.selected = e.detail.value;
console.log(this.range[this.selected]);
}
}
}
 </script>

在上面的代碼中，我們使用picker組件，并且將其value屬性綁定到selected，range屬性綁定到range數組上。同時，我們使用bindchange事件來監聽其選擇的值的變化，并且通過handlePickerChange方法將選擇的值賦值給selected，并在控制臺中打印出選擇的值。

總之，在Vue中使用v-on指令可以很方便地監聽表單元素的變化，而對于不同的表單元素，我們需要使用不同的事件來監聽其值的變化。