vue.js中v-on:textInput无法执行事件解决方案

  • 时间:
  • 3757人关注

大家都知道vue.js通过v-on完成事件处理与绑定,但最近使用v-on的时候遇到了一个问题,所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程,需要的朋友可以,另外这篇文章主要知识点是关于vue.js、v-on:textInput、vue.js的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:vue.js
  • 编辑整理:程阳平
  • 教程字数:994字节
  • 阅读时间:大概18分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • Vue.js devtools
  • Vue.js快速入门
  • Vue.js项目实战
  • Vue.js前端开发:快速入门与专业应用
  • 前言

    最近在学习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,所以就执行不了;

    总结

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


    上一篇:关于vue使用Proxy实现双向绑定的方法

    下一篇:vue2.0组件之间传值、通信的方式总结

    相关内容

    • Vue.js路由实现选项卡的代码

      这篇文章主要为大家详细介绍了Vue.js路由实现选项卡简单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      12-19Vue.js路由实现选项卡简单实例

      阅读更多
    • js选项卡切换效果实例代码

      这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      05-07完美实现js选项卡切换效果

      阅读更多
    • Vue2.0使用过程常见的问题及解决方法

      本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。

      12-03Vue2.0使用过程常见的问题总结

      阅读更多
    • Vue.js修饰符知识点详解

      本篇文章主要介绍了Vue.js学习笔记之修饰符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      08-02Vue.js修饰符用法

      阅读更多
    • vue2.0+vuex的日期选择组件功能实现方法

      这篇文章主要介绍了 基于vue2.0+vuex的日期选择组件功能实现,详细介绍了使用vue编写的日期组件,,非常具有实用价值,需要的朋友可以参考下。

      08-03基于vue2.0+vuex的日期选择组件功能实现

      阅读更多
    • 水晶石技法VUE 10完全学习手册

      水晶石技法VUE 10完全学习手册

      《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见

      大小:114191 MB VUE10学习手册

      点击下载
    • Vue.js项目实战

      Vue.js项目实战

      Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

      大小:141 MBVue

      点击下载
    • Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

      Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

      本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

      大小:132979 MB 项目实战

      点击下载
    • Vue企业开发实战

      Vue企业开发实战

      本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

      大小:109.6 MBVue.js实战

      点击下载
    • Spring Boot+Vue全栈开发实战

      Spring Boot+Vue全栈开发实战

      传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

      大小:196.3 MBSpring

      点击下载
    • Vue.js前端开发:快速入门与专业应用

      Vue.js前端开发:快速入门与专业应用

      本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

      大小:3.6KB MB前端开发

      点击下载
    • 前端工程师必备技能:Vue移动开发实战技巧

      前端工程师必备技能:Vue移动开发实战技巧

      Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

      大小:122 MBVue实战

      点击下载
    • Vue.js实战

      Vue.js实战

      尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

      大小:196.7 MBVue

      点击下载
    • JavaScript+Vue+React全程实例

      JavaScript+Vue+React全程实例

      这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

      大小:59150 MB MJS实例

      点击下载

    学习笔记

    12小时11分钟前回答

    解决Vue项目中跨域问题的方法整理

    方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header(Access-Control-Allow-Origin:*);//允许所有来源访问 header(Access-Control-Allow-Method:POST,GET);//允许访问的方式 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 打开config/index.js,在proxyTable中添写如下代码: proxyTable: { /api: { target: 填写请求源地址, //源地址 changeOrigin: true, //是否跨域 pathRewrite: { ^/api: //路径重写 } } } 使用axios this.$axios.post(/api/地址,{ 发送的数据 }).then(data={ console.log(data); }) axios的配置(main.js) axios.defaults.headers.post[Content-type]=application/json;Vue.prototype.$axios=axios; 使用ES6fetch请求 fetch(/api/……

    33小时28分钟前回答

    Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法

    在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱。 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:modal挺合适双向绑定的,外部可以控制组件的 显示或者隐藏,组件内部的关闭可以控制 visible属性隐藏,同时visible 属性同步传输到外部 ///modal.vue 组件template div cla……

    30小时14分钟前回答

    vue:src文件路径错误问题及解决方案

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如 img src=./logo.png 和 background:url(./logo.png) ,./logo.png是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的 build.assetsPublic 和 build.assertsSubDirectory 链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename] 根……

    7小时42分钟前回答

    vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决方案

    vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor。 vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富文本的内容也是异常的大的,这就会给大家带来一些烦恼,我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交,那这样一来我们要怎么去处理呢,接下来大家可以来理……

    48小时15分钟前回答

    分享vue使用Element组件时v-for循环里的表单项验证解决方案

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。 首先是循环表单项没有加验证之前的代码: template div class=content-……