项目中的小bug总结(bootstrap vue)

版权声明：哼！坏人！这是我辛辛苦苦码的！ https://blog.csdn.net/DurianPudding/article/details/84037004

1. 用bootstrap中分列格式要记得加<div class="row">

写代码写到后面，情不自禁给row改名了，想着这命名怎么这么不规范，改成了item-row，结果就显示有问题了

<div class="row">
	<div class="col-md-2"></div>
	<div class="col-md-10"></div>
</div>

2. 在html里面用vue绑定数据，记得属性要跟后台名字对应

这个item.checkRes 的 checkRes 就是要跟后台对应。
同时v-model是双向绑定的，常用于input，可以制作选择按钮。

<input class="check" type="radio" value="true" v-model="item.checkRes">True</input>

3. ajax的回调函数里如果用到了this，要在函数外面绑定.bind(this)

$.ajax({
	success: function(){
		this.list = data;
    }.bind(this)
})

4. 美化button的时候 可以直接更改button的样式

本来想用div做button，小哥哥说最好用Button，这样直接看就知道这是个button。
bootstrap自带的button，然后将button显示为block，当时想让button与父元素一样宽，要设置width: 100% 。
不能用margin: 0 auto，因为 button会很小，周围margin的地方无法点击。
如果用圆角处理边框会比较好看~

// button与父元素一样宽，并且文字居中
button { 
	width: 100%;
	display:block;
	text-align: center;
}

// 圆角边框
button { 
	border-radius: 4px;
}
 
<button class="btn" v-on:click="sendEditData">提交</button>

5. 想让显示内容居中， 两侧可以设置百分比的Margin

最近比较流行居中显示内容啦，而且内容最好比较窄，适宜阅读。由于想要比较好的自适应效果，就需要我们两侧设置%的margin.

.pages-content {
	margin-left: 20%;
	margin-right: 20%;
}

<div class="pages-content"></div>

6. 在显示多条数据的时候，且需要交互的时候，让用户集中于当前数据条，加悬浮改变背景色，可以把hover加到div上

.item:hover, .item:focus {
	// 这个颜色好看~~
	background-color: #f5f5f5;
}

<div class="item"></div>