1,v-cloak

这个指令的作用是，在页面渲染完成之前设置页面的样式。目的就是防止出现下面的情况，页面的{{str}}在渲染完成前会原样显示，这样渲染完成后就会跳转成正常值，对于用户来说体验很差。

一般用法

便签内添加：

<div id="app" v-cloak>
      <p>{{str}}</p>
    </div>

同时需要设置CSS属性

[v-cloak] {
        display: none;
      }

2,v-if和v-show的区别和联系

基础用法

v-show

格式是v-show="条件"，逻辑也很简单，符合条件的标签就会显示出来！

<script>
      window.onload = function () {
        let sample = new Vue({
          el: "#app",
          data: {
            str: "文字",
            grade: 59,
          },
        });
      };
    </script>
  </head>
  <body>
    <div id="app" v-cloak>
      <h3>成绩情况：</h3>
      <p v-show="grade>=60">恭喜！你及格了！</p>
      <p v-show="grade<60">恭喜！你没及格！</p>
    </div>
  </body>

v-if

格式也是v-if="条件",满足条件就会渲染

一般和v-else配套使用

 <script>
      window.onload = function () {
        let sample = new Vue({
          el: "#app",
          data: {
            str: "liuqi", //模拟已登录用户
            str1: "", //模拟未登录用户
          },
        });
      };
    </script>
  </head>
  <body>
    <div id="app">
      <a href="#" v-if="str==''">请登录</a>
      <a href="#" v-else>{{str}}先生您好，</a>
      <a href="#" v-if="str==''">免费注册</a>
      <a href="#" v-else>欢迎━(*｀∀´*)ノ亻!</a>
    </div>
  </body>

注意最好是一个if对应一个else的写法，如果连续写两个if再接两个else是会出错的。同时，如果if和else较多，可以采用下面的写法。

<template v-if="lgc==''">
    <a href="">亲,请登录</a>
    <a href="">免费注册</a>
</template>
<template v-else>
    <a href="">欢迎您,{{lgc}}</a>
    <a href="">退出</a>
</template>

两者的区别和联系

我们观察到，v-show的全部页面内容都被渲染了，只是后续把不符合条件内容利用CSS隐藏了起来；而v-if/else则并未渲染全部内容，只会将符合条件的内容渲染出来。

所以不难得出结论：首次渲染较快的是v-if/else；但是后续切换的话，v-show会更快。

3，v-bind

我的理解

平时我们给标签添加属性，都是固定的值。而利用v-bind指令可以将对应的属性和某个变量关联起来，后续修改起来会很方便。

比如实例中有个cls:'red'的属性，我们按照下面写法，就可以将red这个类和标签的class绑定，后续修改变量cls就可以马上改变标签样式。

<p v-bind:class="cls">{{str}}</p>

另外，v-bind写法还有很多，可以同时设置多个不同的属性，也可以直接安置数组，下面供参考，你也可以直接查看官方文档。

<div id="box">
      <p v-bind:class="cls" style="font-size: 100px">{{str}}</p>
      <p v-bind="attr">{{str}}</p>
      <p v-bind:class="clsList">{{str}}</p>
      <p v-bind:class='["pink", "fontsize", isActive ? "active" : ""]'>
        {{str}}
      </p>
      <p v-bind:class="{pink:true,fontsize:true}">{{str}}</p>
    </div>

结合我们学到的v-bond,可以整个活玩玩！

let myColor = [
          "red",
          "blue",
          "green",
          "pink",
          "salmon",
          "yellow",
          "grey",
        ];

        let shili = new Vue({
          el: "#box",
          data: {
            str: "掘金掘金掘金",
            cls: "blue",
            isActive: true,
            clsList: ["pink", "fontsize"],
            attr: {
              class: "red",
              id: "fontsize",
            },
          },
        });
        let count = 0;
        setInterval(() => {
          if (count > myColor.length - 1) count = 0;
          shili.cls = myColor[count++];
        }, 500);
      };

具体能得到这样的闪烁效果，相当酷炫！

最后，v-bind:是可以简写成:的，正如v-on可以简写成@

4，v-on

下面我用4个按钮来演示v-on绑定点击时间的写法

4个按钮分别代表了4种不同写法，

<div id="app">
      <p>前端工程师的薪水：{{count}}K</p>
      <input type="button" value="直接写" v-on:click="count++" />
      <input type="button" value="写函数名" @click="addCount" />
      <input type="button" value="传参" v-on:click="addCount2(99,$event)" />
      <input
        type="button"
        value="高级传参"
        v-on:click="(e)=>addCount2(199,e)"
      />
    </div>

注意：写法3想要看事件对象的话，必须要使用$event

第2,3,4的函数都写在了vue实例的methods里面，如下图

修饰符

另外，我们还可以在click的后面写.修饰符，可以对事件的触发起到一个小小的修饰作用。比如@click.stop就可以阻止冒泡；@click.self可以限定事件只自己触发；@click.capture限定事件以捕获的形式触发（说人话就是和冒泡相反，从外向内触发）

系统修饰符

其实也是写在click(或者其他事件)后面，要求必须按住对应的按键，才能触发。例如@click.ctrl.alt.shift.meta，这个就必须同时按住4个键再点击才能触发事件，注意这里的meta一般就是指windows键

5，最后的最后v-for

学会用v-for来遍历数组，对象或者数字，比之前的方法要简洁一些

<li v-for="(item,index) in list" :data-index="index">{{item}}</li>

<tr v-for="item of grade">
                <td>{{item.name}}</td>
                <td>{{item.class}}</td>
                <td>{{item.chinese}}</td>
                <td>{{item.math}}</td>
                <td>{{item.english}}</td>
                <td>{{item.chinese + item.math + item.english}}</td>
            </tr>

<li v-for="(n,i) in 100">{{i}}---{{n}}</li>

注意最后一种遍历，n是1-100的数字，而i则是对应的下标也就是（0~99）

所以实际打印的东西就是

0---1

1---2

···

99---100

多种vue指令的详细解释和演练，v-cloak&v-if&v-show&v-on&v-for