基本用法

  以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1:

<div id = "app">
点击次数:{{ counter }}
<button @click="counter++">+1</button>
</div>
<script>
new Vue({
el: '#app',
data:{
counter: 0
}
})
</script>

  @click的表达式可以直接使用JavaScript语句,也可以是一个在Vue实例中methods选项内的函数名,比如再增加一个按钮,点击一次,计数器加10:

<div id = "app">
点击次数:{{ counter }}
<button @click="handleAdd()">+1</button>
<button @click="handleAdd(10)">+10</button>
</div>
<script>
new Vue({
el: '#app',
data:{
counter: 0
},
methods:{
handleAdd: function(count) {
count = count || 1;
//this指向当前Vue实例app
this.counter += count;
}
}
})
</script>

  在methods中定义了我们需要的方法供@click调用,需要注意的是,@click调用的方法名后可以不加括号。此时,如果该方法有参数,默认会将原生事件对象event传入,可以尝试修改为@click="handleAdd",然后在handleAdd内打印出count参数看看。在大部分业务场景中,如果方法不需要传入参数,为了简便可以不写括号。

  这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合,违背分离的原理,实则刚好相反。因为通过HTML就可以知道调用的是哪个方法,将逻辑与DOM解耦,便于维护。最重要的是,当ViewModel销毁时,所有的事件处理器都会自动删除,无需自己清理。

  Vue提供了一个特殊变量$event,用于访问原生DOM事件,例如下面的实例可以阻止链接打开:

<div id = "app">
<a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
</div>
<script>
new Vue({
el: '#app',
data:{
counter: 0
},
methods:{
handleAdd: function(message, event) {
event.preventDefault();
window.alert(message);
}
}
})
</script>

修饰符

  在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现,在@绑定的事件后加小圆点".",再跟一个后缀来使用修饰符。Vue支持以下修饰符:

  ♦ .stop

  ♦ .prevent

  ♦ .capture

  ♦ .self

  ♦ .once

  具体的用法:

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handle"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="handle"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="handle">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div @click.self="handle">...</div>
<!-- 只触发一次,组件同样适用 -->
<div @click.once="handle">...</div>

  在表单元素上监听键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:

<!-- 只有在keycode是13时调用vm.submit() -->
<input @keyup.13="submit">

  也可以自己配置具体按键:

Vue.config.keyCodes.f1 = 112;
//全局定义后,就可以使用@keyup.f1

  除了具体的某个keyCode外,Vue还提供了一些快捷名称,以下是全部的别名:

  ♦ .enter

  ♦ .tab

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

  ♦ .esc

  ♦ .space

  ♦ .up

  ♦ .down

  ♦ .left

  ♦ .right

  这些按键修饰符也可以组合使用,或和鼠标一起配合使用:

  ♦ .ctrl

  ♦ .alt

  ♦ .shift

  ♦ .meta(Mac下是Command键,Windows下是窗口建)

<!-- Shift + S -->
<input @keyup.shift.83="handleSave">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

未完待续。。。

Vue 2.0学习(七)方法与事件的更多相关文章

  1. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

  2. Vue 2.0学习(三)指令与事件

    指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v- ...

  3. Vue 2.0学习(六)内置指令

    基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="ap ...

  4. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

  5. Vue 2.0学习(一)简介

    简介 Vue是一套用于构建用户界面的渐进式框架.简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既 ...

  6. Vue 2.0学习(四)计算属性

    {{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div ...

  7. Vue 2.0学习(二)数据绑定

    Vue实例对象 创建一个vue应用很简单,通过构造函数Vue就能创建一个Vue的根实例: var app = new Vue({ el: '#app', data: { message: 'Hello ...

  8. vue组件传参的方法--bus事件总线

    定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...

  9. Vue 2.0学习(五)v-bind及class与style绑定

    DOM元素经常会动态地绑定一些class类名或style样式. 基本用法 <div id="app"> <a v-bind:href="url" ...

随机推荐

  1. docker使用host模式启动nginx

    mkdir -p /root/nginx-docker-demo/html docker run --network=host --rm --name mynginx --volume /root/n ...

  2. 【CodeForces】713 C. Sonya and Problem Wihtout a Legend

    [题目]C. Sonya and Problem Wihtout a Legend [题意]给定n个数字,每次操作可以对一个数字±1,求最少操作次数使数列递增.n<=10^5. [算法]动态规划 ...

  3. mysql-front导入数据失败:“在多字节的目标代码页中,没有此 Unicode 字符可以映射到的字符”

    mysql-front导入sql文件失败,弹出框显示如下: 解决方法:在选择文件时,选择合适的字符集即可 参考:http://www.th7.cn/db/mysql/201604/185149.sht ...

  4. CMDB概述(二)

    运维自动化路线: cmdb的开发需要包含三部分功能: ·采集硬件数据  ·API ·页面管理 执行流程:服务器的客户端采集硬件数据,然后将硬件信息发送到API,API负责将获取到的数据保存到数据库中, ...

  5. 10 - 函数嵌套-作用域-闭包-LEGB-函数销毁

    目录 1 函数嵌套 2 作用域 2.1 global关键字 3 闭包 3.1 nonlocal关键字 4 默认值的作用域 5 变量名解析原则LEGB 6 函数的销毁 1 函数嵌套         一个 ...

  6. python基础之内置异常对象

    前言 什么叫异常?简单来说就是程序运行发生了预计结果之外的情况从而导致程序无法正常运行.而python解释器将一些常见的异常情况在它发生时打包成一个异常对象,我们可以通过捕捉这些异常对象从而进行处理, ...

  7. python之supervisor进程管理工具

    supervisor是python写的一个管理进程运行的工具,可以很方便的监听.启动.停止.重启一个或多个进程:有了supervisor后,就不用字节写启动和监听的shell脚本了,非常方便. sup ...

  8. 不老的神器:安全扫描器Nmap渗透使用指南【转】

    介绍 nmap是用来探测计算机网络上的主机和服务的一种安全扫描器.为了绘制网络拓扑图Nmap的发送特制的数据包到目标主机然后对返回数据包进行分析.Nmap是一款枚举和测试网络的强大工具. 特点 主机探 ...

  9. ACM International Collegiate Programming Contest World Finals 2013

    ACM International Collegiate Programming Contest World Finals 2013 A - Self-Assembly 题目描述:给出\(n\)个正方 ...

  10. SwitchSharp代理插件的安装和使用

    参考链接: http://bbs.feng.com/read-htm-tid-8227283.html 安装参考链接: http://jingyan.baidu.com/article/380abd0 ...