Vue事件处理原理及过程详解


Posted in Javascript onMarch 11, 2020

Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难,使用v-on有以下好处:

1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法。

2、无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试。

3、当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,无须担心自己如何清理它们。

事件处理步骤

1. 绑定监视

2. 事件修饰符

3. 按键修饰符

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
<!--列表过滤与排序-->
<div id="demo">
  <h2>绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2(123)">test2</button>
  <button @click="test3">test3</button> <!-- 无参函数,实际上是传了$event对象-->
  <button @click="test4(1234,$event)">test4</button>

  <h2>事件修饰符</h2>
  <!--存在事件冒泡的情况-->
  <h3>阻止事件冒泡</h3>
  <div style="width: 200px; height: 200px; background: red" @click="test5">
    <!--@click.stop 停止事件冒泡 -->
    <div style="width: 100px; height: 100px; background: blue" @click.stop="test6"></div>
  </div>

  <br>
  <h3>阻止事件的默认行为</h3>
  <a href="http://www.baidu.com" rel="external nofollow" @click.prevent="test7">去百度</a>


  <br>
  <h2>按键修饰符</h2>
  <!-- <input type="text" @keyup="test8">--> <!--原始写法-->
  <!--<input type="text" @keyup.13="test8">--> <!--13就是enter键的keyCode码-->
  <input type="text" @keyup.enter="test8"/>  <!--直接写名字-->

</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script>
  new Vue({
    el: "#demo",
    methods: {
      test1(){
        alert('test1');
      },
      test2(number){
        alert(number);
      },
      test3(event){
        alert(event.target.innerHTML);
      },
      test4(number, event){
        alert(number + '----' + event.target.innerHTML);
      },
      test5(){
        alert('out')
      },
      test6(){
        alert('inner')
      },
      test7(){
//        event.preventDefault()  //原生的方式阻止事件的默认行为
        alert('点击,但是通过@click.prevent阻止事件的默认行为,不会跳转到百度去了')
      },
      test8(event){
//        原始写法;
//        if (event.keyCode === 13){ // Enter键
//          alert(event.target.value)
//        }
        alert(event.target.value)

      }

    }
  });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 #Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 #Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
非常漂亮的js烟花效果
Mar 10 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
详解python多线程之间的同步(一)
2019/04/03 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
如何执行一个shell程序
2012/11/23 面试题
接待员岗位责任制
2014/02/10 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
早会主持词
2014/03/17 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2014年市场部工作总结
2014/11/25 职场文书
三好学生评语大全
2014/12/29 职场文书
检讨书范文
2015/01/27 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby