v-开头有指令的含义
vue组件
vue子组件的文件默认是全局生效的：
①单页面应用中，所以组件的DOM元素，都是基于唯一一个index.html呈现
②每个组件的样式，能够影响整个html中的元素
那么在这种环境下，容易发生样式冲突。
scoped和deep
①如果在组件中style加上scoped,会自动给组件所有元素添加data-v-xxx的属性，防止属性之间样式冲突。
②如果使用scoped，想要在子元素中添加样式，则会出现类似: p[data-v-xxx]，有效的做法应该是
[data-v-xxx] p。因此，我们需要在样式中添加deep。
/deep/.pp {
color: red;
font-size: 20px;
padding: 20px;
}
vue模板编译器
浏览器识别不了vue文件，vue模板编译器vue-template-compiler帮vue文件编译成js。
组件的生命周期
组件在定义的时候是一个模板结构，我们将他标签引用的时候会立即创建一个它的实例。
组件的生命周期是一个创建-运行-销毁的阶段，强调的是一个时间段。生命周期函数由vue内置函数提供，会伴随着生命周期，自动执行。
① 最早完成渲染data props methods的阶段是created，这个时候发起数据的请求。
② 最早完成把HTML结构渲染到浏览器是mounted阶段。
③ 组件创建阶段结束就会进入到组件运行阶段
④ updated和beforeupdate阶段与之前不同，数据改变的时候才会执行。执行次数0-n次
数据传递
父组件向子组件传递数据，使用自定义属性。
子组件向父组件传递数据，使用自定义事件。
兄弟组件传递数据，需要用到eventbus。
EventBus使用步骤：
① 创建eventBus.js模块，并且向外共享一个实例对象。
② 在数据的发送方，调用bus(eventbus向外共享的实例对象).$emit('事件名称' ,'要发送的数据')方法触发自定义事件。
③ 在数据的接受方，调用bus.$on('事件名称', '事件处理函数')方法注册一个自定义事件。
EventBus.js文件
import Vue from 'vue'
export default new Vue()
Left.vue文件
<script>
import bus from './EventBus'
export default {
data() {
return {
msg: '人生分两半，一般在上帝手中，那是宿命；一般在自己手中，那是拼命'
}
},
methods: {
clickEvt() {
bus.$emit("strEvt", this.msg)
}
}
}
</script>
Right.vue文件
<script>
import bus from './EventBus'
export default {
data() {
return {
count: 0,
msg: ''
}
},
methods: {
addCount() {
this.count ++;
this.$emit("countEvt", this.count)
}
},
// 在create中注册事件，这个时候组件的data已经创建好了
created() {
bus.$on('strEvt', (val)=> {
this.msg = val
})
}
}
</script>
为什么不用this，因为left.vue和right.vue里面的this指向不同的实例。操作不是同一个实例。
ref获取DOM元素
vue优势：mvvm，程序员不需要操作dom，只需要维护数据。所以不建议操作dom。
如果不操作dom，但是想要拿到dom的引用。可以使用vue组件中的ref
给需要获取dom元素ref属性赋值，然后通过this.$refs.xxx获取dom元素。
<p ref="abb">{ { count }}</p>
abcon() {
// 改变dom元素样式
this.$refs.abb.style.color="red"
console.log(this.$refs.abb)
}
如果ref属性同名，则会被最后的覆盖。ref也可以拿到子组件的实例。
$nextTick
组建的this.$nextTick(cb)方法，会把cb延迟到dom更新周期之后执行。通俗理解，等组建的dom全部更新完毕在执行回调函数，为了保证函数能操作最新的dom元素。
复习数组
①
foreach 性能比较差，一旦开始无法在中间被停止；
some 再找到所选的项之后，可以通过return true固定语法，来终止循环。
arr.some((item, index) => {
if (item == '121') {
return true;
}
})
② every循环
只要全部的值为true，则返回true，任意一项为false，则返回false
const res = arr.every(item=>item.status)
③ reduce累加器
arr.filter(a=>a.status).reduce((‘累加的结果’，‘当前循环值’) => {},初始值)
const res = arr.filter(a=>a.status).reduce((awt ,item) => awt += item.x , 0)