爬坑
1、空格
- 标签中直接写的空格:
例如: <font>xiao </font> 此处代表有两个空格
- 使用vue动态设置文字时的空格:
\xa0或者\u0020
例如:<font>{{font}}</font>
var vm=new Vue({
el:"#div_id",
data:{
font:"",
},
methods:{
get:function(){
font="xiao\xa0\u0020" //此处代表有空格,但是这两个表示的空格大小不相同
}
}
});
2、vue中for循环中的input如何获取输入的文字
这种不行,可以获取并展示第一次服务器的值,但是无法修改,修改直接报错
<ul>
<li v-for="i in 8">
<input v-model="getModel(i)"/> //这个方法根据不同的i,返回不同的数据源,但是不行
</li>
</ul>
正确的方式
<ul>
<li v-for="item in modelData">
<input v-model="item.model"/> //这个方法可以直接将数据源的值做展示并修改,双向绑定
</li>
</ul>
数据源:
modelData:[{"model":"","index":1}...] //index是为了方便记录当前所在下标的位置,model的值可以在使用前进行绑定设置
3、类似Android中的toast的写法
<!-- 中间的提示字符 -->
<div id="toastDiv" v-show="canshow">
<font class="font_toast">{{msg}}</font>
</div>
#toastDiv{
position:fixed; //相当于relativelayout
left:49%; //距左边的位置
top:49%; //距上面的位置
margin-top:-50px;
margin-left:-50px;
}
.font_toast{
width:auto;
height:auto;
border-radius: 10,10,10,10; //圆角
padding-left:20px; //内边距
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
background:rgba(210,210,210, 0.8); //有点灰,有点透明度
font-size:18px;
color:#000000;
}
//提示消息的响应
var vmToast=new Vue({ //中间提示信息
el:"#toastDiv",
data:{
msg:"", //展示信息
canshow:false,
flag:true, //标记,用来拒绝事件未完成时的重复点击
},
methods:{
show:function(msg,callback){
//this.canshow=true; //展示,可以不需要,测试发现fadein可以完成显示
if(!this.flag)return; //如果当前有toast未完成,将拒绝toast
this.flag=false; //做标记
this.msg=msg; //显示想要展示的数据
$("#toastDiv").fadeIn(500);
self.setTimeout(function(){ //显示1.2s后,执行fadeout隐藏事件
$("#toastDiv").fadeOut(500,function(){
//隐藏事件执行完成后清除标记并判断callback的类型,若有值并且属于
//function方法,则执行该回调方法
vmToast.flag=true;
(callback && typeof(callback) === "function") && callback();
});
},1200);
},
}
})
4、对axios发送请求的封装,此种一般是异步请求
sengPost:function(url,data1,callBack1,callBack2){ //发送请求
var CancelToken=axios.CancelToken;
axios({
headers:{
'Content-Type':'application/json',
'x-requested-with':'XMLHttpRequest' //这里加这个请求头,是为了方便我的后台全局捕获
//异常那里区分本次请求异常是来自异步请求还是网页请求;分别返回json数据和网页
},
transformRequest:[function(data){
data=JSON.stringify(data);
return data;
}],
timeout:5000,
url:url,
method:'post',
//params:{},
data:data1,
cancelToken:new CancelToken(function(cancel){
vm.cancelCurrentTag=cancel;
vm.cancelTag.push(cancel);
})
}).then(function(res){
vm.cancelFlag();
(callBack1 && typeof(callBack1) === "function") && callBack1(res);
}).catch(function(err){
if(err!="Cancel"){ //非代码取消请求造成的异常,才输出显示
vm.cancelFlag();
(callBack2 && typeof(callBack2) === "function") && callBack2(err);
}
})
},
//还有一种链式的写法
在这里插入代码片
//data中的
sendPost:{
me:"",
url2:"",
timeout:1000*15,
da:{},
function1:null,
function2:null,
CancelToken:axios.CancelToken,
method:function(me){
this.me=me;
return this;
},
url:function(url){
this.url2=url;
return this;
},
time:function(timeout){
this.timeout=timeout;
return this;
},
data:function(da){
this.da=(da==null?"{}":da);
return this;
},
success:function(function1){
this.function1=function1;
return this;
},
fail:function(function2){
this.function2=function2;
return this;
},
send:function(){
let that=this;
if(that.me==""||that.url2==""){
vmToast.show("请求方法和地址为必填项",3000);
return;
}
console.log("执行了")
axios({
headers:{
'Content-Type':'application/json',
'x-requested-with':'XMLHttpRequest' //为了后台区分是异步请求,还是网页请求
},
transformRequest:[function(data){
data=JSON.stringify(data);
return data;
}],
timeout:that.timeout,
url:that.url2,
method:that.me,
params:{},
data:that.da,
cancelToken:new that.CancelToken(function(cancel){
//存储键值对映射
vm.cancelTag.push({"url":that.url2,"cancel":cancel});
})
}).then(function(res){
vmMain.cancelFlag(that.url2);
(that.function1 && typeof(that.function1) === "function") && that.function1(res.data);
}).catch(function(err){
if(err!="Cancel"){ //非代码取消请求造成的异常,才输出显示
vmMain.cancelFlag(that.url2);
(that.function2 && typeof(that.function2) === "function") && that.function2("\u0020\u0020\u0020\u0020"+err+"\u0020\u0020\u0020\u0020");
}
})
}
},
//method中的
cancelAll:function(){ //取消之前的全部请求
$.each(vm.cancelTag,function(i,item){
item.cancel();
})
vm.cancelTag=[]; //取消完之后,再清空记录
},
cancel:function(url){ //取消单个的请求,并将其从集合中移除
let j=-1;
$.each(vm.cancelTag,function(i,item){
if(item.url==url){
item.cancel();
j=i;
}
})
if(j!=-1)vm.cancelTag.splice(j,1);
},
cancelFlag:function(url){ //正常完成请求,移除其中的数据
var j=-1;
$.each(vm.cancelTag,function(i,item){
if(item.url==url)j=i;
})
if(j!=-1)vm.cancelTag.splice(j,1);
},
cancelTagHasNoUrl:function(url){ //true说明没有此URL正在请求
var j=-1;
$.each(vm.cancelTag,function(i,item){
if(item.url==url)j=i;
})
return j==-1;
},
//vm中
//data里的数据
cancelTag:[], //取消的tag
configureData:"",//配置内容
5、js链式调用的写法(参考:https://www.cnblogs.com/7qin/p/10236853.html)
//写一个最容易看懂的
var a = {
b: function(bb) {
console.log(bb);
return this;
},
c: function(cc) {
console.log(cc)
return this;
},
d: function(dd) {
console.log(dd)
return this;
}
}
a.b(1).c(2).d(3);
6、同步请求,暂时还是记录ajax
$.ajax({
url:'/comm/test1.php',
type:'POST', //GET
async:false, //或false,是否异步
data:{
name:'yang',age:25
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式:
beforeSend:function(xhr){
},
success:function(data,textStatus,jqXHR){
},
error:function(xhr,textStatus){
},
complete:function(){
}
})
7、js控制页面滑动到指定位置
//页面
$("body,html").animate({
scrollTop: "0px"
}, time);
//针对div ,不能使用#直接确定某个div
$('div').prop('scrollTop','100px')
留作记录