1、$event 变量

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>vue示例</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             点击次数：{{counter}}
  12.             <button @click="handleAdd(1,$evert)">+1</button>
  13.             <button @click="handleAdd(10,$evert)">+10</button>
  14.         </div>
  15.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  16.         <script type="text/javascript">
  17.             var app = new Vue({
  18.                 el: '#app',
  19.                 data: {
  20.                     counter: 0
  21.                 },
  22.                 methods: {
  23.                     handleAdd: function(counter, event) {
  24.                         //阻止默认事件
  25.                         event.preventDefault();
  26.  
  27.                         counter = counter || 1;
  28.                         this.counter += counter;
  29.                     }
  30.                 }
  31.             });
  32.         </script>
  33.     </body>
  34.  
  35. </html>

2、修饰符

  1. <!--阻止事件冒泡-->
  2.             <a @click.stop="handle()"></a>
  3.             <!--阻止默认事件-->
  4.             <a @click.prevent="handle()"></a>
  5.             <!--修饰符可以串联-->
  6.             <a @click.prevent.stop="handle()"></a>
  7.             <!--只有事件本身（而非子元素）触发-->
  8.             <a @click.self="handle()"></a>
  9.             <!--只触发一次，组件同样适用-->
  10.             <a @click.once="handle()"></a>
  11.             <!--键盘事件-->
  12.             <a @keyup.enter="handle()"></a>

示例：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>vue示例</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             <!--阻止默认事件-->
  12.             <a @click.prevent="handle()" href="https://www.baidu.com/">https://www.baidu.com/</a>
  13.         </div>
  14.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  15.         <script type="text/javascript">
  16.             var app = new Vue({
  17.                 el: '#app',
  18.                 data: {
  19.                     counter: 0
  20.                 },
  21.                 methods: {
  22.                     handle: function() {
  23.                         console.log(1111)
  24.                     }
  25.                 }
  26.             });
  27.         </script>
  28.     </body>
  29.  
  30. </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. 在class中获取web资源

    背景介绍 项目中用jasperreport做报表,模板文件为web资源,不在classpath之中.class又需要获取模板文件,结合数据源,生成pdf格式的报表. 之前的做法是定义一个public ...

  2. CAS无锁操作

    https://coolshell.cn/articles/8239.html 主要讲的是<Implementing Lock-Free Queues>的论点,具体直接看论文最好.这里总结 ...

  3. poj 1298(水题）

    The Hardest Problem Ever Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24241   Accept ...

  4. 2016ACM-ICPC网络赛北京赛区 1001 （trie树牌大模拟）

    [题目传送门] 1383 : The Book List 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 The history of Peking University ...

  5. 20162304 实验二《Java面向对象程序设计》实验报告

    20162304 实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 ...

  6. CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂 中二版

    "问题:众所周知772002很喜欢马尾,所以他决定画几幅马尾送给他的女朋友. 772002会画m种马尾,772002还有n张纸,n张纸分别编号1到n,每张纸上只能画一种马尾. 然而77200 ...

  7. Process.Start() 传递参数中有空格问题

    项目->   (工程名)属性-> 调试-> 命令行参数 1.在命令行下执行 参数之间用空格分隔开就可以了,如果参数有空格,以双引号风格 Test   aa   "bb   ...

  8. mysql分裤分表

    1.分库分表 很明显,一个主表(也就是很重要的表,例如用户表)无限制的增长势必严重影响性能,分库与分表是一个很不错的解决途径,也就是性能优化途径,现在的案例是我们有一个1000多万条记录的用户表mem ...

  9. Oracle 11gR2 RAC 数据库不能连接(ORA-12537: TNS:connection closed)

    Oracle 11gR2 RAC 数据库不能连接(ORA-12537: TNS:connection closed)的解决 [oracle@rac01 ~]$ sqlplus /nolog SQL*P ...

  10. linux下编译运行C程序

    GCC是Linux操作系统下一个非常重要的源代码编译工具,有着许多重要的选项,支持许多不同语言的编译,如C.C++.Ada.Fortran.Objective.Perl.Python.Ruby以及Ja ...