位置: IT常识 - 正文

Vue.js笔记------事件(vue.js.)

编辑:rootadmin
Vue.js笔记------事件 一、事件与事件流

推荐整理分享Vue.js笔记------事件(vue.js.),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue.js in action,vue.js如何使用,vue 使用js,vuejs org,vue intro.js,vue.js使用教程,vue.js in action,vue.js使用教程,内容如对您有帮助,希望把文章链接给更多的朋友!

   1、事件与事件流

    【事件】

      JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性。常见的有加载事件、鼠标事件。

    【事件流】

      由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流。页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

    【js的事件流三阶段】

        事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

        处于目标阶段(target phrase):处于绑定事件的元素上;

        事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;(事件捕获是从上到下,而事件冒泡,是从下到上。)

2、事件冒泡与事件捕获

     事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。

     事件冒泡:

        微软提出了名为事件冒泡(event bubbling)的事件流。

        事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。

        也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

Vue.js笔记------事件(vue.js.)

        因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→div→body→html→document.

        事件捕获:

        网景提出另一种事件流名为事件捕获(event capturing)。

        与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。

        因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→bodv→div→button。

        后来W3C采用折中的方式,平息了网景和微软之间的战争,制定了统一的标准--先捕获在冒泡。

3、事件对象

        用户界面事件:涉及到与BOM交互的通用浏览器事件。

        load事件:在整个页面(包括所有外部资源如图片 JavaScript文件和CSS文件)加载完成后触发。

window.onload = function() { alert("页面加载完成") };

        焦点事件:在元素获得或失去焦点时触发的事件。 

        鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。

        滚轮事件:使用鼠标滚轮时触发的事件。

        输入事件:向文档中输入文本时触发的事件。

        键盘事件:使用键盘在页面上执行某些操作时触发的事件,

        输入法事件:使用某些输入法时触发的事件

二、事件绑定指令

    计算正方形的面积

<body> <div id="app"> <!--方法一:以内联方式响应事件--> <!--<button v-on:click="length++">改变边长</button>--> <!--方法二:绑定方法处理事件--> <button v-on:click="changeLength">改变边长</button>: <p>正方形的边长是{{ length }},面积是{{ area }}</p> </div> <script src="../../vue.js"></script> <script> new Vue({ el:'#app', data:{ length:2 }, computed:{ area(){ return this.length*this.length }, }, methods:{ changeLength(){ this.length++ } } }) </script></body>

三、事件修饰符

  1、事件修饰符使用

<div id="app" @click="divClick"> <ul @click.self="ulClick"> <!-- 事件修饰符 --> <!-- .stop阻止事件冒泡 --> <li @click="liClick">111</li> <li>222</li> <li>333</li> </ul> </div> <script src="../../vue.js"></script> <script> new Vue({ el:'#app', methods:{ divClick(){ console.log('div'); }, ulClick(){ console.log('ul'); }, liClick(evt){ console.log('li'); // JS原生写法:阻止事件冒泡 // evt.stopPropagation() } } }) </script>

 2、事件修饰符详解

<body> <!-- 事件修饰符 event.preventDefault()/阻止状认行为或者event.stopPropogation()/阻止事件冒泡. 以上方法而要处理D0M事件细节,代码繁项. 为了解决这个问题,Vue.js提供了事件修饰符. 修饰符是以点开头的指令后缀来表示的, --> <!-- .stop阳止冒泡事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- .se1f当事件日标是当前元素自身时,触发事件 --> <ul @click.self="ulClick"></ul> <!-- .capture将原本默认的冒泡方式改为捕捉方式 --> <!-- :prevent阻止事件默认行为 --> <!--@submit.prevent提交事件不再重载顶面--> <form v-on:submit.prevent="onSubmit"></form> <!--.stop.prevent修饰符可以串联,既阻止冒泡又阻止默认行为.--> <a v-on:click.stop.prevent="doThat"></a> <!--只有修饰符--> <form v-on:submit.prevent></form></body>
本文链接地址:https://www.jiuchutong.com/zhishi/297361.html 转载请保留说明!

上一篇:Vue项目中实现ElementUI按需引入(vue在项目中怎么用的)

下一篇:垃圾分类模型训练部署教程,基于MaixHub和MaixPy-k210(垃圾分类手工小模型)

  • 增值税专票开错了可以作废吗
  • 未交增值税是什么科目
  • 如何申报个人所得税减免项目
  • 公司收到生育津贴不发给员工 分录
  • 投标保证金保险怎么买
  • 账龄划分模板
  • 分公司可以独立承担法律责任吗
  • 会计中预付款余额是什么
  • 成本少结转了怎么调回
  • 房产继承是不是谁照顾谁的
  • 收到退款如何做账
  • 劳务支付
  • 赠送产品能直接用吗
  • 持有的汇票到期后怎么办
  • 计提坏账准备的前提条件
  • 管道租赁合同怎么写
  • 预收账款缴纳企税怎么算
  • 事业单位退休人员独生子女费如何发放
  • 小规模纳税人附加税减免政策2023
  • 作为一名新手
  • 个人借款取得的利息收入要交税吗
  • 用友t3每月都要结账吗
  • 外协加工费会计分录
  • 银行现金日记账表格
  • 境外代扣代缴所得税
  • 制造业购买纸箱子记入什么科目
  • 客户扣了一部分不合格产品的货款,请问如何做账呢?
  • 没有系统U盘,电脑密码忘记了如何打开电脑
  • 国库年终总结
  • 坏账损失的确定原则
  • 备孕男的要吃叶酸吗? 已解决
  • PHP:oci_fetch_object()的用法_Oracle函数
  • 所得税返还计入什么科目
  • php java c#
  • 筹建期如果是一般纳税人 专票以后可以留着抵扣吗
  • 开红字发票导入信息不完整怎么处理?
  • 购买样品入库的账务处理
  • 提取企业所得税怎么做会计科目
  • 顺风车没有发票可以税前扣除吗
  • 个体户开普票有没有完税证明
  • 企业医疗保险属于什么类别
  • 将织梦dedecms转换到wordpress
  • 生产车间的辅助记录
  • 企业内部交易如何操作
  • 民办非企业单位是私立还是公立
  • 在建工程转入
  • 企业增值税征收范围
  • 增值税附加税包括哪些税种及税率
  • 5万元买二手车什么品牌比较好
  • 费用少计提了怎么办
  • 增值税专用发票电子版
  • 电子商务交易类应用发展现状
  • 国有资产划转实施方案
  • 进项转出分录需要盖章吗
  • 查账征收的优点
  • 购置固定资产支出怎么算
  • 采用账龄分析法计提坏账准备
  • 数据库语言主要有哪几种
  • 文档介绍
  • win10好几个操作系统
  • centos7 pptp搭建
  • win7检测有错误怎么办
  • linux 操作系统
  • windows10计划任务文件在哪
  • centos 发行版
  • win7不识别大于4T的盘
  • Immutable 在 JavaScript 中的应用
  • shell脚本数组的用法
  • python三角形角度
  • python图像移动
  • shell脚本spawn
  • js中颜色对应代码
  • javascript运用
  • Linux bash Shell中的变量类型详解
  • js中alert怎么用
  • python搭建平台
  • python集合的基本操作
  • 山东省国家税务局官网
  • 船舶吨税的税收优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设