vue input 监听事件

### 如何在 Vue 中为 Input 元素添加和使用事件监听器 在 Vue.js 中，可以通过 `v-on` 指令来绑定事件监听器。对于 `<input>` 元素来说，常见的事件有 `input`, `change`, 和 `focus` 等。 #### 使用 v-on 绑定输入框的 change 事件 下面是一个简单的例子，展示了如何监听用户的输入变化： ```html <div id="app"> <p>Message is: {{ message }}</p> <!-- 当 input 的 value 改变时触发 updateMessage 方法 --> <input type="text" v-model="message" @input="updateMessage"> </div> <script> new Vue({ el: '#app', data() { return { message: '' } }, methods: { updateMessage(event) { console.log(`Input changed to ${event.target.value}`); } } }); </script> ``` 此代码片段创建了一个双向数据绑定的文本框，并在其值发生变化时打印新值到控制台[^1]。 #### 处理表单提交和其他键盘事件 除了基本的输入事件外，还可以处理更复杂的交互行为，比如阻止默认的行为或访问特定键的状态: ```html <form @submit.prevent="handleSubmit"> <button type="submit">Submit</button> </form> <!-- 或者捕获按键 --> <input @keyup.enter="onEnterPressed"> <script> methods: { handleSubmit(e){ e.preventDefault(); alert('Form submitted!'); }, onEnterPressed(){ alert('You pressed enter'); } } </script> ``` 这里展示了两个场景：一个是防止表单提交刷新页面；另一个是在按下回车键 (`enter`) 后执行某些逻辑[^2]。 #### 结合自定义指令增强功能 有时可能需要一些额外的功能，这时可以利用 Vue 的自定义指令来扩展原生 HTML 表现力。例如，设置一个颜色样式随鼠标悬停而改变的效果： ```javascript Vue.directive('color', { bind(el, binding) { const defaultColor = 'blue'; let activeColor = binding.arg || defaultColor; function handleMouseOver() { el.style.color = activeColor; } function handleMouseOut() { el.style.color = ''; } el.addEventListener('mouseover', handleMouseOver); el.addEventListener('mouseout', handleMouseOut); // 清除事件处理器以防内存泄漏 el.__vue_color__ = () => { el.removeEventListener('mouseover', handleMouseOver); el.removeEventListener('mouseout', handleMouseOut); }; }, unbind(el) { if (el.__vue_color__) el.__vue_color__(); // 移除之前注册过的事件 } }); // 使用方式如下： <p v-color="'red'">Hover over me!</p> ``` 这段脚本定义了一种新的 `v-color` 指令，允许开发者轻松地指定元素的颜色变换效果[^3]。