@在Vue中的作用_先来个简单的例子_答在Vue中@符号是用来绑定事件处理函数的

一、@在Vue中的作用

在Vue.js里，@符号就像是给DOM元素装了一个“按钮”，当某个事件（比如点击）发生时，就会自动调用你指定的一段JavaScript代码。简单来说，它就是一个绑定事件的小助手。

二、@的基本使用方法

想用@？先来个简单的例子：

点击我

上面的代码中，@click就是告诉Vue，当按钮被点击时，就调用`doSomething`这个方法。

三、@的常见事件类型

Vue.js支持很多种事件，比如：

四、使用事件修饰符

有时候，我们可能不想让某个事件影响其他元素的响应，这时候就需要用到事件修饰符：

• @stop 阻止事件冒泡
• @prevent 阻止默认行为
• @capture 在捕获阶段处理事件
• @self 只在事件目标是当前元素时触发
• @once 事件只触发一次

比如，我们可能想让按钮点击后不会刷新页面，可以这样写：

提交








五、传递事件参数


在事件处理函数中，我们有时候需要知道事件的更多细节，这时候就可以传递参数：







点击我








然后在方法里就可以使用这个参数了：







methods: {


  handleClick(event) {


    console.log(event.clientX, event.clientY);


  }


}








六、使用内联处理函数


有时候我们不想写一个独立的方法，可以直接在模板里写一个简单的函数：







点击我








七、实例说明


来看一个完整的例子：