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}}。