VUE的指令

v-text指令：渲染data中的数据，简写{{表达式}}

v-html指令：解析html标签
v-show指令：是否展示当前标签，但是网页源代码中还是有此标签，根据表达式的Boolean值。如果是true显示，否则不显示。

<div v-show="true">我是大帅哥</div>

v-if指令：和v-show指令效果很相似，区别在于如果此指令的表达式的值为false，那么不加载当前标签，源代码没有当前标签。

<div v-if="false"></div>

v-else指令：不需要表达式，前一兄弟元素必须有v-if或者v-else-if指令

<div v-if="Math.random() > 0.5">
大于0.5
</div>
<div v-else>
小于0.5
</div>

v-else-if指令：前一兄弟元素必须有 v-if 或 v-else-if指令

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for指令：循环遍历数组

<li  v-for="(value,index) in navarr" >{{value.name}}</li>

v-on指令：绑定事件，可以用@缩写

 <li @click="playMv(id)">MV</li>

v-bind指令：动态绑定属性，缩写可以用：

<img v-bind:src="imageSrc">

缩写写法

<img :src="imageSrc">

v-model指令：只能用在表单控件里面，对值的双向绑定

<input type="text" v-model="str">

v-slot指令：插入槽口，在组件中用

<template v-slot:one>
	<h1>插入槽口</h1>
</template>

v-once指令：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<h1 v-once>初始化数据：{{str}}</h1>