Vue.js实例学习：事件处理

最新推荐文章于 2024-08-28 11:43:01 发布

白小宇

最新推荐文章于 2024-08-28 11:43:01 发布

阅读量1.1k

点赞数

分类专栏： web前端 Vue 文章标签： javascript vue-js 实例事件处理

本文链接：https://blog.csdn.net/b954960630/article/details/79489055

版权

本文详细介绍了Vue.js中的事件处理，包括监听事件、事件处理方法，如无参数方法和有参数方法，并探讨了事件修饰符的用法，如.stop、.prevent等，以及按键修饰符和系统修饰键的应用，帮助开发者更好地理解和使用Vue.js进行事件操作。

摘要由CSDN通过智能技术生成

一、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。（ v-on: 简写为@）

<div id="app">
  <button @click = "count++">加 1</button>
  <button @click = "count--">减 1</button>
  <p>{
  {count}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    count:0
  }
});
</script>

输出：初始值为0
这里写图片描述
点击"加1"就增加1，同理点击"减1"就减少1

二、事件处理方法

许多事件处理逻辑会很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

1、调用无参数方法

顺便补一下js的event:

将even（事件）作为参数，就是这个“点击”事件，通过这个even，可以获取到event.target，就是点击的对象等等属性。PS：那个even参数可加可不加，需要用到的时候就加。
event也就是事件的意思，就相当于把这个事件的对象传给这个方法，event包含了这个事件的所有参数和信息

<div id="app">
  <button @click = "greet">button</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    name:"bty"
  },
  methods:{
    greet:function(event){//因为上面没有给该函数传递参数,所以给他个参数时,系统默认为event,可以随便起名字(阿毛,阿狗)

最低0.47元/天解锁文章