2vue
事件 v-on:click=“handle"
@click="handle"
handle创建在methods里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<div id="app1"> <div v-text='num'></div>
<button v-on:click='num++'>点我</button><br>
<button @click='handle'>点我2</button><br>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app1',
data: {
num:0
},
methods: {
handle: function() {
this.num++
}
}
})
</script>
</body>
</html>
事件参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，
如果事件绑定函数调用，那么事件对象必须作为最后一个参数$event显示传递 -->
<div id = "app1">
<div v-text="num"></div>
<button v-on:click="handle1">点击</button>
<button @click="handle2(123,456,$event)">点击1</button>
</div>
<script src="vue.js"></script>
<script>
var vue1 = new Vue({
el: '#app1',
data:{
num:0
},
methods:{
handle2:function(p,p1,event){
console.log(p,p1),
console.log(event.target.innerHTML)
this.num++
},
handle1:function(event){
console.log(event.target.innerHTML)
}
}
})
</script>
</body>
</html>
2vue的更多相关文章
- 项目回顾2-vue的初体验-在已有项目局部使用vue，无须额外配置
当了解到尤大大的vue的时候,就很想在项目里用一下,不过当用了vue cli 创建了一个脚手架之后,感觉现有的项目改造难度太大了,毕竟原来是JQ的.这个项目已经上线,基本功能也完成了,客户提出来后台对 ...
- .2-Vue源码起步（2）
接着第一节开始继续吧(GoGoGo) 上一节把mergeOptions函数弄完了,最后返回一个options赋给了vm.$options. 这一节继续跑代码: function initMixin(V ...
- 11.2vue(3)
2018-11-2 19:00:33 明天周末,又可以愉快整理博客啦! 越努力,越幸运!永远不要高估自己!!! 接着学vue 感觉好强大! 用这个组件的好处就是,不需要手动刷新,文件只要把保存就自动刷 ...
- 2- vue django restful framework 打造生鲜超市 -环境搭建
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
- vue.js用法和特性详解
前 言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不 ...
- Vue.js用法详解（一）更新中~
前 言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
- 大白话Vue源码系列目录
.first-level{ font-size: 1.2rem; cursor: default; color: #666; } .second-level{ font-size: 1.1rem; p ...
- 前端面试之vue相关的面试题
hello,你们的小可爱,皮皮聪又来发表感想了. 首先简单概括下会遇到的问题: 1.vuex作用 ①vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化. ②vue中的多个组件之间 ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- Vue实例及生命周期
1,Vue实例生命周期. 有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求,开发,针对这样的需求,Vue提供给我们一系列的钩子函数 2,Vue生命周期的阶段 ...
随机推荐
- adb命令之monkey使用
一.Monkey介绍Monkey是Android中的一个命令行工具,可在模拟器或实际设备中运行.通过向系统发送伪随机的用户事件流(例如按键.触摸屏.手势操作等),来实现对开发中的应用程序进行压力测试, ...
- CPU、内存的占用率
要获取不包含百分比符号的内存占用率: #free -t | awk 'NR ==2 {print "Current Memory Utilization is: "$3/$2*10 ...
- es 部署 进程、文件数 配置
1. /etc/security/limits.conf elasticsearch soft nofile 65536 elasticsearch hard nofile 65536 elasti ...
- 多线程事务回滚sqlSession, spring-mybatis 开启事务
@Resource SqlContext sqlContext; /** * 多线程事务. * @param employeeDOList */ @Override public void saveT ...
- app对接微信支付(app支付)
(先补充一下,app唤醒微信支付失败的话,在确保没错的情况下,建议换一个手机或者重新下载微信,不知道是微信缓存还是什么原因) 1.先申请好开发环境 app支付不需要公众号,所以申请好开发商号和开发平台 ...
- Winform使用CefSharp和HttpWebRequest如何保持会话Session
之前我们使用CefSharp,在Winform中,使用ChromiumWebBrowser加载了web项目的页面.并且通过html页面的js调用了本地的窗口.那么下一个问题来了.为了保障系统安全性,项 ...
- 洛谷P4802 [CCO 2015]路短最
题目 https://www.luogu.com.cn/problem/P4802 思路 数据范围 \(n\leq 18\),义眼丁真,鉴定为状压. 好,那我们来思考一下状态的构建.其实是很套路的东西 ...
- C - Watchmen CodeForces - 651C （使用map例题）
#include<iostream>#include<map> using namespace std;map<int,int> x;map<int,int& ...
- 解决MyBatis-Plus修改为null值无效的问题
@TableField(strategy = FieldStrategy.IGNORED)
- 2022-3-28内部群每日三题-清辉PMP
1.由于一直重复执行相同的任务,一个敏捷团队的士气低落.敏捷管理专业人士(主题专家 SME)应采取哪一项行动? A.增加团队的资源数量,协助主题专家完成任务. B.让团队成员执行其活动的价值流分析. ...