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">
    {{item.msg}}
    </li>
  </ol>
</div>

// vue 框架内部将 data 响应式数据绑定给了 vue 实例 vm
const vm = new Vue({
	el: '#app',
	data: {
		todos: [
			{ msg: '学习 JavaScript' },
      		{ msg: '学习 Vue' },
     		{ msg: '整个牛项目' }
    	]
	},
  	methods:{
  		//onPlus:function(){},简写为：
  		onPlus(){
  		}
	}
})

在 v-for 块中，我们可以访问父作用域的 property

<li v-for="(item, index) in items">
	{{ parentMessage }} - {{ index }} - {{ item.msg}}
</li>

data: {
	parentMessage: 'Parent',
	items: [
		{ msg: 'Foo' },
		{ msg: 'Bar' }
	]
}

v-for 也可以接受 整数。在这种情况下，它会把模板重复对应次数。

<span v-for="n in 10">{{ n }} </span>

条件渲染

v-if

v-if 指令用于条件性地渲染内容，内容只会在指令的表达式返回 true 时被渲染

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块

<h1 v-if="state">Vue is awesome!</h1>

也可以用 v-else 添加一个 else 块，v-else 必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别

<h1 v-if="state">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>

v-show

带有 v-show 的元素始终会被渲染并保留在 DOM 中，改变 display 的值
v-show 不支持 template 元素，也不支持 v-else。

<h1 v-show="state">Vue is awesome!</h1>

解决强制刷新闪烁问题 v-clock

浏览器从上至下解析会出现闪烁问题，使用 v-clock 解决

// vue 为加载完，隐藏 {{msg}},[v-clock]{display:none}
<div id="app" v-clock>
	{{msg}}
</div>