- 在模板中使用
v - on指令（缩写为@）- 基本事件绑定
- 假设你有一个简单的Vue组件，它包含一个按钮。你可以在模板中直接使用
@来绑定一个事件。例如，创建一个名为MyComponent.vue的组件：<template> <button @click="handleClick">点击我</button> </template> <script> export default { methods: { handleClick() { console.log('按钮被点击了'); } } }; </script> - 这里
@click指令将button元素的click事件绑定到组件的handleClick方法上。当按钮被点击时，handleClick方法就会被调用，并且在控制台打印出消息。
- 假设你有一个简单的Vue组件，它包含一个按钮。你可以在模板中直接使用
- 传递参数
- 你还可以向事件处理方法传递参数。例如，如果你有一个列表组件，每个列表项都有一个删除按钮，你可能需要传递列表项的索引来确定要删除哪一个。
<template> <ul> <li v - for="(item, index) in items" :key="index"> { { item }} <button @click="handleDelete(index)">删除</button> </li> </ul> </template> <script> export default { data() { return { items: ['苹果', '香蕉', '橙子'] }; }, methods: { handleDelete(index) { this.items.splice(index, 1); } } }; </script> - 在这个例子中，
@click="handleDelete(index)"将当前列表项的索引传递给handleDelete方法，该方法使用splice操作从items数组中删除对应的元素。
- 你还可以向事件处理方法传递参数。例如，如果你有一个列表组件，每个列表项都有一个删除按钮，你可能需要传递列表项的索引来确定要删除哪一个。
- 事件修饰符
- Vue提供了一些事件修饰符来改变事件的行为。例如，
.prevent用于阻止元素的默认行为，.stop用于阻止事件冒泡。 - 假设你有一个表单，其中包含一个提交按钮，并且你想要阻止表单的默认提交行为（页面刷新），可以这样做：
<template> <form @submit.prevent="handleSubmit"> <input type="text" v - model="inputValue"> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleSubmit() { console.log('表单提交，输入的值为:', this.inputValue); } } }; </script> - 这里
@submit.prevent绑定了表单的submit事件，并且使用.prevent修饰符阻止了表单的默认提交行为，这样当点击提交按钮时，只会执行handleSubmit方法，而不会导致页面刷新。
- Vue提供了一些事件修饰符来改变事件的行为。例如，
- 基本事件绑定
- 在组件的生命周期钩子中使用原生JavaScript添加事件监听器（不推荐，但在某些特殊情况下可能有用）
mounted生命周期钩子添加监听器- 有时候，你可能需要在组件挂载后以原生JavaScript的方式添加事件监听器。例如，你要监听
window对象的resize事件来调整组件的布局。<template> <div ref="myDiv">这是一个组件</div> </template> <script> export default { mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { console.log('窗口大小改变了'); const myDiv = this.$refs.myDiv; // 可以在这里根据窗口大小调整myDiv的样式等操作 } } }; </script> - 在这个例子中，在
mounted生命周期钩子中，使用window.addEventListener为window对象的resize事件添加了一个监听器，监听器方法是handleResize。同时，在beforeDestroy生命周期钩子中，使用window.removeEventListener移除了这个监听器，以避免内存泄漏。注意这种方式使用了this.$refs来获取组件中的DOM元素引用，并且需要手动管理事件监听器的添加和移除。这种方法相对复杂，并且可能会破坏Vue的响应式原理，所以尽量优先使用v - on指令来绑定事件。
- 有时候，你可能需要在组件挂载后以原生JavaScript的方式添加事件监听器。例如，你要监听
