版权声明:出处http://blog.csdn.net/qq20004604

 

目录(?)[+]

 

资料来于官方文档:

http://cn.vuejs.org/guide/events.html

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读

 

 

(二十二)方法处理器

①v-on的标准用法

用于监听DOM事件,典型的就是v-on:click,处理的方法放在methods属性里

会默认传一个参数,代码如下:

  1. <button @click="test">点击</button>
  2. methods: {
  3. test: function (evt) {
  4. console.log(evt);
  5. }
  6. }

这里的evt,是标准的鼠标点击事件,类似jQuery的click事件的回调函数中的参数。

可以通过this来找到data属性里的值(或许也能找到其他几个),例如:

  1. data: {
  2. items: "test"
  3. },
  4. methods: {
  5. test: function (evt) {
  6. console.log(this.items);
  7. console.log(evt);
  8. }
  9. }

这里的this.items,就是data的items这个变量;

②内联语句处理器

给v-on事件传一个固定参数

  1. <button @click="test('a')">点击搜索age</button>

当这个时候,函数的第一个参数就不是鼠标点击事件了,而是字符串a

  1. test: function (mes) {
  2. console.log(mes);
  3. }

mes的值是’a’

$event

如果需要给他一个像上面一样的鼠标点击事件时,则使用$event作为参数(他和不传参数时的默认鼠标事件对象是相同的);

使用Vue实例的变量

如果需要传一个data属性里的值,则直接放属性名

例如:

  1. <div id="app">
  2. <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>
  3. </div>
  4. <script>
  5. var test = {name: "test"};
  6. var vm = new Vue({
  7. el: '#app',
  8. data: {
  9. items: "test"
  10. },
  11. methods: {
  12. test: function (msg, evt) {
  13. console.log(msg);
  14. evt.preventDefault();//阻止默认动作,比如这里是页面跳转
  15. }
  16. }
  17. })
  18. </script>

输出:test和BUTTON

③事件修饰符(针对v-on)

修饰符

效果

备注

.prevent

阻止html元素的默认事件

类似evt.preventDefault()

.stop

阻止事件冒泡

keyup.数字

当该数字表示的按键弹起时

有别名

keyup.enter

回车

按下回车时

keyup.tab

Tab按钮

tab切入该input时

keyup.delete

del键

会导致原始的delete删除功能失效

keyup.esc

esc键

按下esc时

keyup.space

空格键

不会使空格功能失效(即按下空格时,既空格,又触发事件)

keyup.up

键盘方向键的上

上键同时会使光标到输入框的最左边

(焦点在输入框时才生效,按键弹起时生效,下同)

keyup.down

键盘方向键的下

到输入框的最后面

keyup.left

方向左键

光标左移

keyup.right

方向右键

光标右移

.self

当前元素本身(非子元素)时触发事件

类似冒泡的时候找最顶层,一般用于click之类的鼠标事件(1.0.16之后)

.capture

按照capture模式来处理

简单来说,根据我推测,是根据捕获顺序触发冒泡(原本模式是后捕获先冒泡,这个正好相反)(1.0.16之后)

对于.self来说,例如以下代码:

  1. <div id="app">
  2. <div @click.self="test" class="a">
  3. <div class="b">
  4. </div>
  5. </div>
  6. </div>
  7. <script>
  8. var test = {name: "test"};
  9. var vm = new Vue({
  10. el: '#app',
  11. data: {
  12. items: "test"
  13. },
  14. methods: {
  15. test: function (evt) {
  16. console.log(evt);
  17. }
  18. }
  19. })
  20. </script>

只有当点击到非div class=’b’的区域时,才会触发事件;

④自定义按键别名:

规范:

Vue.directive(“on”),keyCode.别名 = 按键码;

示例:

  1. Vue.directive("on").keyCode.z = 122;

这个指键盘码为122(小写z)的别名命名为z,当按键键盘的z键时(无论大小写),都会触发事件。

注意,这个要写在实例声明之后(推测是要含有该按键的template被创建后才有效)

Vuejs——v-on的更多相关文章

  1. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  2. Vuejs使用笔记 --- component内部实现

    现在来系统地学习一下Vue(参考vue.js官方文档): Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件. Vue.js拥抱数据驱动的视图概念,这意味着我们 ...

  3. VueJS搭建简单后台管理系统框架(一)环境搭建

    做这份笔记的时候,Vue.js还是1.0,10月份Vue已经升级到2.0,这边也进行相应的更新,用Vue2.0进行一个简单的环境搭建 饿了么也刚好开源了其基于Vue.js的UI框架element-ui ...

  4. 2016年,总结篇 之 VueJS 如何入门(一)

    接着 2016 年的总结,我们来看看 2016年 国内最火且没有之一的前端MVVM 框架 VueJs 虽然 到写文章的这个时间点,VueJs已经发布了 2.1.x 了, 但是对于很多 Vuejs 的初 ...

  5. vuejs学习笔记(1)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  6. vuejs学习笔记(2)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  7. 二、VueJs 填坑日记之基础项目构建

    在上一篇文章中,大致介绍了一下本系列博文以及学习vuejs我们需要了解的一些概念,希望大家认真阅读,所谓知己知彼,百战百胜,学习也一样,工欲善其事,必先利其器,要想学好vuejs,那前提的概念一定要熟 ...

  8. 七、VueJs 填坑日记之渲染一个列表

    在上一篇博文中,我们对vue组件有了一个简单的认识和大概的理解.在之前认识项目结构的时候,我们在/src目录中创建了一个components的文件夹,而今天就要用到了,这个文件夹的作用就是放置我们的自 ...

  9. VueJs笔记

    在使用Vuejs做开发的过程中,偶尔会遇到,动态给data添加一个属性这个属性确不能被动态监听到,只能用this.$set(prop,'prop',val)来强制监听,但是有些情况下又不需要这样操作. ...

  10. 2016年,总结篇 续 如何从 JQ 转到 VueJS 开发(一)

    接着 2016 年的总结,我们来看看 2016年 国内最火且没有之一的前端MVVM 框架 VueJs 虽然 到写文章的这个时间点,VueJs已经发布了 2.1.x 了, 但是对于很多 Vuejs 的初 ...

随机推荐

  1. org.hibernate.LazyInitializationException...no session or session was closed

    org.hibernate.LazyInitializationException:failed to lazily initialize a collection of role:cn.its.oa ...

  2. Tomcat 安装与配置

    1. 将压缩文件“apache-tomcat-7.0.62.zip ”上传到linux系统目录:/home/下 2. 进入目录 cd /home/ 解压文件,执行如下命令:unzip apache-t ...

  3. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  4. ORACLE的监听日志太大,客户端无法连接

    数据库sqlplus能连接,plsql连接失败,也不报错,就定位到了是不是监听出了什么问题,删除监听,重建监听,重启监听,各种尝试都没解决问题. 却是监听日志太大导致的问题,一下是处理步骤: 查看监听 ...

  5. linux平台下Hadoop下载、安装、配置

    在这里我使用的linux版本是CentOS 6.4      CentOS-6.4-i386-bin-DVD1.iso      下载地址: http://mirrors.aliyun.com/cen ...

  6. Flex 布局:语法篇

    网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊布局非常不方便,比如, ...

  7. mac下sublime text3 安装px转rem插件

    本人使用的是os-x系统,即mac系统,每次使用单位rem用其他网页转换很不方便.自己捣腾了一下插件,现在共享给大家 第一步: 先下载插件: https://github.com/narrow-gat ...

  8. linux升级openssh7.4sp1

    1.准备相关的包 openssh下载地址:http://mirror.internode.on.net/pub/OpenBSD/OpenSSH/portable/ openssl相关包下载:http: ...

  9. cpp(第四章)

    1.索引比数组长度少1: 2.c++中不能数组赋给另一个数组:只能定义时才能使用初始化: 3.c++11中{}内为空,默认赋值为0,而c++中{}如果只对部分初始化,其他部分将被设置为0:c++11使 ...

  10. 华为A199:近期不会再买华为的手机了

    为了支持国货,也省点钱,买了个华为A199: 缺点: 没有google play market很复杂的刷机后才能装Gmail   不过也有亮点: 自带录音功能,老htc通过软件也只能录单方向的哦关机闹 ...