Vue自定義指令是控制、維護DOM的重要方式，通過自定義指令，Vue允許您在渲染過程中以 JavaScript 的方式更新 DOM。對于表單控件之類的元素，我們需要監聽它們的事件，如 SELECT 的 CHANGE 事件。在 Vue 中，可以通過 v-on 或 @ 符號來監聽 SELECT 的 CHANGE 事件。

<select v-model="selected" v-on:change="handleChange">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>

在上述代碼中，我們使用 v-model 綁定 SELECT，以便從組件中獲取當前選擇的選項。我們還創建了一個 handleChange 事件處理程序來處理當 SELECT 發生 CHANGE 事件時所需執行的操作。

export default {
data() {
return {
selected: null,
options: [
{ text: '選項1', value: 'option1' },
{ text: '選項2', value: 'option2' },
{ text: '選項3', value: 'option3' }
]
}
},
methods: {
handleChange(event) {
console.log('選擇的選項值為:', event.target.value)
}
}
}

上述代碼中的 handleChange 方法將選擇的選項值記錄在控制臺中，但是您可以自行修改以實現所需的操作，例如向服務器提交該值或將其用于另一個組件。

此外，您還可以使用修飾符 v-model:lazy 和 v-model:debounce。使用 lazy 修飾符可改為在 CHANGE 事件之后才同步 SELECT 值，而使用 debounce 修飾符可在不間斷地接收用戶輸入時減少表單的頻繁更新。

<select v-model:lazy="selected">...</select>
<select v-model:debounce.500ms="selected">...</select>

希望您使用 Vue SELECT 事件監聽事件時，上述內容能給您帶來幫助。