vue.js 中如何绑定事件? 下面本篇文章给大家介绍一下 vuejs 中的事件绑定. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
vuejs 中的事件绑定, 使用 < v-on: 事件名 = 函数名 > 来完成的, 这里函数名是定义在 Vue 实例中的 methods 对象中的, Vue 实例可以直接访问其中的方法.
事件绑定方式
1, 直接在标签中写 JS 方法
<button v-on:click="alert('hi')"> 执行方法的第一种写法 </button>
2, 调用 method 的办法
- <button v-on:click="run()"> 执行方法的第一种写法 </button>
- <button @click="run()"> 执行方法的 简写 写法 </button>
- export default {
- data () {
- return {
- msg: '你好 vue',
- list:[]
- }
- },
- methods:{
- run:function(){
- alert('这是一个方法');
- }
- }
- }
(1) 方法传参, 方法直接在调用时在方法内传入参数
- <button @click="deleteData('111')">
- 执行方法传值 111
- </button>
- <button @click="deleteData('222')">
- 执行方法传值 2222
- </button>
(2) 传入事件对象
- <button data-aid='123' @click="eventFn($event)"> 事件对象 </button>
- eventFn(e){
- console.log(e);
- // e.srcElement dom 节点
- e.srcElement.style.background='red';
- console.log(e.srcElement.dataset.aid); /* 获取自定义属性的值 */
- }
事件修饰符
1,stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程
方法一: @click='show($event)' 我们有了事件对象后, 我们函数中是不是就可以利用原生中的 e.cancelBubble=true;
方法二: @click.stop='show()' 只要在事件后面加 .stop 就可以阻止事件冒泡
举个例子:
实例: 如下点击内部点击, 阻止了冒泡过程, 即只执行 tz 这个方法, 如果不加. stop, 先执行 tz 方法, 后执行 gett 方法. 即通过了冒泡这个过程.
<div v-on:click="gett">
外部点击
- <div v-on:click.stop="tz">
- 内部点击
- </div>
- </div>
- 2,prevent // 阻止默认事件:
方法一: @click='show($event)' 我们有了事件对象后, 我们函数中是不是就可以利用原生中的 e.preventDefault();
方法二: @click.prevent='show()' 只要在事件后面加 .prevent 就可以阻止默认事件.
举个例子: 阻止了 a 标签的默认刷新
- <a href="" v-on:click.prevent>
- 点击
- </a>
- 3,capture // 添加事件监听器时使用事件捕获模式, 即在捕获模式下触发
实例: 在点击最里层的点击 6 时, gett 方法先执行, 因为 gett 方法在捕获模式执行的, 先与冒泡事件. 下列执行顺序 geet->set->tz , 因为后俩个还是冒泡模式下触发的事件.
- <div v-on:click.capture="gett">
- 外部点击 5
- <div v-on:click="tz">
- 内部点击 5
- <div v-on:click="set">
- 点击 6
- </div>
- </div>
- </div>
- 4,self // 当前元素自身时触发处理函数时才会触发函数
原理: 是根据 event.target 确定是否当前元素本身, 来决定是否触发的事件 / 函数
实例: 如果点击内部点击 2, 冒泡不会执行 gett 方法, 因为 event.target 指的是内部点击 2 的 dom 元素, 不是外部点击 1 的, 所以不会触发自己的点击事件.
<div v-on:click.self="gett">
外部点击 1
- <div v-on:click="tz">
- 内部点击 2
- </div>
- </div>
- 5,once // 只触发一次
实例:
<div v-on:click.once="tz">once</div>
6, 键盘事件
方法一:@keydown='show()' 当然我们传个 $event 也可以在函数中获 ev.keyCode
- if(ev.keyCode==13){
- alert('你按了回车键!')
- }
方法二:
- <input type="text" @keyup.enter="show()"> 回车执行
- <input type="text" @keydown.up='show()'> 上键执行
- <input type="text" @keydown.down='show()'> 下键执行
- <input type="text" @keydown.left='show()'> 左键执行
- <input type="text" @keydown.right='show()'> 右键执行
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17200.html