这篇文章主要知识点是关于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的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
Copyright 2018-2021 www.xz577.com 码农之家
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
浅谈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……