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 相关文章推荐
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
原生JS实现层叠轮播图
May 17 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
详解python变量与数据类型
2020/08/25 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
企业车辆管理制度
2014/01/24 职场文书
商超业务员岗位职责
2014/03/12 职场文书
大学生求职计划书
2014/04/30 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2016中秋节广告语
2016/01/28 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL
Nginx配置https的实现
2021/11/27 Servers
Nginx实现会话保持的两种方式
2022/03/18 Servers