Vue.js学习笔记

语法糖
是指在不影响功能的情况下，添加某种方法实现他同样的效果，从而方便程序开发，比如v-bind和v-on都提供了语法糖。
v-bind:可以简写为:   （v-bind动态绑定，区别于v-model双向绑定）
v-on:可以简写为@

绑定class
class="类名" 这种是静态固定class
:class="{'active':isActive, 'error':isError}" 这就是动态绑定的一种方法
isActive和isError可以是data里的两个变量，比如
data: {
    isActive: true,
    isError: false
}
这时渲染结果就是 class="active"
如果把isError设为true，那渲染结果就是 class="active error"
class和:class可以共存

使用props传递数据
父组件向子组件传数据或参数（正向传递，Vue2.x变成单向了，Vue1.x提供了.sync支持双向绑定）

组件通信
父组件——props——>子组件
子组件——$emit——>父组件

父子组件——子组件传y给父组件的x
使用$emit传值
父组件
template
<子组件名 @自定义事件名="setX" :sendX="x"></子组件名>
script
data: {
    x: 0
},
methods: {
    setX(y) {
        this.x = y;
    }
}
子组件
template
<button @click="modifyY">+1</button>
script
props:['sendX'],
data: function () {
    return {
        y: 0
    }
},
methods: {
    modifyY () {
        this.y++;
        this.$emit('自定义事件名', this.y);
    }
}

兄弟组件——兄组件传x给弟组件的y
使用总线bus，$emit传值，$on接收值（项目里的总线$root.Bus）
兄组件
data: {
    x: 0
}
在需要传的地方this.$root.Bus.$emit('事件名', this.x);
弟组件
data: {
    y: 0
}
在需要接收的地方this.$root.Bus.$on('事件名', (x) => {
    this.y = x;
});

块元素block、内联元素inline、内联块元素inline-block
block
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

inline-block
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

应用：
div并排显示:在css样式里加一句display: inline-block;

大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
1、常见的块级元素有 div, form, table, p, pre, h1~h6, dl, ol, ul 等。
2、常见的内联元素有 span, a, strong, em, label, input, select, textarea, img, br 等。

Collapse折叠面板
每一个折叠项就是一个Panel块

clearfix清除浮动
浮动的意思：如果一个父元素内部的子元素是浮动（float）的，那么常会发生父元素不能被子元素正常撑开的情况

CSS字段
box-sizing的两个值的区别：
content-box：是默认值。如果你设置一个元素的宽为100px，那么这100px仅为内容区的宽，如果有border或者padding，那个最后元素的实际宽度会大于设定的100px。
border-box：告诉浏览器去理解你设置的边框和内边距是包含在width内的。也就是说，你将一个元素的width设为100px，那么这100px会是内容区的宽度，border和padding它们的总和。

pip install超时问题解决：使用我司自己的镜像
pip install 模块名 --trusted-host=cmc-cd-mirror.rnd.huawei.com -i http://cmc-cd-mirror.rnd.huawei.com/pypi/simple/