美文网首页
vue:事件处理器

vue:事件处理器

作者: 成都圣安米悦心理咨询 | 来源:发表于2017-11-07 11:38 被阅读0次

Vue.js 事件处理器

事件监听可以使用 v-on 指令:

v-on

增加 1

这个按钮被点击了 {{ counter }} 次。

new Vue({

el: '#app',

data: {

counter: 0

}

})

尝试一下 »

通常情况下,我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

v-on

Greetvar app = new Vue({

el: '#app',

data: {

name: 'Vue.js'

},

// 在 `methods` 对象中定义方法

methods: {

greet: function (event) {

// `this` 在方法里指当前 Vue 实例

alert('Hello ' + this.name + '!')

// `event` 是原生 DOM 事件

if (event) {

alert(event.target.tagName)

}

}

}

})

// 也可以用 JavaScript 直接调用方法

app.greet() // -> 'Hello Vue.js!'

尝试一下 »

除了直接绑定到一个方法,也可以用内联 JavaScript 语句:

v-on

Say hiSay whatnew Vue({

el: '#app',

methods: {

say: function (message) {

alert(message)

}

}

})

尝试一下 »

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

......

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

全部的按键别名:

.enter

.tab

.delete(捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

实例

Do something

相关文章

  • 第二天_vue基础语法_Vue.js2.0+Node+ES6+M

    模板语法 class和style绑定 条件渲染 vue事件处理器 vue组件

  • vue:事件处理器

    Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on 增加 1 这个按钮被点击了 {{ coun...

  • Vue事件处理器

    访问原生DOM事件用$event获取 事件修饰符 //阻止单击事件冒泡@click.prevent //提交事...

  • Vue基础使用

    简介 创建vue实例模板语法计算属性指令事件处理器表单控件生命周期 Vue实例 Vue组件介绍 组件系统是将一个大...

  • 学习Vue(事件处理器)

    事件处理器 事件监听可以使用 v-on 指令: 进行千米与米之间的换算:

  • 响应事件

    添加事件处理器 在注册事件处理器时,函数名后面不能有括号。 删除事件处理器 要删除事件处理器,只需要简单地给它赋值...

  • 七、方法与事件

    当ViewModel 销毁时,所有的事件处理器都会自动删除,无须自己清理。 Vue 提供了一个特殊变量$event...

  • Vue.js 事件处理器

    事件监听可以使用 v-on 指令: 通常情况下,我们需要使用一个方法来调用 JavaScript 方法。 v-on...

  • 6、Vue_事件处理器

    事件监听:v-on PS.v-on的简写语法是@ 1、一般情况下,会使用一个方法来调用JavaScript方法,然...

  • Vue.js 事件处理器

    事件监听可以使用v-on指令:v-on 通常情况下,我们需要使用一个方法来调用JavaScript方法。v-on可...

网友评论

      本文标题:vue:事件处理器

      本文链接:https://www.haomeiwen.com/subject/ykndmxtx.html