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 相关文章推荐
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
Jquery注册事件实现方法
May 18 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
JS实现分页导航效果
Feb 19 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
thinkPHP中分页用法实例分析
2015/12/26 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python简单实现刷新智联简历
2016/03/30 Python
Python字典简介以及用法详解
2016/11/15 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python爬取网页信息的示例
2020/09/24 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
梅花魂教学反思
2014/04/25 职场文书
推荐信格式要求
2014/05/09 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
公司员工离职感言
2015/08/03 职场文书
导游词之桂林山水
2019/09/20 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server