当前位置:首页 > 编程教程 > vue技术文章 > vue.js中v-on:textInput无法执行事件问题的解决过程

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

  • 发布时间:
  • 作者:码农之家
  • 点击:76

这篇文章主要知识点是关于vue.js、v-on:textInput、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Vue.js入门大小:26581 MB M格式:PDF作者:申思维
立即下载

Tags:Vue.js v-on:textInput 

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

前言

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

总结

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 解决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, /……

  • Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法
  • 在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱。 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch da……

  • vue:src文件路径错误问题及解决方案
  • 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如 img src=./logo.png 和 background:url(./logo.png) ,./logo.png是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直……

  • vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决方案
  • vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor。 vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使……

  • 分享vue使用Element组件时v-for循环里的表单项验证解决方案
  • 标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。 然鹅问题来了……

    vue.js 相关电子书
    学习笔记
    网友NO.920097

    浅谈Vue.js 中的 v-on 事件指令的使用

    v-on 事件指令用于绑定事件。 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件。 html: div id="app" h3已点击 {{count}} 次/h3 button @click="count++"点我/button/div 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: 。 js: script var app = new Vue({ el: '#app', data: { count:0 } });/script 效果: @click 表达式即可以直接使用 js 语句,也可以是一个定义在 vue 实例中 methods 内的函数名。 html: button @click="quickAdd(3)"快速增长/button js: methods: { quickAdd: function (i) { i = i || 1;//为避免参数为 null 或 undefined 值,这里设定了默认值 1 this.count += i; }} 效果: 注意: @click 调用的方法名如果不需要参数,那么可以不写括号。 使用 Vue.js 的一个好处是:当销毁 ViewModel 时,会自动销毁所有绑定在其上的事件处理器。 2 调用 DOM 事件 Vue.js 还提供了一个 $event 变量,使用它可以访问原生 DOM 事件。……

    网友NO.798078

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 下面是一个文档上面的例子: 2017年4月11日更新 div id="counter-event-example" p{{ total }}/p button-counter v-on:increment="incrementTotal"/button-counter button-counter v-on:increment="incrementTotal"/button-counter/divVue.component('button-counter', { template: 'button v-on:click="increment"{{ counter }}/button', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('increment') } },})new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } }}) 跟着这个……

    网友NO.452741

    对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1、Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2、Vue.js事件绑定的实现 2.1 JavaScript代码 script type="text/javascript" src="../js/vue-1.0.21.js"/script script type="text/javascript"window.onload = function() {vm = new Vue({el: '#app',data: {arrMsg: ['apple', 'orage', 'pear']},methods: {show: function() {alert(this.arrMsg);}} });}/script 2.2 html代码 div id="app" class="container" hr / 事件的绑定方式一,v-on指令 button type="button" v-on:click='show' class="btn btn-primary btn-default"显示数据/button hr/事件的绑定方式二,简写方式 button type="button" @click="show" class="btn btn-success btn-default"显示数据/button /div 2.3 运行结果 3、完整代码 !DOCTYPE htmlhtml headmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /script type="text/javascript" src="../js/vue-1.0.21.js"/script script type="text/javascript"window.onload = function……

    <
    1
    >

    电子书 编程教程 PC软件下载 安卓软件下载

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

    版权投诉 / 书籍推广 / 赞助:QQ:520161757