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 ...
随机推荐
- cat、more、less、tail、head文件查看指令辨析
1.cat 简介 cat [OPTION]... [FILE]... cat 可以将多个文本连接起来并输出,当省略输入文件或输入文件用字符-替代时,读取标准输入 常用参数 -n \(~~~~\)输出行 ...
- Python爬虫之用Selenium做爬虫
我们在用python做爬虫的时候,除了直接用requests的架构,还有Scrapy.Selenium等方式可以使用,那么今天我们就来聊一聊使用Selenium如何实现爬虫. Selenium是什么? ...
- ssh问题、原理及diffie hellman算法
1.普通用户无法使用证书登录:原因是权限设置问题 将.ssh目录设为700,authorized_keys设为600即可. 2.查看ssh支持的算法 ssh -Q help ssh -Q kex/ke ...
- FtpClient上传文件异常：java.net.SocketException: Connection reset
FtpClient上传文件异常:java.net.SocketException: Connection reset 这问题折磨我快一天了,下午这会儿终于解决了,问题不在程序错误,原因还是出在上传图片 ...
- CSS选择艺术以及CSS文本样式
CSS选择的艺术1.css规则由两部分构成:选择器,声明(声明由属性和值构成且末尾跟一个分号)2.css注释:/*--*/3.CSS样式的引用(1)行内样式(内联样式)例如:<p style=& ...
- List转Map处理
List对象装一个Map<String,String> 在Java8中新增了stream流的操作,对于代码书写更为简便,而且更容易看的懂 List<Unit> unitList ...
- 标题Ubuntu将默认的python3改为默认的python
ryzen@cp7:~$ python Command 'python' not found, did you mean: command 'python3' from deb python3 roo ...
- StoneDB 子查询优化
StoneDB 子查询优化 摘要: 说明如何优化 exists 的 join 查询优化器的处理 核心函数: TwoDimensionalJoiner::ChooseJoinAlgorithm Join ...
- Ansible之Playbook介绍和使用
1.https://blog.csdn.net/zfw_666666/article/details/124691877 1.Playbook介绍 Playbook与ad-hoc相比,是 ...
- cenos7配置epel源
1.首先进入/etc/yum.repos.d/目录下,新建一个repo_bak目录,用于保存系统中原来的repo文件 [root@bogon ~]# cd /etc/yum.repos.d/ [roo ...