Vue

date: 2018-07-15 17:02:37
updated: 2019-08-07 17:08:34

Vue

1. 定位（float 、 position等）会脱离文档流，即对div判定高度会有影响。可以在需要定位的div中再套一层div，在父div中clear：both，或者修改需要定位的div属性从float改到text-align

2. route跳转

this.$router.push({
	path: '/second/Build_Detail',
	query: {
		stageIndex: index
	}
});

# 下一个页面获取参数
Index: this.$route.query.stageIndex

3. 多个$axios嵌套会导致异步问题，换成ajax就可以了

this.$jquery.ajax({
	type: 'post',
	dataType: 'json',
	url: '/',
	data: {
		dataTable: "",
	},
	async: false, // false是同步
	success:function (response) {
		var data = response.data;
		console.log(data);
})

4. for循环获取元素id

for(var i = 0; i < len; i++){
	var str = "#bt" + "_" + i; // #bt_1
	$(str).removeClass("button_act");
}

5. 如果对 对象、数组等非直接变量查询赋值之后页面没有刷新

this.object = JSON.parse(JSON.stringify(this.object));

通过使用JSON先转换再解析的方式，可以骗浏览器这是一个新的对象，就可以实现局部渲染。如果页面是通过循环来输出对象中的值那就并不需要这一步。

6. 动态计算进度条宽度

<div class="color" :style="{ width : done != '-' ? (done > all) ? '100%' : (done*100/all) + '%' : '0%'}"></div>

7. 通过 Set() 去重，然后转换成数组

var prctrSet = new Set();
for (var i = 0; i < data.length; i++) {
	prctrSet.add(data[i].prctr);
}
this.prcArray = Array.from(prctrSet);

8. "v-show"所包含的组件也会在呈现页面的时候获取数据

9. 页面第一次显示数组中的数据（以json形式存储）的时候，可能会因为没有key值而报错，导致整个页面无法呈现。所以需要在初始化的时候把数组全部key值写出来，value写空

10. div中的文字垂直居中

parentElement{
	position:relative;
}

childElement{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

11. 阻止旋转屏幕时自动调整字体大小

移动端开发时，屏幕有竖屏和横屏模式，当屏幕进行旋转时，字体大小则有可能会发生变化，从而影响页面布局的整体样式，为避免此类情况发生，只需设置如下样式即可

* {
  -webkit-text-size-adjust: none;
}

12. iOS 下取消 input 在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

13. 禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

14. 禁止 iOS 弹出各种操作窗口

-webkit-touch-callout: none;

15. 禁止 ios 和 android 用户选中文字

-webkit-user-select: none;

16. 浮动子元素撑开父元素盒子高度

解决方法如下：

1. 父元素设置为 overflow: hidden;
2. 父元素设置为 display: inline-block; 等

这里两种方法都是通过设置css属性将浮动元素的父元素变成间接变成BFC元素，然后使得子元素高度可以撑开父元素。这里需要注意的时，最好使用方法1， 因为inline-block元素本身会自带一些宽高度撑开其本身。

17. 往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。 解决方法 ：

window.onunload = function () {};

18. overflow-x: auto 在iOS有兼容问题; 滑动卡顿

-webkit-overflow-scrolling: touch;