Vue之疑惑(持续更新...)

这篇文章将会记录一些我在日常开发中遇到的各种奇葩问题,在此记录,供大家借鉴减少不必要的时间浪费,此文将会持续commit,敬请关注

疑惑一(bitbar-webpack-progress-plugin)

随着项目的壮大,各种依赖插件也随之多了起来,最近遇到这么一个问题,在install一个bitbar-webpack-progress-plugin这个插件后运行项目,控制台报错,我纳闷查了一下,觉得可能是es6搞得鬼,随在index.js文件加了“use strict”,写js的朋友一定不陌生我就不再过多解释,下面是一些相关截图

解决方案: 如上所述

• date 2017-04-26 23:34:42

疑惑二 事件绑定触发

今天在项目中碰到一个问题,在进行单页面跳转时出现了不符合预期的行为:单页面跳转后hash值变成空

1
2
3
4
5
6
7
8
9

<a href="#" @click="sbSubmit" class="button button-big button-fill button-blue">下一步</a>
sbCheck:function(){
...
if(result){
       //检验成功确认页面
     this.$refs.fb.toPage('fjssb_confirm')
 }
}

进过检查是因为默认事件绑定的原因,触发了路由.原生中我是是这样处理的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

on: {
  keyup: function (event) {
    // 如果触发事件的元素不是事件绑定的元素
    // 则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是enter键或者
    // 没有同时按下shift键
    // 则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的keyup事件
    event.preventDefault()
    // ...
  }
}

刚好,vue中提供了修饰符来解决这种情景

解决方案:

加上prevent修饰符

1

@click.prevent="sbSubmit"

• date 2017-04-28 17:22:57

疑惑三 错误在vm.$el挂载之前渲染页面

写之前有个小插曲,刚刚在启动hexo时,碰到了node依赖版本出错问题,顺藤摸瓜,大脑第一反应是node版本的问题,随通过命名行查看,原来上星期为了测试vue2.3新特性把版本切换到了7.x版本,换回5.x后运行,deal~

好了,回归正题,就标题所示,就我平时对生命周期谨慎的态度,没想到刚刚就栽了跟头.需求是这样的,我需要从后台发送请求,再从返回的数据渲染页面,之后通过form表单的action跳转到对应的支付界面.代码是这样处理的

1
2
3
4
5
6

html
  <div class="content">
      <div class="content-block">
        <div id="payForm">{{data2}}</div>
      </div>
    </div>

1
2
3
4

js
 ...
 let a = document.getElementById("payForm").innerHTML = this.data2
 document.all.pay_form.submit()

我在methods定义了一个load方法,按照平时的做法直接在created出调用

1
2
3
4

created(){
 ...
 this.load()
}

之后控制台直接给我抛出来了Cannot set property ‘innerHTML’ of null.分析了一会就明白了,出现这种状况是因为在浏览器在解析js到id=”payForm”,而此时页面可能还没渲染出来,所以就报错.其实在vue2.0生命周期已经详细说明了,在执行created时el实例其实还没被挂载.所以正确的处理方式应该是在mounted钩子行数中去处理,它会确保el实例已经被挂载,当然还有一个坑,官网也说到了,代码如下处理

Vue 2.x生命周期

解决方案: 如上所述

• date 2017-05-09 15:17:54

疑惑四 解决file input 第二次选择同一张图片后无法触发change事件

这一块并不局限vue框架属于前端的东西,因为项目碰到遂记录在此处

1. 解决方案1: 在你的input所属的form表单reset(),以jq操作dom为示例

1

$("#avatorForm")[0].reset();

1. 解决方案2: 设置你的input file value值为空,以jq操作dom为示例

1

$('.inputImage').val('');

• date: 2017年07月05日10:42:58

疑惑五 import路径

不知道大家第一次搭脚手架后看index.js这个文件有没有这个疑问,为什么import路径是@/components/Hello就可以找到hello.vue

打开webpack.base.conf.js文件解惑

1
2
3
4
5
6

resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
      '@': resolve('src'),
   }
 },

@的意思是run的时候会通过@找到src根目录下的文件, resolve是一个执行函数

1
2
3

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

动手实践,把@改为任意字符,之后再index.js的import语句对应修改,其实最终的地址是src/components/Hello

1
2
3

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '任意字符/components/Hello'

• date 2017年07月30日23:14:49

疑惑六 八进制在strict mode 报错

这个问题不局限于vue,它是js的问题,因为在做项目碰到这个坑, 遂记此

今天下午大概三点吧,控制台抛出下面的错误

1
2
3
4
5
6
7
8

SyntaxError: Octal literals are not allowed in strict mode.
    at exports.runInThisContext (vm.js:69:16)
    at Module._compile (module.js:432:25)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:349:32)
    at Function.Module._load (module.js:305:12)
    at Module.require (module.js:357:17)
    at require (module.js:373:17)

因为业务涉及使用到了公式引擎,所以有一阵子我一直埋头在代码和源码中试图找出破绽(尽管引擎确实有不足之处),知道下班还是没能解决

现在是晚上10点左右,问题得到了解决,是八进制转换问题,因为我的变量有一个值是05,之后我去掉首部0之后错误就消失,至于为什么strict模式下不支持八进制,知道的朋友麻烦下方留言告知哈~

• date: 2017年08月08日22:46:21

持续更新中,敬请期待…