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 ...
随机推荐
- 20181224《网络攻防技术》Exp 8 Web综合
20181224<网络攻防技术>Exp 8 Web综合 目录 20181224<网络攻防技术>Exp 8 Web综合 相关知识点总结 web前端 web后端 数据库编程 实验内 ...
- gulp技术：自动化构建工具
作用:压缩css.js.img,合并文件,改名字,编译sass,拷贝 使用步骤: 1.安装node环境,下一步,下一步,安装C盘: 2.在你的根目录下,在地址栏输入cmd回车: 3.检测node和np ...
- can't convert CUDA tensor to numpy. Use Tensor.cpu() to copy the tensor to host memory first.
predict=predict.data.numpy() 这一行报错意思是:如果想把CUDA tensor格式的数据改成numpy时,需要先将其转换成cpu float-tensor随后再转到nump ...
- centos6放行防火墙8080端口操作
1. 进入防火墙文件: [ vi /etc/sysconfig/iptables ] 2. 放行8080端口: [ -A RH-Firewall-1-INPUT -m state --state NE ...
- PRVF-4007 : User equivalence check failed for user "grid"
PRVF-4007 : User equivalence check failed for user "grid" 问题:Oracle安装Grid Infrastructure之前 ...
- vmware网络故障处理
1.基本情况,更新vmware后发现联不上ssh了.查看物理机和虚拟机的ip,使用ping命令发现 虚拟机可以ping物理机且有网络 但是物理机是无法ping虚拟机的 2.网络的教程整理了,各有问题, ...
- Q:带宽检测 iperf工具
一.下载 iperf的下载地址为:https://iperf.fr/iperf-download.php,选择相应的版本 linux安装 rpm -qa|grep -i rperf rpm -ivh ...
- html：表格
HTML:表格1.表格三标签:(1)<table> 表格(2)<tr> 行(3)<td> 单元格 2.表格的基本语法和结构<table> <t ...
- logrotate 切割Tomcat的catalina.out文件
使用logrotate进行切割. 在/etc/logrotate.d下,新建tomcatrotate,编辑tomatrotate,写入如下内容: /usr/local/tomcat/logs ...
- Spyglass CDC工具使用（二）
最近一直在搞CDC (clock domain crossing) 方面的事情,现在就CDC的一些知识点进行总结. 做CDC检查使用的是Spyglass工具.以下内容转载自:Spyglass检查之CD ...