vue.js中v-on:textInput无法执行事件问题的解决过程


Posted in Javascript onJuly 12, 2017

前言

最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍:

先来看这段示例代码

<div id="wrap">
  <input type="text" v-on:textInput="fn">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  new Vue({
   el:'#wrap',
   methods:{
    fn:function(){
     console.log('textInput');
    }
   }
  });
</script>

寻找BUG原因步骤

(1)首先通过v-on关键字寻找到 addHandler,此函数传入的事件名竟然是 textinput(正确为textInput,I是大写,而不是小写),错误就定位在这了;然后往上层继续寻找(即父函数)

   注: (onRE.test(name)),var onRE = /^@|^v-on:/;  是通过匹配v-on添加事件

vue.js中v-on:textInput无法执行事件问题的解决过程

(2)processAttrs

vue.js中v-on:textInput无法执行事件问题的解决过程

.....然后傻傻地一层一层往下找,找到了getOuterHTML

vue.js中v-on:textInput无法执行事件问题的解决过程

vue.js中v-on:textInput无法执行事件问题的解决过程

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el) {
 if (el.outerHTML) {
 return el.outerHTML
 } else {
 var container = document.createElement('div');
 container.appendChild(el.cloneNode(true));
 return container.innerHTML
 }
}

真相大白了,因为vue是利用根原素outerHTML获取里面的dom片段(进行v-on匹配事件监听),然而outerHTML返回转为小写字母的代码片段,导致了textInput转为了 textinput,所以就执行不了;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 #Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
python Opencv将图片转为字符画
2021/02/19 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
物业管理专业求职信
2014/06/11 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js