锐客网

  1. 首页 > it技术 > >

Vue如何绑定事件

首先不管三七二十八引入 vue.js 文件再说


指令 v-on 用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码，简写为 @ ，其事件类型由参数决定，与 v-bind 指令相同，冒号后面是参数，举个栗子如下
count: {{count}}

const vm = new Vue({ el: '#app', data:{ count: 0 } })

【结果】
Vue如何绑定事件
文章图片

v-on 还可以接收一个需要调用的方法名称，方法写在 methods 对象中。举个栗子如下
count: {{count}}

const vm = new Vue({ el: '#app', data: { count: 0 }, methods: { addCount() { this.count++; } } })

【结果】
Vue如何绑定事件
文章图片

【注】methods 中的函数，可以直接代理给Vue实例对象，因此可以直接运行 vm.addCount()
除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法
count: {{ count }}

const vm = new Vue({ el: '#app', data: { count: 0 }, methods: { addCount(num) { this.count += 5; } } })

【Vue如何绑定事件】【结果】
Vue如何绑定事件
文章图片

在内联语句中使用事件对象时，可以利用特殊变量 $event.
count: {{ count }}

const vm = new Vue({ el: '#app', data: { count: 0 }, methods: { addCount(num, e) { this.count += 5; console.log(e.target) } } })

【结果】
Vue如何绑定事件
文章图片

【注】可以动态绑定事件，Vue版本需要2.6.0+
count: {{ count }}

const vm = new Vue({ el: '#app', data: { event:'click', count: 0 }, methods: { addCount(num, e) { this.count += 5; } } })

可以不带参数绑定一个对象，Vue版本需要2.4.0+，不支持修饰符和函数传参，语法如下
.bg { width: 100px; height: 100px; }


const vm = new Vue({ el: '#app', data: { count: 0, objectA:{ backgroundColor: '#f88' } }, methods: { doThis() { this.objectA = { backgroundColor: '#88f' } }, doThat() { this.objectA = { backgroundColor: '#f8f' } } } })

【结果】
Vue如何绑定事件
文章图片

【拓展】为什么在HTML中监听事件
  1. 轻松定位JavaScript代码里对应的方法
  2. ViewModel 代码可以是非常纯碎的逻辑，和DOM完全解耦，更易于测试
  3. 当ViewModel被销毁时，所有事件处理器都会自动被删除

    推荐阅读


    上一篇：批量删除

    下一篇：蓝桥杯-Python 试题 基础练习 数列排序