VUE 方法
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 方法的更多相关文章
- Vue方法与事件
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...
- 关于 Vue 方法前面的美元符号
关于 Vue 方法前面的美元符号 学到这一段,不明白什么意思,然后手贱把 $ 删除了,出现未定义方法. vm.$watch('counter', function(nval, oval) { aler ...
- 详解Vue 方法与事件处理器
本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...
- vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法
<div id="main" > <button id='but1' type="button" v-on:click="save ...
- js和vue方法的相互调用（iframe父子页面的方法相互调用）。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- Vue 方法与事件处理器
按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...
- iframe 父页面调用子页面的vue方法
父页面代码: html: <div id="app"> //省略业务代码x行..... <iframe sr ...
- vue 方法相互调用注意事项与详解
vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法: 可以直接这样调用:this.$options.methods.test(); this.$options.met ...
- 项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）
总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...
- vue方法中传递dom对象示例
<div id="app"> <input type="text" v-on:keyup="onlyNum($event)" ...
随机推荐
- 机房重构包图（从三层+实体到三层+实体+外观+工厂+接口+SQLHelper）
刚刚开始接触三层的时候,我只做了两个登录小窗体的例子.画了简单的包图,可以说,为后面机房重构留下了大量的工作(因为三层理解没有深度,也没有理解出自己的东西).不过,欠下的总要还的.在做机房重构的时候, ...
- 手机上编程，编写android apk
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com C4Droid:在手机上直接编程,然后导出为apk
- Spring p名称空间配置属性
1.p 名称空间介绍 从 2.0开始,Spring支持使用名称空间的可扩展配置格式.这些名称空间都是基于一种XML Schema定义.事实上,我们所看到的所有bean的配置格式都是基于一个 XML S ...
- Problem D: 统计元音字母数
#include<stdio.h> int main() { ]; int n,j,k,a,e,i,o,u; a=e=i=o=u=; gets(c); ;c[k]!='\0';k++) { ...
- 求图的强连通分量--tarjan算法
一:tarjan算法详解 ◦思想: ◦ ◦做一遍DFS,用dfn[i]表示编号为i的节点在DFS过程中的访问序号(也可以叫做开始时间)用low[i]表示i节点DFS过程中i的下方节点所能到达的开始时间 ...
- mysql服务常用命令
一.查出当前mysql正在执行的sql命令mysql> show full processlist; 然后找出要终止的语句的idmysql> kill id号 未登录的情况下>mys ...
- [转] <context-param>与<init-param>的区别与作用
看到一篇关于web.xm文件中标签的讲解,顺带还阐述了容器的工作流程,因此转载此,以供参考,原文地址:与的区别与作用 <context-param>的作用: web.xml的配置中< ...
- Hiho----拓扑排序
拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小H ...
- 如何通俗理解——>集群、负载均衡、分布式
转自:周洲 (Julie) 在“高并发,海量数据,分布式,NoSql,云计算......”概念满天飞的年代,相信不少朋友都听说过甚至常与人提起“集群,负载均衡”等,但不是所有人都有机会真正接触到这些技 ...
- Matlab横坐标从特定值开始
set(gca,'XTick',1:1:length(x)); set(gca,'XTickLabel',{'15','20','25','30','35','40','45','50','55',' ...