vue常用指令列表
- v-once
- v-text
- v-html
- v-colak
- v-if
- v-else
- v-else-if
- v-show
- v-for
- v-bind
- v-model
- v-on
v-once
v-once关联的实例，只会渲染一次。实例及其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once> {{name}} </span> //单个元素
<div v-once> //有子元素
<p> title </p>
<span> {{name}} </span>
</div>
上面的例子中，即使msg发生改变，也不会重新渲染
v-text
v-text主要就是用来更新textContent，可以等同于js的text属性
<span v-text='name'></span>
<span> {{name}} </span>
//这两者是等价的
v-html
双大括号的方式会将数据解释为纯文本，而非html。为了输出真正的html，可以用v-html指令。 它等同于js的innerHTML属性
<div v-html='appHTML'></div>
这个div的内容将会替成属性值appHTML，直接作为HTML进行渲染。
v-colak
这个指令使用来保持在元素上直到关联实例结束时进行编译。
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
在页面记载时会闪烁(存在闪烁问题)，先显示{{message}}，然后才会编译hello word。
可以用v-cloak指令解决表达式闪烁问题，v-cloak在css中用属性选择器设置为display:none;
v-if
v-if可以实现条件渲染，vue会根据表达式的值的真假条件来渲染元素。
<span v-if='ok'>true</span>
//如果Ok的值为true就会进行渲染，否则，不会渲染这个元素.
v-else
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
<span v-if="ok">true</span>
<span v-else>false</span>
v-else-if
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
<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-show
<span v-show="ok">hello world</span>
也是用于根据条件展示元素。和v-if不同的是:如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
v-for
用v-for指令根据遍历数组来进行渲染
注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
v-bind
v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
v-model
这个指令用于在表单上创建双向数据绑定。
<input v-model="somebody">
<p>{{somebody}}</p>
<script>
var app = new Vue({
el: '#app',
data: {
somebody:'小明'
}
})
</script>
v-on
v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
