01.Vue的MVVM模型
MVVM模型 1. M：模型(Model) ：data中的数据 2. V：视图(View) ：模板代码 3. VM：视图模型(ViewModel)：Vue实例 观察发现： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
02.vue的数据代理
-
依靠的是Object.defineProperty()方法
let obj1 = {name: 'lili'} let obj2 = {age: 18} Object.defineProperty(obj2, 'name', { get() { return obj1.name }, set(name) { obj1.name = name } }) -
何为数据代理：数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处： 更加方便的操作data中的数据
3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。 在getter/setter内部去操作（读/写）data中对应的属性。
03.事件处理
<button @click="showInfo1">点我提示信息1（不传参）</button>
// 不传参，函数接收的第一个参数就是event对象
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
// 传参，则第一个参数名为固定"$event"，函数接收的第一个形参就是event对象
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
04.计算属性computed
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
- 注意：vue开发者工具里，如果你的数据在页面初次渲染时没有用上，那么即便它后面改变了，但在vue开发者工具里面数据将不会被监测到发生了改变（即数据不会发生改变，注意一下再工具调试时）
- <button @click="isHot = !isHot">切换天气 // @click="isHot = !isHot"可以写简单的语句，如果不负责就不用加事件名；但是这里的数据只会在vm上查找，vm上没有就会报错，@click="alert('弹出会报错，因为不会找到window上的alert方法，只会找到vm')"
05.监视watch
监视属性watch：
isHot:{
immediate:true, //初始化时让handler调用一下
deep:true, // 深度监视
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置 (2).通过vm.$watch监视
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
简写：
isHot(newValue,oldValue){ // 简写，直接写成函数式
console.log('isHot被修改了',newValue,oldValue,this)
}
06.条件渲染
1.v-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
07.收集表单数据v-model
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
