Vue- 事件基本使用

2023-06-06
北京
本文字数：1232 字
阅读完需：约 4 分钟

事件基本使用

在这里我们使用单击事件为例，简单讲讲在 vue 中单击事件的编写以及细节问题

在 vue 中想要实现点击事件，需要新增一个指令:v-on:click,后面跟对应的函数

<button v-on:click="showInfo">点我提示信息</button>

复制代码

对于这个函数的编写，也是有讲究的，如果按照下图直接按照传统函数 JS 编写会报错

因为 vue 实例读取不到这个函数，我们需要配置 methods 属性，把事件的回调写到里面

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head>
<body>    <div id="root">        <h2>欢迎学习：{{name}}</h2>        <button v-on:click="showInfo">点我提示信息</button>    </div>    <!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） -->    <script type="text/javascript">          Vue.config.productionTip = false        const vm=new Vue({            el:'#root',            data:{                name:'vue'            },            methods:{                 showInfo(){                 alert("你好！")                }            }        })     </script></body>
</html>

复制代码

再次运行，完美解决

其他回调函数也是一样的写法，都要写在 vue 的属性 methods 里面,让 vue 可以读取到这个回调函数

验证问题

1 回调函数是否可以传参

2 回调函数里面的 this 是什么

验证 1：发现只能接受到第一个参数，第一个参数就是调用函数本身的元素，我们通过这个元素获取到了它对应的文本

验证 2：函数里面当前的 this 就是 vue 实例对象

一个原则

当我们写 vue 回调函数的时候，最好不要写成箭头函数，不然这个 this 就不是 vue 实例对象，而是全局的 window 对象

所有被 vue 管理的函数，最好都要写普通函数，不要写成剪头函数，不然就使用不了 this 了

所以有一个原则：所有被 vue 管理的函数，最好都要写普通函数，不要写成剪头函数，不然就使用不了 this 了

简写模式

v-on-click 可以简写成 @click,效果是一样的(v-on=@)，由于后者编写比较简便，通常后者使用的更多

自由传参以及参数占位符

如果我们想传参，比如点击删除按钮,需要吧 id 传到函数里面，我们可以在方法后跟参数

但是这样就收不到 event 了

那么这个问题怎么解决呢？其实 vue 提供了占位符可以给供我们使用

注意：$event 是 vue 的关键字，只能这么写，不然识别不出来，而且参数顺序必须对上！

总结

事件的基本使用：
1 使用 v-on:xxx 或者简写成 @xxx 绑定事件，其中 xxx 是事件名称
2 事件的回调需要配置在 methods 对象中，最终会在 vm 上
3 methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了
4 methods 中配置的函数，都是被 vue 管理的函数，this 的指向是 vm 或组件实例对象 5 @click="xxx"和 @click="xxx(100,$event)"效果是一样的，但是后者可以传参，可以用 $event 作为参数占位符，需要注意传参和接受参数的顺序是否一致 10.2 事件修饰符

发布于: 13 分钟前阅读数: 5

原文链接:【http://xie.infoq.cn/article/acc7bb1b73c904c1fce452cad】。文章转载请联系作者。

不觉心动

关注

还未添加个人签名 2019-05-27 加入

还未添加个人简介

发布

暂无评论

创作场景