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 ...
随机推荐
- springboot整合mybatis：查询语句，返回null
springboot整合mybatis时,查询数据库数据时,返回结果为null; 刚开始以为是数据库没连接上,结果增.改.删的其他语句则执行成功: 但唯有查询语句始终返回null,一条数据一个null ...
- 数据库ip被锁了怎么办
由于多次访问失败,导致ip被限制,登录时会报错 Internal error/check (Not system error) 如何解决: 找一台同事的机子,(或者修改自己的ip),然后打开sql 的 ...
- iview的表格 render
view的表格 render 先看一下效果图 效果题 代码如下 render render:(h,params)=>{} //h指dom对象,params指当前每一行数据(param ...
- 微信小程序——石头剪刀布
博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020 作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/ ...
- LeetCode 之 108. 将有序数组转换为二叉搜索树
原题链接 思路: 二叉搜索树的定义: 它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的右子树不空,则右子树上所有结点的值均大于它的 ...
- mysql explain 优化
explain的使用 使用EXPLAIN关键字可以模拟优化器执行SQL语句,分析你的查询语句或是结构的性能瓶颈.在select语句之前增加explain关键字,Mysql会在查询上设置一个标记,执行查 ...
- 007使用IDEA开发
007使用IDEA开发 1.什么叫IDE? 集成开发环境(IDE,Integrated Development Environment)是用于提供程序开发环境的应用程序,一般包括代码编辑器.编译器.调 ...
- raid5+lvm随笔
1.准备磁盘,先做raid,再做lvm; /dev/sdb /dev/sdc /dev/sdd /dev/sde [root@localhost ~]# mdadm -C -v /dev/md5 ...
- ELK集群基础环境初始化
集群基础环境初始化 1.准备虚拟机 192.168.1.7 192.168.1.6192.168.1.183 2.切换为国内centos源 3.修改sshd服务优化 [root@elk01 ~]# s ...
- [复现]2021 DASCTF X BUUOJ 五月大联动-PWN
[复现]2021 DASCTF X BUUOJ 五月大联动 由于我没ubuntu16就不复现第一个题了,直接第二个 正常的off by one from pwn import * context.os ...