前端学习笔记

• 父布局宽度固定的情况下，按如下设置可以使子元素水平居中：

.parent {
	text-align:center"
}

.child {
    margin:0 auto;
    width: 300px;
    height: 300px;
}

• 父布局宽度不固定的情况下，子元素如下设置可以水平居中：

.child {
        width: fit-content;
        width: -moz-fit-content;
        width: -webket-fit-content;
        margin: auto;
}

• 父布局如下设置，可以使子元素们垂直居中：

.parent {
		//设置高固定
		width: 300px;
		height: 30px;
		display: flex;
		align-items: center;
}

• input标签设置如下事件，可以限制只能输入数字：

oninput = "value=value.replace(/[^\d]/g,'')"

• css四种定位方式

1. 默认定位方式为static。
2. 只有设置了postion：relative，即定位方式为相对定位（元素相对于自身偏移），然后设置的left，right属性才生效。不会使元素脱离文档流。
3. 绝对定位postion：absolute：相对于离自己最近的，开启了定位方式的父元素进行定位（设置left，top等属性，进行偏移）。如果每层父元素都没开启定位，则相对于浏览器窗口进行定位。绝对定位会使元素脱离文档流。
4. 固定定位postion：fixed：相对于浏览器窗口进行定位。其他和绝对定位一样。

设置定位后，如果元素重叠了，可以设置z-index来改变元素优先级。

• 父级div里有多个子div，想让子div水平排列并且各自居中，可以对父级div如下设置：

.parent {
  display: flex;
  justify-content: space-around;
}

• Vue里，只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，比如：
  vm.b = ‘hi’
  那么对 b 的改动将不会触发任何视图的更新。
  要触发更新，可以用this.$set(vm, ‘b’, ‘hi’)或者Vue.set(vm, ‘b’, ‘hi’)。

• 只有等页面加载完成好之后你才能调用this.$refs。如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到this.$refs 的，会报undefined错误。
  解决办法：

1、如果你在mounted里获取this.$refs，因为dom还未完全加载，所以你是拿不到的， update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，就可以使用this.$refs了。
2、如果写在method中，那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了。
3、或者加个定时器延时加载this.$refs（这个方法还没有试）

• Vue子组件的数据如果写在data区域，然后父组件中更新了数据，子组件是收不到更新的，可以写在 computed区域就可以了。
  比如下面父组件中更新了praised和likeCount，子组件中需要做以下更改才能收到：
  

• 子组件做了改变，想触发父组件的处理，可以这样：

子组件：

            this.$emit('cancelPraise')

父组件：

        @cancelPraise="onCancelPraise(var)"

methods: {
    onCancelPraise(var) {
    	xxxx处理
    }
}