2018年5月

1.referrer字段,表明跳转到当前页面的源,即上一级文档的URL,浏览器会在请求头中带上,也可以在document.referrer里获取到

https://www.cnblogs.com/caixw/p/referrer-policy.html

2.上传文件时enctype必须为multipart/form-data,对应http请求头里的content-type字段,如果用jquery的ajax传,要用formdata对象,content-type设为false即可。

3.表单控件 click 和 change 事件顺序有先后,click > change (不同浏览器不同) 但注意,在click中取到的checked值已经是新值,也即 checked改变 > click handler > change handler

4.一个坑

vue的v-for指令中 "item in list" item相当于一个函数的形参,也就是说item是不能直接绑在v-model上的(v-model = "item"),vue会发出警告,它相当于给形参赋值,是不会作用到data上的

一般使用时,绑在v-model上的都是一个对象的属性,比如v-model=item.checked,这就引发了一个坑

比如有这样一组数据

list: [
    {checked:false}   
]
<li v-for="(item,key) in list">
    <input type="checkbox" v-model="item.checked" @click="click">
</li>

如果checkbox初始值为未选中,现在点击一下

问题一、在click事件中打印e.currentTarget.checked,结果为?

问题二、在click事件中打印this.list[key].checked,结果为?

问题三、在click事件中执行this.list = JSON.parse(JSON.stringify(this.list)),会发生什么?

首先因为v-model指令是一个语法糖,它对于checkbox相当于v-bind:checked="item.checked"  @change="(val) => item.checked = val"

而上面的click事件会先于change事件发生,所以问题二中的值还是旧的值false,此时vue还没有将dom的数据同步过来

但是问题一中直接获取dom的checked属性,是可以获取到更新后的值的。

最后是问题三,在click操作中替换了一个新的list,新的list中对应key的那一项checked依然是false。click事件结束,进入change事件,vue将新的dom值true赋给item.checked,但是由于此时绑定关系没有更新,v-for中的item还是指向旧的list中的对象,将旧对象的checked变为了true,而当前data里是新的list,新的list中那个item的checked还是false。最后,事件循环结束,vue开始更新视图,此时才将input元素的绑定关系更新为新list中的item,同时由于item.checked是false,所以dom的值又被更新为false。

在界面上这一操作的结果表现为,点击checkbox时,选中的勾很快出现了一下然后又消失了,原因就是上面说的。

原文地址:https://www.cnblogs.com/natsu07/p/8991087.html