provide inject不推荐使用
兄弟组件：通过共同祖辈组件
通过共同的祖辈组件搭桥，$parent或$root
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
eventbus的原理：
Vue.prototype.$bus = new Vue();
类似于兄弟组件
vue中有2种数据绑定的方式：
- 单向绑定（v-bind）：数据只能从data流向页面
备注：
v-bind，简写为：:
v-bind:href = "xxx" 等价于 :href = "xxx" - 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
①双向绑定一般都应用在表单类元素上（如：input、select等）
②v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
data与el的2种写法：
- el有2种写法
①new Vue时候配置el属性
②先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
// el的两种写法
const v = new Vue({
// el: '#root', // 第一种写法
data: {
name: 'tyy'
}
})
v.$mount('#root') // 第二种写法
- data有2种写法
①对象式
②函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
// data的两种写法
new Vue({
el: '#root',
// data的第一种写法：对象式
/*
data: {
name: 'tyy'
}
*/
// data的第二种写法：函数式
data: function(){
return {
name: 'tyy'
}
}
// 函数式，或者简写为以下形式：
/*
data() {
return {
name: 'tyy'
}
}
*/
})
- 一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
MVVM模型
- M：模型（Model）：对应data中的数据
- V：视图（View）：模板
- VM：视图模型（ViewModel）：Vue实例对象
通俗理解：
① M是数据，V是DOM页面结构，VM是中间桥梁
② VM将M和V连接起来
观察发现：
① data中所有的属性，最后都出现在了vm身上
② vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
数据代理
// Object.defineProperty，给对象定义属性
let person = {
name: 'tyy',
gender: 'female'
}
Object.defineProperty(person, 'age', {
value: 18
})
console.dir(person)
以上代码的结果为下图所示：
注意：age的颜色，相较于gender和name颜色较浅，因为age不可以遍历（也称为不可枚举）
因为Object.defineProperty的属性：enumerable，表示能否通过for in循环访问属性，默认值为false，默认为不可以遍历
这一点，和直接给对象添加属性（即：person.age === 18），是不同的，直接添加属性结果如下图所示：value颜色不是浅的
