vue事件监听
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<div><input type="button" value="-" v-on:click="sub"> <input type="button" value="+" @click="add"></div>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
count:0,
},
methods:{
add(){
this.count++
},
sub(){
this.count--
}
}
}) </script>
</body>
</html>
v-on参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<!-- 绑定事件是不需要传参的括号可省略 -->
<div>
<input type="button" value="按钮1" v-on:click="sub()">
<input type="button" value="按钮2" @click="add">
<!-- 需要传参时，写小括号不写参数，则传参时undefind。 不写小括号则传参点击事件对象 -->
<input type="button" value="按钮3" @click="btnclick">
<!-- 传参时需要普通参数和事件对象 $event事件参数 -->
<input type="button" value="按钮4" @click="btnclick1('123', $event)">
</div>
</div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
count:0,
},
methods:{
add(){
this.count++
},
sub(){
this.count--
},
btnclick(da){
console.log(da)
},
btnclick1(da, event){
console.log(da, event)
}
}
}) </script>
</body>
</html>
v-on修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 阻止冒泡事件 -->
<div @click="divclick">
aaaaaaaaaaa
<input value="button" type="button" @click.stop="btmclick"></input>
</div>
<!-- 表单自己提交 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitclick">
</form>
<!-- 监听某个键的键帽 -->
<input type="text" @keyup.enter="keyup"></input>
<!-- 只触发一次 -->
<input value="button" type="button" @click.once="btmclick"></input> </div> <script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
count:0,
},
methods:{
btmclick(){
console.log("按钮点击")
},
divclick(){
console.log("div点击")
},
submitclick(){
console.log("表单提交")
},
keyup(){
console.log("键盘抬起")
}
}
}) </script>
</body>
</html>
vue事件监听的更多相关文章
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- vue事件监听机制
vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...
- vue 事件监听和es6模板语法
es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- Vue学习笔记（二）动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
- vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- vue中监听返回键
问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...
随机推荐
- 字节码 看 new String("abc")创建了几个对象
感谢博主分享:https://www.cnblogs.com/zhaideyou/p/5875175.html 但是如果代码是这样子的: String str1 = "abc"; ...
- JAVA面经-基础篇-线程
1.创建线程有哪几种方式? 创建线程有3种方式,分别是继承Thread类.实现Runnable类.实现Callable类. 继承Thread类的步骤: 1. 定义Thread类的子类, ...
- Upload上传组件，上传之后，再次预览下载按钮不见问题
如图所示红色部分不见了. 解决方式: fileList 代表的是上传后当前文件内容的具体信息名称,该数据决定了上传之后页面展示的内容 this.fileList.push({ uid:remark.i ...
- python 编程找出矩阵中的幸运数字：说明，在一个给定的M*N的矩阵（矩阵中的取值0-1024，且各不相同），如果某一个元素的值在同一行中最小，并且在同一列中元素最大，那么该数字为幸运数字。
假设给定矩阵如下: matrix=[[10,36,52], [33,24,88], [66,76,99]] 那么输出结果应为66(同时满足条件) 代码如下: arr=[[10,36,52], [33, ...
- Go_day03
Go基础语法 数组 数组是具有相同唯一类型的一组以编号且长度固定的数据项序列.类型可以是任意基本类型或者自定义类型. 数组一旦被定义后,大小不能被改变 func main() { //定义一个数组 v ...
- beta冲刺：总结随笔
这个作业属于哪个课程 <班级的链接> 这个作业要求在哪里 <作业要求的链接> 这个作业的目标 beta冲刺总结 作业正文 .... 其他参考文献 ... 一.预期计划 | 6. ...
- RPA现阶段的问题
RPA(Robotic Process Automation)全称机器人流程自动化,作为"自动化为先"时代的翘楚和先驱,被广泛地用来代替人类自动执行任务,越来越多的领域.企业和人开 ...
- 在 Maui 中自绘组件1：绘制
在 Maui 中自绘组件 系列文章已完结,共六篇,此为第一篇. 在 Maui 中自绘组件1:绘制 在 Maui 中自绘组件2:可绑定属性 在 Maui 中自绘组件3:事件与命令 在 Maui 中自绘组 ...
- ASP.NET Core - 选型系统之选型配置
1. 选项 前面讲完了.NET Core 下的配置系统,我们可以通过 IConfiguration 服务从各种来源的配置中读取到配置信息,但是每次要用的时候都通过 Iconfiguration 读取配 ...
- 【读书笔记】排列研究-置换角度(分解为Products Of Cycles) 含GroupExploer使用
upd 2020-08-06 23:11完成了最初稿 目录 定义 开胃菜 entrée 群论角度 应用:几何变换 当然要从第一类斯特林数的角度来考虑一下 一个排列的type定义 排旗公式 应用-共轭排 ...