初学vue踩过的坑

作为一枚Java程序员,因项目需要去写vue前端,边学边写,也是痛苦。但好歹有些小收获,下面皆是开发过程中本人遇到的一些小坑大坑,记录一下,以免忘记。

1,下拉框选择之后,鼠标移入显示“x”号,需在select标签加clearable ;

2,vue删除数组中的某一项:this.$delete(array,num)。(array是数组,num是要删除的数组的下标。)

3,vue查询的时候,如需字段未定义,则可以这样判断:
if(item=== undefined) {}

4,判断一个字符串中是否包含某个字符串,,比如是否包含“/”可以这样写:
if((item.indexOf(‘/’))!== -1){} // true表示包含

5,拆分数组,比如以“/”拆分:array.split(‘/’);

6,Replace():字符串可以用replace将某个字段转为另一个字段;

7,i-view的render,标准用法
render: (h, params) => {
return h(‘i-button’,params)
}
其中,“i-button”的位置可以写各种标签。

8,vue中经常会看到这样的代码:
this. r e f s [ r e f F o r m ] . v a l i d a t e ( ( v a l i d ) => ) ; t h i s . refs[‘refForm’].validForm();

其中,refForm指代的是整个表单的数据,一般表单会有个”ref=”refForm”“的属性,代表整个表单。validate是表单自带的方法,用于验证表单数据是否符合设置好的formRule规则。
如果refForm来自另外一个vue文件,并且里面有validForm()方法,则可以直接引用,前提是要在这个页面导入另外一个vue文件。导入之后,就可以这样调用另一个文件中的方法了:
this.$refs[‘refForm’].validForm();
当然其他方法也行。

9,有时候表单的所有项都填写了,并且写对了,但是还是点击“提交”,还是报“表单输入有误”,发生这种情况的原因可能是:存在根据条件显示的输入框,当前条件是不显示,但是验证中又写了这项不能为空,所以会报“表单输入有误,且界面还没有提示”。

10,如果要调用后台接口,最好不要直接写 this.ajax…,建议先写“var me = this; me.ajax…”虽然我也不知道为什么。

11,如果下拉框的值不能为空,应该使用“change”进行触发。

12,如果报“Cannot read property ‘forEach’ of undefined”,一般出现在下拉框中,仔细检查是否正确。

13,如果控制台报“Invalid handler for event “click”: got undefined”这个错误,一般是@click绑定的方法不存在,不一定是你测试的方法,是整个页面可能存在这样的未定义的方法。

14,有时候造下拉框的数据时,明明已经写了数据,页面却展示不出来,可能的原因是“label”这个单词写错了。

15,定时器setTimeOut。碰到过在发送查询语句的代码的后面根据返回值去封装其他参数,结果查询请求返回有结果,根据结果去赋值去失败,原因是,查询语句会发请求到后台,需要一定时间,但是vue执行查询代码之后,并不会等着请求返回结果,而是发送请求之后就会执行下一句代码,这时查询结果还没返回,那么赋值自然就会失败。此时可使用定时器延迟赋值封装。

16,vue异步加载-nextTick():在下次DOM更新循环结束之后执行延迟回掉。在修改数据之后立即使用这个方法,获取更新后的DOM。
应用场景:需要在视图更新之后,基于新的视图进行操作。
注意:在created 和 mounted阶段,如需操作渲染后得视图,也要使用nextTick方法。
即:

mounted:function(){
    This.$nextTick(function(){
    })
}

17,若有连续赋值的情况,如果出现前面赋值成功,后边赋值失败,那么检查一下,是不是前面赋值的部分的代码有问题,如果有问题,一定要解决,不然很可能影响后边的赋值。

更新中…

猜你喜欢

转载自blog.csdn.net/tanwenfang/article/details/80382695
今日推荐