常见问题的积累和总结（十个问题为一篇）不定期更新

1.vue组件的data要使用函数

vue组件的data要使用函数返回值，防止其他使用该组件的文件数据受到影响。

data:function(){
    return {
        f:1,
        b:2
    }
}

2.webpack中超链接的配置，开发更方便

在文件webpack.base.conf.js中的resolve项目中，有alias（别名）这个选项。

如图：

3.css的规范（有了一定的样式规范，别人看你的代码才能够一目了然）

在样式规范中，尽量先写标签的布局，如display,width,height然后再加上标签的颜色和字体大小。

如图：

4.推荐网站草料二维码，可以通过链接生成二维码，通过手机扫码访问。

如在开发移动端页面，在pc端跑好后，可以将链接发到这个网站，生成二维码，手机访问更加方便，但是要保证手机和电脑在同一个局域网哦~

草料二维码网址：https://cli.im/

5.常常对手机端的边框1px达不到我们的要求，虽然代码写着1px，但是手机和电脑的像素总是存在差距。

这时我们使用伪类来解决，上代码

@mixin border-1px($color) {
	position:relative
	&:after
	   display:block
	   position:absolute
	   left:0
	   bottom:0
	   width:100%
	   border-top:1px solid $color
	   content:''
}

补充：& 表示嵌套的上一级( > 为子元素选择器)

这时sass的语法，代表上一级选择器，例子

ul{
    margin-bottom:20px;
    & > li {
        margin-bottom:0;
    }
}
等同于：
ul {margin-bottom:20px;}
ul > li {margin-bottom:0;}

同时需要对伪类根据不同手机型号进行缩放（如果不缩放，和单纯设置1px是一样的效果）

@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
	.border-1px
	&::after
		-webkit-transform:scaleY(0.7)
		transform:scaleY(0.7)
		
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
	.border-1px
	&::after
		-webkit-transform:scaleY(0.5)
		transform:scaleY(0.5)

-webkit-min-device-pixel-ratio: 1.5 是指当时显示屏最小的色倍为1.5倍的

科普一波：device-pixel-ratio是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素

学习博客：https://blog.csdn.net/lny1126/article/details/80538253

6.css超出省略号展示

overflow:hidden;//超出部分隐藏
text-overflow:ellipsis;//隐藏部分用省略号展示
white-space:nowrap;//强制不换行

三个属性一个不能少

7.vue中v-for列表实现单选

html中控制class（是否选中的条件：所选的id与列表所在id是否一致），上代码：

<li 
    v-for="(item,index) in radioList" 
    :key="index" 
    :class="selectedNum==index?'active':''" 
    @click="select(index)"></li>

点击时改变selectedNum值，每一项进行自己的判断从而改变class的值，来改变样式。

data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
    };
  },
methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
  }

之前是通过操作DOM改变元素的class属性，这样影响效率以及代码的可读性

8.vue的双向绑定理解得不够透彻

9.html中使用制表符

<div v-for="(method,index) in item.methods">
          &emsp;() 
        </div>

效果如图

10.vue在ios上会出现白屏的情况

场景：点击返回时，页面空白或者有半屏（这时点击一下屏幕可以全屏出现）

原因：发现在ios 机器上使用webview 开发[Vue]项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩。

解决方案：在全局加上样式

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#app{
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}