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生命周期的阶段 ...
随机推荐
- [USACO12FEB]Overplanting S
洛咕 题意:在一个笛卡尔平面坐标系里(X轴向右是正方向,Y轴向上是正方向),有\(N(1<=N<=1000)\)个矩形,第\(i\)个矩形的左上角坐标是\((x1, y1)\),右下角坐标 ...
- android 编译错误::Extension with name 'kotlin' does not exist
An exception occurred applying plugin request [id: 'kotlin-kapt']> Failed to apply plugin 'kotlin ...
- 【STM32】串口收发驱动Drv_Uart|学习笔记
一.什么事串口? 大家常说串口,其实串口有很多种UART,SPI,IIC都是串口,一般大家口中的串口就是UART(Universal Asynchronous Receiver/Transmitter ...
- C#动态创建对象和其属性
dynamic contact = new ExpandoObject(); contact.Name = "Patrick Hines"; contact.Phone = &qu ...
- PNAS：微生物组分析揭示人类皮肤的独特性
https://blog.csdn.net/woodcorpse/article/details/87989663
- ComPiler200004：Library-Oriented Programming
https://www.aliyun.com/jiaocheng/403982.html 摘要: Creating a simple, encapsulated, maintainable libra ...
- 87、linux root 密码忘记了
子账户登录,然后重置即可
- IDEA中已配置阿里镜像，但maven无法下载jar包的问题
然后我还出现了一个问题,由于使用了HTTPS,存在着SSL证书验证的问题,因此我在IDEA中添加了一行配置: 配置如下: -Dmaven.wagon.http.ssl.insecure=true -D ...
- Java数组之冒泡排序【重点】
冒泡排序 冒泡排序是最为出名的排序算法之一,总共有八大排序! 冒泡的代码还是相当简单的,两层循环,外层冒泡轮数,里层依次比较. 我们看到嵌套循环,应该立马就可以得出这个算法的时间复杂度为O(n2). ...
- three.js基础用法
import * as THREE from '../libs/build/three.module.js'; import { OrbitControls } from '../libs/jsm/c ...