1、$event 变量

$event 变量用于访问原生DOM事件。

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>vue示例</title>

    </head>

    <body>

        <div id="app">

            点击次数：{{counter}}

            <button @click="handleAdd(1,$evert)">+1</button>

            <button @click="handleAdd(10,$evert)">+10</button>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data: {

                    counter: 0

                },

                methods: {

                    handleAdd: function(counter, event) {

                        //阻止默认事件

                        event.preventDefault();

                        counter = counter || 1;

                        this.counter += counter;

                    }

                }

            });

        </script>

    </body>

</html>

2、修饰符

<!--阻止事件冒泡-->

            <a @click.stop="handle()"></a>

            <!--阻止默认事件-->

            <a @click.prevent="handle()"></a>

            <!--修饰符可以串联-->

            <a @click.prevent.stop="handle()"></a>

            <!--只有事件本身（而非子元素）触发-->

            <a @click.self="handle()"></a>

            <!--只触发一次，组件同样适用-->

            <a @click.once="handle()"></a>

            <!--键盘事件-->

            <a @keyup.enter="handle()"></a>

例子：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>vue示例</title>

    </head>

    <body>

        <div id="app">

            <!--阻止默认事件-->

            <a @click.prevent="handle()" href="https://www.baidu.com/">https://www.baidu.com/</a>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data: {

                    counter: 0

                },

                methods: {

                    handle: function() {

                        console.log(1111)

                    }

                }

            });

        </script>

    </body>

</html>

VUE方法的更多相关文章

  1. Vue方法与事件

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...

  2. 关于 Vue 方法前面的美元符号

    关于 Vue 方法前面的美元符号 学到这一段,不明白什么意思,然后手贱把 $ 删除了,出现未定义方法. vm.$watch('counter', function(nval, oval) { aler ...

  3. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  4. vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法

     <div id="main" > <button id='but1' type="button" v-on:click="save ...

  5. js和vue方法的相互调用（iframe父子页面的方法相互调用）。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  6. Vue 方法与事件处理器

    按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...

  7. iframe 父页面调用子页面的vue方法

                    父页面代码:            html: <div id="app"> //省略业务代码x行..... <iframe sr ...

  8. vue 方法相互调用注意事项与详解

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法: 可以直接这样调用:this.$options.methods.test(); this.$options.met ...

  9. 项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）

    总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...

  10. vue方法中传递dom对象示例

    <div id="app"> <input type="text" v-on:keyup="onlyNum($event)" ...

随机推荐

  1. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  2. vue学习指南：第四篇(详细) - vue的 :class 和 :style

    1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...

  3. Mac OSX(Mac OS10.11) 安装 pwntools 失败的最新解决方案

    pwntools是一个 CTF 框架和漏洞利用开发库,用 Python 开发,由 rapid 设计,旨在让使用者简单快速的编写 exploit. 网上针对 Mac OS 的安装教程大多都是基于 pip ...

  4. springBoot添加日志管理

    一. 近期自己的项目想要一个记录日志的功能,而springboot本身就内置了日志功能,然而想要输入想要的日志,并且输出到磁盘,然后按天归档,或者日志的切分什么的,自带的日志仅仅具有简单的功能,百度了 ...

  5. 2.InfluxDB-InfluxQL基础语法教程--目录

    本文翻译自官网,官方文档地址:(https://docs.influxdata.com/influxdb/v1.7/query_language/data_exploration/) InfluxQL ...

  6. 3-11 group操作拓展

    In [1]: import pandas as pd import numpy as np df=pd.DataFrame({'A':['foo','bar','foo','bar', 'foo', ...

  7. shell编写for例子

    1.批量打包sh文件 #!/bin/bash -name "*.sh"` do tar -czvf $i.tgz $i done 2.批量解压文件 #!/bin/bash -nam ...

  8. day31_8.12并发编程二线程

    一.进程间的通信 在进程中,可以通过Queue队列进行通信,队列有两个特点: 1.先进先出.(先来的数据先被取出) 2.管道式存取.(数据取出一次后就不会在有了) 在python中有以下方法来操作数据 ...

  9. C++使用OpenCV打印运行时间

    代码 int64 tall = cv::getTickCount(); std::cout<< "time:" << (cv::getTickCount() ...

  10. Jmeter接口测试，怎么在下一个接口调用上一个接口的数据

    常用的两种方式,第二种容易上手1.使用正则提取器 jmeter 如何将上一个请求的结果作为下一个请求的参数——使用正则提取器(http://www.cnblogs.com/0201zcr/p/5089 ...