vue基础---事件处理
(1)事件监听
v-on
指令监听 DOM 事件,并在触发时运行JS代码
<div class="event_area">
{{message}}
<button v-on:click="show_info">按钮</button>
</div>
<script type="text/javascript">
var event_area = new Vue({
el:".event_area",
data:{
message:'展示信息'
},
methods:{
show_info:function(){
alert(this.message);
}
}
})
</script>
案例2:计算按钮点击次数
监听事件
<div class="event_area">
您点击了{{num}}次按钮
<button v-on:click="num++">按钮</button>
</div>
<script type="text/javascript">
var event_area = new Vue({
el:".event_area",
data:{
num:0
}
})
</script>
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
还可以接收一个需要调用的方法名称。如下所示,调用add_num方法
解析: `this`在方法里指向当前 Vue 实例
<div class="event_area">
您点击了{{num}}次按钮
<button v-on:click="add_num">按钮</button>
</div>
<script type="text/javascript">
var event_area = new Vue({
el:".event_area",
data:{
num:0
},
methods:{
add_num:function(){
return this.num++;
}
}
})
</script>
(2)内联处理器中的方法
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
(3)事件修饰符
①表单事件:
<form id="ti_jiao" v-on:submit="onSubmit">
<input type="text"><br />
<input type="submit" value="提交">
</form>
<script type="text/javascript">
var ti_jiao = new Vue({
el:"#ti_jiao",
methods:{
onSubmit:function(e){
e.preventDefault();
alert("弹框")
}
}
})
</script>
阻止表单默认事件,即数据提交页面刷新。
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 -->
<form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
②修饰符顺序
使用修饰符时,顺序很重要;相应代码会以同样的顺序产生。
因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
③一次性修饰符
<!-- 点击事件将只会触发一次 -->
<input type="button" name="btn" v-on:click.once="prompt" value="弹框">
methods:{
prompt:function(){
alert("弹框");
}
}
结果:点击按钮后,只能弹框一次。
④被动修饰符
Vue 还对应 addEventListener
中的 passive
选项提供了 .passive
修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
.passive
修饰符能够有效提升移动端的性能
(4)按键修饰符(待验证)
(5)系统修饰符(待验证)
.
vue基础---事件处理的更多相关文章
- vue基础——事件处理
监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- Vue基础知识梳理
1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...
- vue基础入门(2.1)
2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...
- Vue基础(1)
Vue简介 1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动 Vue基础 通过下面代码引用vue: <script src="https://cdn.jsdeliv ...
- vue - vue基础/vue核心内容
终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
随机推荐
- [DLX反复覆盖] poj 1084 Square Destroyer
题意: n*n的矩形阵(n<=5),由2*n*(n+1)根火柴构成,那么当中会有非常多诸如边长为1,为2...为n的正方形,如今能够拿走一些火柴,那么就会有一些正方形被破坏掉. 求在已经拿走一些 ...
- c# Winform实现中国省份地图
1.利用raphael.js IE下的VML和SVG实现矢量地图 2.JS调用c# Winform代码,代码 [System.Runtime.InteropServices.ComVisibleAtt ...
- iOS开发——常见BUG——window决定程序的状态栏管理问题
Xcode7升级之后遇到的问题 问题一: 老项目在Xcode6上运行没有任何问题,但在Xcode7上运行直接崩了! 经过一波分析: 发现是因为我顶部状态栏处添加了topWindow,用于处理Tab ...
- 安装Node.js 以及命令行使用
安装 官方的安装包 安装完成之后,会自动添加到环境变量中 通过visual studio安装 命令行 查看版本 PS C:\Users\clu\Desktop> node --version v ...
- python-----模糊搜索文件
告诉计算机文件在哪 → 使用路径描述位置 描述文件的特征 → 用条件判断来筛选 比对后打印文件名 → 用循环来实现逐个比对 #!/usr/bin/env python # -*- codi ...
- 杂项-Java:JeePlus
ylbtech-杂项-Java:JeePlus 一个集成了代码生成器的java快速开发框架 1. 介绍返回顶部 1. 响应式开发 JeePlus采用了目前极为流行的扁平化响应式的设计风格,UI框架使用 ...
- DNS的主从、子域授权和转发服务器
DNS的主从.子域授权和转发服务器 主从DNS 注意: 1.全局配置options{} 里面的内容,其中 listen-on port 53 {any or local:}:或者直接注释掉,或删掉 a ...
- bzoj 2427: [HAOI2010]软件安装【tarjan+树形dp】
一眼最大权闭合子图,然后开始构图,画了画之后发现我其实是个智障网络流满足不了m,于是发现正确的打开方式应该是一眼树上dp 然后仔细看了看性质,发现把依赖关系建成图之后是个奇环森林,这个显然不能直接dp ...
- robotframework - User key 操作
一.用户关键字操作思路 a.创建model1资源 b.在model下创建用户关键字 - 循环 c.测试套件下创建test_case/case2 & 用户关键字 d.测试套件中导入Resourc ...
- 小记 react 数据存储位置
react 中状态的六个存储位置 state 我想大家都知道这个地方,而且在使用 setState 时会触发组件的更新 class prop 将值存在 class 的对象中,如: class App ...