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生命周期的阶段 ...
随机推荐
- Django Cannot assign "A1": "B1" must be a "C1" instance.
Django Cannot assign "A1": "B1" must be a "C1" instance. 原因:使用了外键 说明:如 ...
- 【小记】copy 与 copy_backward
copy 与 copy_backward copy 从前往后复制,result 参数指向目标容器的 begin 位置 copy*backward 从后往前复制,··· end 位置 Possible ...
- SparkRDD所有算子操作，建议全部手敲一遍
说明: 1.以下方法全部来自这个RDD.scala,可以自己看源码 2.使用$SPARK_HOME/bin/spark-shell运行代码 3.注释部分是运行结果 //org.apache.spark ...
- 个人常用的win7快捷键
1.Win + D – 显示桌面 2.Win+L 锁定系统 3.Win + R – 打开运行窗口 4.Win+M 最小化所有窗口 当按下后当前所有窗口全都最小化.再次按下这个组 ...
- Qt中的串口编程
串行接口简称串口,也称串行通信接口或串行通讯接口(通常指COM接口),是采用串行通信方式的扩展接口.串行接口(Serial Interface) 是指数据一位一位地顺序传送,其特点是通信线路简单,只要 ...
- 手写reduce()
function reduce(arr, callBack ,initVal){ if(!Array.isArray(arr) || !arr.length || typeof callBack != ...
- visual studio 2015 IOS开发连接mac时提示错误couldn't connect to xxxx, please try again的一个方法
本人使用虚拟机MAC.原本使用虚拟机中的VS2015连接正常没有问题. 但是当把MAC的虚拟机文件COPY到另一个机器上,提示"couldn't connect to xxxx, plea ...
- Js文章内容监听复制代码
若别人在你的网站复制内容将会提示,请把监听提示添加到文章内容div或者直接将代码复制粘贴到所需要的文件中! <script> //监听ctrl+v 复制 document.addEvent ...
- 一步一步教你FasterRunner在Centos7服务器部署
一,搭建环境的安装版本 centos ,mysql-5.7.22,node-v9.8.0,Python-3.6.2(注意mysql版本,因为django需要跟mysql兼容) 二,linux 环境的搭 ...
- Delphi线程中使用waitfor返回值
使用waitfor的时候就不要再设置Freeonterminated属性了,否则会提示线程句柄错误.主要是里面使用了ExitThread方法,当线程方法执行完毕后会自动释放线程的.不过记得要重写Des ...