VUE基础部分
组件css样式例子
<style lang="less">
// 这里记得改名，然后给div也加名字
.comName-container {
padding: 10 20px 20px;
background-color: lightskyblue;
min-height: 250px;
flex: 1;
}
</style>
并且App.vue中需要用到
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
css样式部分
首先：每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
scoped
防止样式冲突，能够使得只在这个组件中的h3变蓝，其他的组件不影响。
若无scoped则其他组件中的h3会跟着变蓝。
<style lang="less" scoped>
h3 {
color: blue;
}
</style>
/deep/
若要使得组件内的子组件的h5变色，添加此即可。
/deep/ h5 {
color: blue;
}
vue组件中data的写法
组件中的错误写法：
vue组件中的错误写法：（不能指向对象！之前是在html中导入vue连接，而现在不行）
data {
username:'zs'
}
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，
类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
正确的:
data() {
return {
message: 'hello vue.js',
// 定义 books 数组，存储的是所有图书的列表数据。默认为空数组！
books: []
}
}
props自定义属性
使用者通过自定义属性，为当前组件指定初始值。自定义属性的名字，是封装者自定义的（只要名称合法即可）
注意：props 是“只读”的，不要直接修改 props 的值，否则终端会报错！所以适合作为初始值。
自定义属性中，又附带已经定义的可用的属性：
- default：如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
- 定义init 的值类型必须是 Number 数字，不是则终端报错
- 必填项校验：要求init必须要传入
default: 0,
type: Number,
required: true
例：
不同的人调用可以产生不同的值，也就是Left和Right分别为9，6，是自己赋值的
①
首先，初始化一个Count组件
组件内的数据绑定方法区别
init是一个字符串："9"
<MyCount init="9"></MyCount>
init是一个数字6
<MyCount :init="6"></MyCount>
②MyCount组件中：
<template>
<div>
<h5>Count 组件</h5>
<p>count 的值是：{{ count }}</p>
<button @click="count += 1">+1</button>
<!-- 若给这里的count赋值为字符串，则会一直增加为count11111，为数字则正常递增 -->
</div>
</template>
<script>
export default {
props: {
init: {
default: 0,
type: Number,
required: true
}
},
data() {
return {
// 把 props 中的 init 值，转存到 count 上。毕竟data是可读可写的。
count: this.init
}
}
}
</script>
Left中：
<MyCount :init="9"></MyCount>
Right中：
<MyCount :init="6"></MyCount>
结果：
当Left和Right分别调用这个组件加入到自己内部的时候，展示：
