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 相关文章推荐
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
JS出现失效的情况总结
Jan 20 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
基于JavaScript实现留言板功能
Mar 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/03 咖啡文化
apache+php+mysql安装配置方法小结
2010/08/01 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP中header用法小结
2016/05/23 PHP
PHP实现简易blog的制作
2016/10/24 PHP
接收键盘指令的脚本
2006/06/26 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
英国著名书店:Foyles
2018/12/01 全球购物
会话Bean的种类
2013/11/07 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
英语感恩演讲稿
2014/01/14 职场文书
学习自我鉴定
2014/02/01 职场文书
蓝颜请假条
2014/04/11 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA