Vue指令：v-text v-html v-if v-show v-else v-else-if v-for的理解

v-text & v-html
v-text是用于操作纯文本，它会显示对应的数据对象(data)上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化，并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。

	<div id="app">
		<div v-text="msg"></div>
		<div>{{text}}</div>//两种结果相同
	</div>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: '<div>hello</div>'
			}
		});
	</script>

参考

v-html用于更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

	<div id="app">
		<div v-html="msg"></div>
	</div>

3.v-if & v-show
条件渲染v-if和v-show都是用来控制元素的渲染。
v-if判断是否加载，可以减轻服务器的压力，在需要时加载，但它有更高的切换开销（如果初始条件为false时不加载，除非等到true，才开始加载；在渲染条件切换时，相对应的条件块内的事件监听器和子组件会适当的销毁和重建）
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销（v-show不管初始条件是否为真，都会被初始渲染。只是通过修改CSS属性display来控制显示与隐藏。 ）。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
特点：
v-if 的特点：每次都会重新删除或创建元素
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display属性(行间样式element.style的display:none)
能耗：
v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
使用：
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

4.v-else-if & v-else
与条件语句if-else和if-(else-if)-else的用法相同。

html:
<div id="demo">
	<div v-if="type === 'A'">
		type = A
	</div>
	<div v-else-if="type === 'B'">
		type = B
	</div>
	<div v-else-if="type === 'C'">
			type = C
	</div>
	<div v-else>
			not A/B/C
	</div>
</div>
Vue.js:
<script type="text/javascript">
	var vm = new Vue({
		el: '#demo',
		data: {
			type: 'B'
		}
	});
</script>

5.v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名。<div v-for="item in items">{{item}}</div>v-for 指令使用 item in items 形式的特殊语法，items 是源数据数组， item 是数组元素迭代的别名。
另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="item in items"></div>//遍历简单数组arr =[1, 2, 3]
<div v-for="(item, index) in items"></div>//遍历复杂数组arr=[{id:1, title:'hello'}, {id:2, 'hi'}]，两个参数第一个参数为数组元素别名，第二个参数为数组元素索引
<div v-for="(val, key) in object"></div>//遍历对象obj: {id: 1,name: 'superman',age: 100}，两个参数第一个参数为对象的值，第二个参数为对象的键
<div v-for="(val, key, index) in object"></div>//遍历对象obj: {id: 1,name: 'superman',age: 100}，三个参数第一个参数为对象的值，第二个参数为对象的键，第三个为索引

参考