v-if的作用：会根据表达式的值动态渲染元素。元素及其包含的指令/组件在切换期间被销毁并重新构建。(这点是与v-show的不同点，v-show只是改变display的值，v-if则会进行动态的建立或者销毁)。
<div id="demo">
<div v-if="play">{{welcome}}</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
welcome:'欢迎光临'，
play: 'true'
});
</script>
当play设为false时则不显示
v-else的作用：对v-if的补充，必须紧跟着v-if之后，否则无法生效
<div id="demo">
<div v-if="play">{{welcome}}</div>
<div v-else>下次再来</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
welcome:'欢迎光临'，
play: 'true'
});
</script>
当play为false时 则显示：下次再来。
v-show的作用：根据表达式值的真假(这个值可以是data中的值，也可以是计算属性)，切换元素的 display CSS 属性。
<div id="demo">
<div v-show="play">{{welcome}}</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
welcome:'欢迎光临'，
play: 'true'
});
</script>
当play设为false时则不显示
v-text的作用：实现文本绑定。
<div id="demo">
<p v-text="txt"></p>
<p>{{txt}}</p>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
txt:'哈哈'
});
</script>
上面两种写法渲染后的结果一样，通常我们会使用第二种写法，比较简洁。
v-html的作用：用来直接输出HTML的内容。
<div id="demo">
<div v-html="html"></div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
html: '<p>Hello vue!</p>'
});
</script>
v-on的作用：是来监听DOM事件，并在触发时运行指定代码(使用方法是v-on:事件名=“事件”)，相关事件是放到methods下，@click是v-on:click的简写。
<div id="demo">
<button @click="btnclick">点我</button>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
methods: {
btnclick: function() {
alert("button被点击了");
}
}
});
</script>
v-bind的作用：用来绑定属性，动态地绑定一些 class 类名或 style 样式，格式是 v-bind：属性名 = "值"，简写 :属性名 = "值"。语法包括：变量语法，数组语法，对象语法等。
<div id="demo">
<div :class="wBox1">变量语法</div>
<div :class="{box:wBox}">对象语法</div>
<div :class="[wBox1, wBox2]">数组语法</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
wBox1: "box",
wBox2: "box2",
wBox: true
}
});
</script>
v-for的作用：根据一组数组的选项列表进行渲染，通常我们只会在需要展示列表的部分使用该指令。
<div id="demo">
<ul>
<li v-for='(item,$index) in games'>{{$index}}.游戏：{{item.name}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
games: [
{ name: "英雄联盟" },
{ name: "地下城" },
{ name: "穿越火线" },
{ name: "魔兽世界" }
]
}
});
</script>
v-once的作用：只渲染一次。
<div id="demo">
<button v-once>{{count}}</button>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el : '#demo',
data : {
count : 1
},
methods : {
add : function(){
this.count++;
}
}
});
</script>
无论你点击多少次按钮count还是1。
v-cloak的作用：渲染完成之后才显示，防止将{{message}}类似的输出到页面。
<div id="demo">
<div v-cloak>{{message}}</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
message:'欢迎光临'，
});
</script>
这样即使网速非常慢，也不会看见{{message}}。
