当前位置:首页 > 编程教程 > 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作者:申思维
立即下载

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项目中跨域问题的方法整理
  • Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法
  • vue:src文件路径错误问题及解决方案
  • vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决方案
  • 分享vue使用Element组件时v-for循环里的表单项验证解决方案
  • vue.js 相关电子书
    学习笔记
    网友NO.619015

    浅谈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.702806

    浅谈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.312272

    对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
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com