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 相关文章推荐
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
python复制与引用用法分析
2015/04/08 Python
python 爬取微信文章
2016/01/30 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
解析Python3中的Import
2019/10/13 Python
python实现猜拳游戏
2020/03/04 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
毕业生自我鉴定实例
2014/01/21 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
销售队伍口号
2014/06/11 职场文书
英文感谢信格式
2015/01/21 职场文书
英语通知范文
2015/04/22 职场文书