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生命周期的阶段 ...
随机推荐
- jar包启动脚本, 以及外置配置文件application.yml
想使用sh脚本来启动,停止,重启我们的jar服务, 顺便还要外置配置文件方便修改 示例server.sh如下,启动命令为sh server.sh start或restart或stop,修改其中的这几个 ...
- 关于Java的惰性求值
最近在学scala的时候,函数传参可以是传名参数,或者传值参数 1.Scala中的传名参数是什么意思?lazy关键字有什么作用? Scala官方文档的定义是:传名参数 仅在被使用时触发实际参数的求值运 ...
- vue store用法
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) 首字母不能大写 export default new Vuex.Store({ ...
- linux 下用其他用户来执行命令
sudo su - username -l -c "supervisorctl restart apps" -l , –login:加了这个参数之后,就好像是重新登陆一样,大部分环 ...
- axios与ajax的优缺点
axios和ajax的区别是什么? 1.axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装: 2.ajax技术实现了局部数据的刷新,而axio ...
- libmodbus 源码分析转
记录一下,这位大神分析的很到位,值得膜拜! < libmodbus协议栈1--Linux下详细移植步骤(配置.生成) > < libmodbus协议栈2-- Linux下 modbu ...
- [Python.Unix和Linux系统管理指南]书籍
Python.Unix和Linux系统管理指南书籍下载地址 提取码:eqf4 内容简介 · · · · · · <Python UNIX和Linux系统管理指南>介绍了Python语言如 ...
- Wps调用dll操作Excel表格转PDF
起始原因:wps编辑创建的文档在microsoft office 中打开,会报内容存在异常是否恢复,因此wps文件被微软设定为破损文件,无法对原有文档进行操作运行,故在此使用wps对Excel进行操作 ...
- echarts 容器宽度设置百分比,但是图表缩成一团
如图 明明设置了充满整个div,然后发现都缩成了一团,后来发现echarts不能和display:none;属性一起用 解决方法: 把v-show改成v-if就可以了充满容器了...
- FMC145-四路16位125Msps AD FMC子卡模块 模拟信号 中频信号采集 信号发出
FMC145-四路16位125Msps AD FMC子卡模块 一.概述 该板卡可实现4路16bit 125Msps AD 功能,是xilinx开发板设计的标准板卡.FMC连接器是一种高速多pin的互连 ...