总结一下这几周工作中遇到的一些问题
jquery——attr和data的区别
我们都知道为DOM元素增加额外属性，用data-来，比如：
<div class="child" data-id="1"></div>
用jquery获取data-id可以直接用data(),也可以用attr()来获取，但是这两种方法获取的属性还是有区别的，当属性是int的时候，data()获取到的是number，但是attr获取的却是string。
console.log(typeof $('.child').data('id')); //number
console.log(typeof $('.child').attr('data-id'));//string
if ($('.child').data('id')===$('.child').attr('data-id'))
{
console.log('success');
}
else{
console.log('fail');
}//fail
移动端键盘唤起优化体验
移动端的情况下，我们点击输入框，唤起键盘会影响我们原来的布局，要解决的主要有两个问题：
1.键盘遮挡输入框
2.IOS键盘弹起，fix元素失效
第一个问题我们监控input的焦点，然后滚动页面，是输入框露出，
第二个问题我们通过onresize方法来监控键盘弹起（也可以用监控input的焦点来间接监控键盘弹起），然后暂时取消fixed元素。
// 优化输入体验
$('input').on('focus', function () {
var top = $(this).offset().top;
// 稍等片刻，让键盘唤起，页面高度变化后再滚动
window.setTimeout(function() {
$(window).scrollTop(top - 60);//键盘高度可能有变化，简单设为60
}, 500);
});
$('input').on('blur', function() {
// 修改bottom让页面重绘，防止fixed元素在iOS键盘收起时卡在屏幕中间
window.setTimeout(function() {
$(window).scrollTop(0);
}, 500);
});
let Height = window.innerHeight;//键盘没有弹出时window.innerHeight
window.onresize = function () {
if (Height == window.innerHeight) {
$('.btn-wrap').addClass('fixed')//添加fix布局
}
else{
$('.btn-wrap').removeClass('fixed'）取消fix
}
};
Vue Video标签的问题
在使用vue的时候，渲染video的时候遇到一个问题，开始的时候是这样渲染的
<video class="video" controls="controls">
<source :src="videoUrl">
</video>
然而发现videoUrl变化不重新渲染，于是改为下面这样才生效：
<video class="video" controls="controls" :src="videoUrl"></video>