随笔 - 25  文章 - 0 评论 - 71 阅读 - 47882
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

 

<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,所以就执行不了;

posted @ 2017-07-11 22:45 LGY_永 阅读(1303) 评论(2) 推荐(1) 编辑
摘要: 应用的平台环境:安卓webview; 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照(其他的设备ios等浏览器没有此问题),需要让安卓开发同学在代码调整即可; (2) 点击选择图片后如何展示在页面上呢?很多开发人员估 阅读全文
posted @ 2017-06-04 00:55 LGY_永 阅读(3093) 评论(0) 推荐(1) 编辑
摘要: 实现方法: (1)利用canvas画布,fillRect()描绘出一个矩形(不是透明),定位盖在某个标签如div上面(这个标签写着中奖的信息) (2)globalCompositeOperation = 'destination-out';利用此属性,手指划过画布,arc(x,y, radius... 阅读全文
posted @ 2015-02-15 22:24 LGY_永 阅读(2218) 评论(5) 推荐(5) 编辑
摘要: 按需加载是网站性能优化立竿见影的其中一项,按需加载可以了解为 当用户触发某个动作的时候,才主动去请求资源,这样带来的优化好处:减少了HTTP请求,节省宽带,让页面首屏的内容更快展现在用户的视线范围内,可见极大提高了用户体检。触发的动作有很多,如鼠标点击,拉动页面滚动条,鼠标经过等等。【一】 图片... 阅读全文
posted @ 2015-02-03 20:53 LGY_永 阅读(7787) 评论(6) 推荐(8) 编辑
摘要: Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务,如编译less,sass,压缩js,合拼文件等等。(一)安装nodejs环境,Grunt 0.4.x要求Node.js的版本>=0.8.0,如果你已安装了nodejs,命令行中运行node -v查看你的Node.js版本,如... 阅读全文
posted @ 2015-02-01 11:37 LGY_永 阅读(1053) 评论(2) 推荐(0) 编辑
摘要: 基础知识: 复制数组: (1)循环遍历复制(不推荐)var arry = [1,5,9,7], new_arry = [], n = 0, len = arry.length;for(;n old_arry.length?old_arry.length:range; v... 阅读全文
posted @ 2015-01-11 12:25 LGY_永 阅读(1917) 评论(0) 推荐(0) 编辑
摘要: Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件,这些都可以让你任意替换线上进行修改的意思),用线下的文件替换线上的进行修改调试,的确很方便。(一)官方... 阅读全文
posted @ 2015-01-04 16:44 LGY_永 阅读(1538) 评论(0) 推荐(0) 编辑
摘要: 基础知识:在页面上创建canvas标签,然后获取canvas这个元素,因为是画2D图,所以是调用.getContext('2d') 二维图方法var target = document.getElementById('demo'), pic = target.getContext('2d')... 阅读全文
posted @ 2014-12-19 15:52 LGY_永 阅读(978) 评论(0) 推荐(0) 编辑
摘要: 这样的箭头用CSS-3实现,整段代码如下: Document 点击查看更多论坛互动 箭头在各移动浏览器都能正常显示,但在安卓 2.x 自带的原生浏览器就出现了问题,箭头方向不对,如下图: 解决方案: 给.u-scrollLoad-tips i 添加 此属... 阅读全文
posted @ 2014-11-05 14:39 LGY_永 阅读(921) 评论(0) 推荐(0) 编辑
摘要: 案例背景:在大型网站中,css样式划分为多个模块文件,如reset.css,layout.css,skin.css等等(颗粒化越小,样式重用率越高),页面需要的时候引入它们即可!回到less项目中这里,我们也可以将划分为reset.less,layout.less,skin.less等,然后在本页面... 阅读全文
posted @ 2014-05-19 18:12 LGY_永 阅读(1075) 评论(3) 推荐(0) 编辑
点击右上角即可分享
微信分享提示