Vue.js 教程 (4) : 侦听事件
发布在Vue.js 中文入门2014年2月11日view:20963
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

基本使用

在 Vue.js 里,可以用 v-on 指令来侦听DOM事件:

<div id="demo">
    <h1>{{n}}</h1>
    <button v-on="click: onClick">click me</button>
</div>

这里冒号前的 click 是这个指令的参数,也就是我们所侦听的事件。onClick 则必须是在创建 ViewModel 实例的时候 methods 选项里的一个函数:

new Vue({
    el: '#demo',
    data: {
        n: 1
    },
    methods: {
        onClick: function (e) {
            // e是原生的DOM事件对象
            // this 指向该ViewModel实例
            this.n++
        }
    }
})

效果:http://jsfiddle.net/yyx990803/S6EE3/

键盘事件搭配 key 过滤器

之前我们说过 key 过滤器可以和 v-on 搭配使用:

<input v-on="keyup: submit | key 13">

这里只有当 keyup 事件的 event.keyCode 等于13的时候,submit 函数才会被调用。同时 Vue.js 提供了一些常用按键的别名,比如13就是'enter',可以不需要记住对应的keyCode:

<input v-on="keyup: submit | key enter">

和上面的效果是一样的。全部可用的别名请参考文档

指令中使用表达式

有时候一些简单的事件可以直接在指令中使用表达式:

<button v-on="click: n++"></button>

这和第一个例子实现的效果是一样的。

评论
发表评论
2年前

现在keyup和过滤器应该不能一起使用吧 Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。

3年前
赞了此文章!
3年前
赞了此文章!
3年前
添加了一枚【评注】:这里语法写错 了
3年前
添加了一枚【评注】:click点击没反应。。。
3年前
  • -我用的是1.0的 ,,,教程是0.10的 我的锅
3年前

为什么key 过滤器用不了呢~~

3年前
添加了一枚【评注】:为什么key 过滤器用不了呢~~
3年前

@尤小右 现在好多例子都运行不了哦~~大大

3年前

@尤小右 可用的别名 文档 404 了

3年前
添加了一枚【评注】:page not found 404!!!
4年前
添加了一枚【评注】:* data里存放v-model * methods里存放方法
4年前
添加了一枚【评注】:Event 对象
5年前

@OdeForCruelty v-on="eventA: handlerA, eventB: handlerB" 这样子

5年前
添加了一枚【评注】:有没有多事件的写法
5年前

@题叶 支持大部分 js 的语法,只要是一个可以被 return 的单个表达式就可以。出于安全性考虑,所有的变量会被转化成在当前 vm 上提取,所以全局变量除了 Math 之外都不能使用,另外不能出现 constructor 标示符和 unicode 字符。

5年前

指令里边默认支持的表达式有哪些啊, 测试上是全部吗? https://github.com/yyx990803/vue/blob/master/test/functional/fixtures/expression.html

5年前

@尤小右 原来如此 大大的很多语法用着确实方便 顺手把入门补完吧。。

5年前

@雷欧尼克斯 整个API的思路和avalon是不一样的,更类似Backbone的风格,另外就是不强加一个模块系统,让用户可以选自己喜欢的模块系统。我还觉得avalon别扭呢…

5年前

@雷欧尼克斯 因为可以 Vue.extend( options ),进行类一样的扩展,同时这种声明式的API易于模块化。

5年前

vm的结构好别扭 像avalon那样放开管理不是更容易使用么 除了让语法更漂亮还有什么特别的用意么

WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏