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)" ...
随机推荐
- IO流总结---- 字节流 ，字符流， 序列化 ，数据操作流，打印流 ， Properties 集合
笔记内容: 什么是流 字节流 字符流 序列化 数据操作流(操作基本数据类型的流)DataInputStream 打印流 Properties 集合 什么是流: 流是个抽象的概念,是对输入输出设备的抽象 ...
- Flask-Cookies和Session
目录 cookies session save_session的参数 session源码执行流程 请求第一次过来时 请求第二次进来 SecureCookieSession 签名算法 session的生 ...
- 安装配置ZooKeeper及基本用法
要想学习分布式应用,ZooKeeper是一个绕不过去的基础系统.它为大型分布式计算提供开源的分布式配置服务.同步服务和命名注册. 今天先介绍系统的安装和基本使用,后续会推一些基本的Java使用代码. ...
- 2019-07-23 类的继承和final关键字的应用
我们称以存在的用来派生新类的类为基类,又称做父类,超类.由已存在的类派生出的新类称为派生类,又称为子类.从一个基类派生的继承称单继承,从多个基类派生的继承称为多继承.也就是说:一个类只能直接从一个类中 ...
- 微信小程序滚动tab的实现
微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...
- i春秋四周年庆典狂欢丨价值6000元的Web安全课程免费送啦
重磅好消息 i春秋四周年庆典狂欢 感恩回馈新老用户 5888元的Web安全线上提高班 988元的Web安全线上入门班 免费送啦 快来围观 活动详情 1.活动时间:6月17日—6月30日 2.活动规则: ...
- 【转】Git使用教程之远程仓库
1.远程仓库 在了解之前,先注册github账号,由于你的本地Git仓库和github仓库之间的传输是通过SSH加密的,所以需要一点设置: 第一步:创建SSH Key.在用户主目录下,看看有没有.ss ...
- sql developer 17002报错无法连接
问题登场: 使用sql developer 登录oracle 时报错,错误码17002 解决办法: 右键,点击properties 属性,检查每一项配置,发现ip 是之前的ip,更改为database ...
- excel 导出导入
/** * 导出 * @param * @param * @return */ public function exportexcel() { set_time_limit(0); ini_set(' ...
- 201871010133-赵永军《面向对象程序设计（java）》第十六周学习总结
201871010133-赵永军<面向对象程序设计(java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...