vue的事件：

　　　vue事件简写：

　　　　　 vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件

　　　　　 vue中就有事件简写   @click='show()'    这会不会就好点了呢！<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

    <body>

　　　　　<div id="box">
　　         <button v-on:click='show()'>按钮1</button>           
　　　　　　　　<button @click='show()'>按钮2</button>     //这俩种方法都可以执行点击的事件，当然所有事件都可以这样简写。

　　　　  </div>

　　　　
        <script src='vue.js'></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:'#box',
　　　　　　　　　　data:{},
　　　　　　　　　　methods:{
　　　　　　　　　　　　　show:function(){
　　　　　　　　　　　　　　　　　alert(1)　
　　　　　　　　　　　　  }
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　});
　　　　　　
　　　　　</script>

    </body>

</html>

　　

　　　vue的事件对象：

　　　　　　vue中当然也有事件对象了 ， 这样@click='show($event)'  在时间函数中传$evevt  函数中接收一下，事件对象就有了。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

    <body>

　　　　　<div id="box">

　　         <button @click='show($event)'>按钮1</button>//传输事件对象

　　　　  </div>

　　　　

        <script src='vue.js'></script>

　　　　　<script>

　　　　　　　new Vue({

　　　　　　　　　　el:'#box',

　　　　　　　　　　data:{},

　　　　　　　　　　methods:{

　　　　　　　　　　　　　show:function(ev){   //接收事件对象

　　　　　　　　　　　　　　　　　alert(ev.clientX)； //这个相信都知道

　　　　　　　　　　　　  }

　　　　　　　　　　}

　　　　　　　　　　

　　　　　　　});

　　　　　　

　　　　　</script>

    </body>

</html>

　　

　　　vue的事件冒泡：（大家在原生中都知道事件冒泡，当然不需要这样的时候需要阻止）。

　　　　　　方法一： @click='show($event)'    我们有了事件对象后，我们函数中是不是就可以利用原生中的 ev.cancelBubble=true；

　　　　　　方法二： @click.stop='show()'    只要在事件后面加 .stop  就可以阻止事件冒泡

　　　vue的阻止默认事件：（元素中都有一些大家不喜欢的事件或不需要的方法）

　　　　　　方法一： @click='show($event)'    我们有了事件对象后，我们函数中是不是就可以利用原生中的 ev.preventDefault();

　　　　 方法二： @click.prevent='show()'   只要在事件后面加 .prevent  就可以阻止默认事件。

　　　vue的键盘事件:

　　　　　　@keydown='show()'     当然我们传个$event  也可以在函数中获 ev.keyCode

　　　　　　我要说的是键盘事件中常用键.

　　　　　　@keydown.enter='show()'    回车执行

　　　　　　@keydown.up='show()'    上键执行

　　　　　　@keydown.down='show()'    下键执行

　　　　　　@keydown.left='show()'    左键执行

　　　　　　@keydown.right='show()'    右键执行

　　　　　　以及....................

vue的事件的更多相关文章

  1. Vue自定义事件

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...

  2. vue.js事件，属性，以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  3. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  4. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  5. vue的事件绑定

    vue事件有两方面内容:DOM事件 和 自定义事件. DOM事件 vue中采用DOM2级事件的处理方式,为IE9以上的浏览器服务.下面我们先来讲解一下什么是DOM2级事件吧! JS中DOM0级事件有两 ...

  6. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

  7. 解决vue 绑定事件会覆盖默认参数的问题

    解决vue 绑定事件会覆盖默认参数的问题 在使用一些ui框架的时候,某些组件的框架中的事件所规定的参数不能满足实际开发的需要,但是直接传入参数会把默认的参数覆盖掉 解决方法:将参数放入箭头函数中,传递 ...

  8. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  9. vue click事件 v-on:click

    v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. (一)使用appium之前为什么要安装nodejs???

    很多人在刚接触appium自动化时,可能会像我一样,按照教程搭建好环境后,却不知道使用appium之前为什么要用到node.js,nodejs到底和appium是什么关系,对nodejs也不是很了解, ...

  2. 洛谷 P3975 / loj 2102 [TJOI2015] 弦论 题解【后缀自动机】【拓扑排序】

    后缀自动机入门. 题目描述 为了提高智商,ZJY 开始学习弦论. 这一天,她在<String theory>中看到了这样一道问题:对于一个给定的长度为 \(n\) 的字符串,求出它的第 \ ...

  3. php引擎文件php.ini优化参数

    无论是Apache环境还是nginx环境,php.ini都适合,php-fpm.conf适合nginx+fcgi的配置. 生产环境php.ini(php.ini-production) php.ini ...

  4. Android微信支付流程及返回码-1之坑

    http://www.51testing.com/html/36/n-3724336.html 之前做微信支付的时候,直接是以库形式引入项目的,虽然一直觉得微信支付的开发文档不太理想,但是印象中也没有 ...

  5. Centos6.5上安装sonarqube6.7.6

    Centos6.5已经装备好,可以联网 sonarqube6.7.6下载地址:https://www.sonarqube.org/downloads/ 步骤: 安装MySQL5.7 MySQL详细的安 ...

  6. Vue vs React: Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

  7. CountDownLatch同步工具--控制多个线程执行顺序

    好像倒计时计数器,调用CountDownLatch对象的countDown方法就将计数器减1,当到达0时,所有等待者就开始执行. java.util.concurrent.CountDownLatch ...

  8. 快速掌握用python写并行程序

    目录 一.大数据时代的现状 二.面对挑战的方法 2.1 并行计算 2.2 改用GPU处理计算密集型程序 3.3 分布式计算 三.用python写并行程序 3.1 进程与线程 3.2 全局解释器锁GIL ...

  9. jqgrid 各种方法参数的使用

    现在jqGrid对象 tableObj 一.获取选中的行 selected = tableObj.jqGrid('getGridParam', 'selrow'); if (selected == n ...

  10. Frequency-tuned Salient Region Detection MATLAB代码出错修改方法

    论文:Frequency-tuned Salient Region Detection.CVPR.2009 MATLAB代码运行出错如下: Error using makecform>parse ...