vue.js中v-on:textInput无法执行事件解决方案
- 发布时间：
- 作者：码农之家
- 点击：76
这篇文章主要知识点是关于vue.js、v-on:textInput、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
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添加事件
（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的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
您可能感兴趣的文章:
方法 后台更改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来构建项目了，跟 vue1 很大的一处不同在于2 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流，初衷当然是好的，为了避免双向绑定在项目中容易造成的数据混乱。 解决方案一 然后开始参考网上和github上的方案等等，发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch da……
首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助 assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如 img src=./logo.png 和 background:url(./logo.png) ,./logo.png是相对资源路径，将有webpack解析为模块依赖 static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直……
vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，如果大家伙在需求允许的情况下，还是会比较建议使用vue-quill-editor。 vue-quill-editor的使用方法在这边就不多说了，大家网上查下，一抓一大把 但是在使用vue-quill-editor有一个致命的问题，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，即使……
标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。 然鹅问题来了……
vue.js 相关电子书
学习笔记
浅谈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……