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 ...
随机推荐
- C++11新特新-varitable template
C++11新特新-varitable template应用 可变参模板原理可以仔细阅读C++primer 第5版相关部分 应用1 一个万用的HashFun 通过不断调用可变模板函数进行参数包的运算,最 ...
- python中的字符串/列表查找函数小总结
find()和index() 首先是适用情况, 'list' object has no attribute 'find' , list没有find方法, str全有. 返回的情况: 查找成功都会返回 ...
- 5.3dmax轴相关
# 知识点: 转换为可编辑的样条线(spline) chamfer 切角 Fillet 圆角 车削命令 书柜案例2 样条线(从图形到多边形) 1.在平面视图中选择矩形并创建一个矩形,将矩形转化为可编辑 ...
- vue打包记录
这里的确是css以及js文件的路径问题,但解决时并不需要手动改路径或者加一段判断去修改,最方便的办法时在项目打包前的vue.config.js里面将publicPath属性添加或者修改为 public ...
- 2.IDEA的快捷键
1.IDEA代码等式两边自动加空格:ctrl+alt+L
- lnmp重新安装mysql
安装mysql好长时间,一直没去管,后来一直频繁重启,各种网上找方案去解决,最后问题太异常,一顿操作猛如虎之后把mysql彻底搞垮,无奈只能进行重装. whereis mysql mysql: /us ...
- 新搭建的禅道admin忘记密码
/opt/zbox/run/mysql/mysql -uroot -p 禅道数据库root默认密码123456 MariaDB [(none)]> show databases; +------ ...
- vue横向滑动
代码 <template> <div> <!-- 左侧的滑动模块 --> <div class="scroll-box" :style=& ...
- Python学习笔记--高阶技巧
闭包(避免全局变量被修改的风险) 函数的嵌套的利用 若是只是调用到外部函数的值,只需要用到函数的嵌套,具体实现如下: 若是要对外部函数的值进行修改,需要用到nonlocal关键字,具体实现如下: at ...
- 服务器资源监测脚本（网卡、MEM、CPU）
#-*- coding: utf-8 -*- #!/usr/bin/python ''' 用法: sar [ 选项 ] [ <时间间隔> [ <次数> ] ] 主选项和报告: ...