Vue.js 是一款流行的前端框架，它提供了一种声明式的数据绑定和组件化的方式来构建用户界面。在Vue中，处理用户交互和业务逻辑主要依赖于方法和事件。下面我们将深入探讨Vue的方法与事件。
一、Vue方法的实现
Vue实例可以通过`methods`选项定义一组可调用的方法。在HTML模板中，我们通常通过`v-on`指令（简写为`@`）来触发这些方法。例如：
```html
<div id="test">
<button @click="sayHi">点击我</button>
</div>
```
在JavaScript部分，我们可以这样定义`sayHi`方法：
```javascript
var myVue = new Vue({
el: '#test',
methods: {
sayHi: function () {
alert('我被点击了')
}
}
})
```
在这个例子中，当用户点击按钮时，`sayHi`方法会被调用，弹出一个警告框显示“我被点击了”。
二、方法传参
Vue方法不仅可以执行简单操作，还可以接收参数。在事件处理中传递参数，可以这样实现：
```html
<button @click="sayHi('你好')">说你好</button>
<button @click="sayHi('我被点击了')">说我被点击了</button>
```
对应的JavaScript代码：
```javascript
methods: {
sayHi: function (message) {
alert(message)
}
}
```
每次点击按钮，`sayHi`方法会接收到一个参数，并通过`alert`显示出来。
三、Vue访问原生DOM事件
Vue提供了 `$event` 对象，用于在事件处理函数中访问原生DOM事件。例如，我们可能需要获取到触发事件的元素或事件的其他信息：
```html
<button @click="changeColor('你好',$event)">点击我</button>
<div @mouseover="over('鼠标从我上面滑过',$event)">鼠标从我上面滑过试试</div>
```
在JavaScript中，可以这样使用`$event`：
```javascript
methods: {
changeColor: function (msg, event) {
event.target.style.backgroundColor = 'blue'; // 修改触发事件元素的颜色
},
over: function (msg, event) {
console.log(msg); // 输出提示信息
console.log(event.clientX, event.clientY); // 输出鼠标坐标
}
}
```
在`changeColor`方法中，`event.target`指的是触发事件的DOM元素，我们可以直接修改它的样式。而在`over`方法中，`$event`对象提供了关于鼠标事件的详细信息，如鼠标坐标。
总结来说，Vue的方法与事件是实现用户交互和业务逻辑的核心机制。通过定义`methods`，我们可以封装复杂的操作，通过`@click`、`@mouseover`等事件监听器，我们可以响应用户的操作。同时，Vue还允许我们访问和利用原生DOM事件的特性，增强了其灵活性和功能。在实际开发中，熟练掌握Vue的方法和事件处理将大大提高开发效率和代码的可维护性。
