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生命周期的阶段 ...
随机推荐
- noi 2.1基本算法之枚举
7647:余数相同问题 1.描述 已知三个正整数 a,b,c. 现有一个大于1的整数x,将其作为除数分别除a,b,c,得到的余数相同. 请问满足上述条件的x的最小值是多少? 数据保证x有解. 2.输入 ...
- lua-1-c# 执行lua文件-调用lua文件中的方法
using UnityEngine;using System.Collections;using LuaInterface;//引入lua接口public class MyHellowWorld : ...
- vue html转pdf并打印
//文件名随便取一个如:htmlToPdf.js // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspd ...
- csr_matrix与ndarray类型互转
ndarry 转 csr_matrix>>> import numpy as np>>> import scipy.sparse >>> my_m ...
- go组合
package main import "fmt" func main() { aa := []string{"a", "b", " ...
- TODO留学小程序，展开，收起失效
text设置user-select=true后,display: -webkit-box 失效? https://developers.weixin.qq.com/community/develop/ ...
- docker 可视化平台Portainer搭建
1.部署步骤 docker pull portainer/portainer docker run -d -p 9001:9000 \--restart=always \-v /var/run/doc ...
- password_encryption_type 和 pg_hba.conf 不匹配导致用户连不上
# 问题概述xxx客户新上一套opengauss数据库,在测试中用户输入正确的密码,提示用户密码错误,导致用户被锁# 问题原因password_encryption_type 和 pg_hba.con ...
- 洛谷 P4454 [CQOI2018]破解D-H协议
题目 https://www.luogu.com.cn/problem/P4454 杂题乱做ing... 思路 首先我们把式子列一下: \(g^a\equiv A(mod P)\) \(g^b\equ ...
- Android studio学习笔记1
Android studio学习笔记1 20201303张奕博 2023.1.13 studio布局 1.线性布局 Android的线性布局不会换行,当组件一个挨着一个地排列到头之后,剩下的组件将不会 ...