vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick
25、v-model详解
（1）v-model原理
1）原理:
v-model本质上是一个语法糖，比如：在应用于输入框时，就是value属性与input事件的合写。
2）作用
①数据变，视图变
②视图变，数据变
注：在模版中，$event用于获取时间的形参
3）示例：
（2）表单类组件封装与v-model简化代码
1）父传子：数据应该是父组件props传过来的，v-model拆解绑定数据
2）子传父：监听输入，子传父传值给父组件修改
简言之：利用父子通信实现v-model的效果（子组件不能使用v-model，因为数据是父组件的）
3）示例
初始：
①父传子
效果：
②子传父
初始（续上）：
结果：
（3）父组件使用v-model简化代码，实现父组件和子组件数据的双向绑定
1）子组件中：props通过value进行接收，事件触发input
2）父组件中：v-model给组件直接绑数据（:value+@input）
原来：
用v-model：
3）效果（和原来一样，代码用v-model进行简化）：
26、sync修饰符
（1）作用：可以实现子组件与父组件数据的双向绑定，简化代码
（2）特点：prop属性名，可以自定义，非固定值value
（3）适用场景：封装弹框类的基础组件，visible属性，true显示，false隐藏
（4）本质：:属性名+@update:属性名的合写
（5）示例：
1）父传子
父组件：
2）子传父
子组件：
父组件：
③效果：
27、ref和$refs获取dom组件
（1）作用：利用ref和$refs可以用于获取dom元素，或组件实例
（2）特点：查找范围，当前组件内（更精确稳定）
（3）语法：
1）获取dom：
①给目标标签添加ref属性
②恰当时机，通过this.$refs.属性名，获取目标标签
2）获取组件
①给目标标签添加ref属性
②恰当时机，通过this.$refs.属性名，获取目标组件，就可以调用组件里的方法
③示例：
父组件通过ref属性获取子组件的值，并重置其值
代码：
结果：
获取：
28、Vue异步更新和$nextTick
（1）要点：通过$nextTick解决Vue异步更新问题
（2）示例：
点击之后，改变为输入框，并获取焦点
——>
源代码：
1）直接使用this.&refs.ipt添加焦点，发现不仅未获取焦点，并报错（Vue异步更新，dom更新未完成）
2）使用setTimeout,可以解决问题，但时间估计不一定准确
3）使用 this.$nextTick,发现几乎没有延迟
