vue.js中v-on:textInput无法执行事件解决方案
- 发布时间：
- 作者：码农之家
- 点击：76
这篇文章主要知识点是关于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添加事件
（2）processAttrs
.....然后傻傻地一层一层往下找，找到了getOuterHTML
/**
* 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.js 相关电子书
学习笔记
<
1
>
浅谈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 事件。……
浅谈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 } }}) 跟着这个……
对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……