vue 双向绑定，列表、条件渲染，解决强制刷新闪烁问题

双向绑定 v-model

v-model 是 vue 中进行数据双向绑定的指令，在内部实际上是通过语法糖来完成数据的双向绑定，v-model 有两种形式

• 绑定在普通表单元素上 （input select textarea radio 等）
• 绑定在自定义组件上

① 普通表单元素
select、checkbox、radio 的语法糖为 v-bind:value 和 v-on:change
input、textarea 对应的语法糖有几种情况

• 默认绑定事件为 input 事件
• 如果在 v-model 绑定时用了 lazy 修饰符，那么它绑定的事件是 change
• 如果有 type=“range” 属性，则绑定的事件是 __r
  -如果有 trim 或者 number 修饰符，则会多绑定一个 blur 事件

② 自定义组件
v-model 绑定在自定义组件时，调用的是 genComponentModel 方法，该方法主要的目的是在 el 身上绑定一个 model 对象，对象包括 value 、callback、expression 三个属性
在创建组件会判断是否有 model 选项，有则调用 transformModel 进行处理

transformModel 主要是确定自定义组件的语法糖，如果自定义组件的 options 里有 model 选项，则使用 model 选项里面对应的属性作为语法糖，如果没有 model 选项，则默认语法糖是 v-bind:value 和 v-on:input

列表渲染 v-for

v-for 指令可以绑定数组的数据渲染一个项目列表，v-for 指令需要使用 item in items 形式的特殊语法

• items：原数据数组
• item：被迭代的数组元素的别名

<div id="app">
  <ol>
    <li v-for="item in todos" :key="item.msg">
    {