3、指令（v-if与v-for的区别、各种指令的使用）

1、指令（带有v-前缀的特殊属性）

指令
v-bind	绑定属性（简写:）
v-on	绑定事件（简写@）
v-if	控制元素显示/隐藏（没有元素，不渲染dom）
v-show	控制元素显示/隐藏（有元素，渲染dom，display:none）
v-for	显示列表、表格

2、v-if与v-show的区别

实现本质方法区别
v-if	动态的向DOM树内添加或者删除DOM元素
v-show	标签display设置为none，控制隐藏

编译的区别
v-if	切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
v-show	控制css

编译条件的区别
v-if	初始值为false，就不会编译
v-show	都会编译，初始值为false，只是将display设为none，但它也会编译

性能的区别
v-if	不停的销毁和创建（只适合一次性使用）
v-show	只编译一次，后面其实就是控制css，故v-show性能更好一点

3、源代码

<template>
  <div id="app">
    <!-- 1、绑定文本 -->
    <div class="case case1">
      <p>1、{{}}:绑定文本</p>
      <h1>{{ message }}</h1>
    </div>

    <!-- 2、绑定事件 -->
    <div class="case case2">
      <p>2、@click:绑定事件</p>
      <button @click="sayHi">按钮</button>
    </div>

    <!-- 4、v-if:控制元素显示/隐藏（没有元素，不渲染dom） -->
    <div class="case case4">
      <p>4、v-if:控制元素显示/隐藏</p>
      <h1 v-if="true">{{ message }}</h1>
      <h1 v-if="false">{{ message }}</h1>
    </div>

    <!-- 5、v-show:控制元素显示/隐藏（有元素，渲染dom，display:none） -->
    <div class="case case5">
      <p>5、v-show:控制元素显示/隐藏</p>
      <h1 v-show="true">{{ message }}</h1>
      <h1 v-show="false">{{ message }}</h1>
    </div>

    <!-- 6、v-for:显示列表 -->
    <div class="case case6">
      <p>6、v-for:显示列表</p>
      <ul>
        <li v-for="(number, index) of numList" :key="index">
          <p>{{ number }}</p>
        </li>
      </ul>
    </div>

    <!-- 7、v-for：显示表格 -->
    <div class="case case7">
      <p>7、v-for：显示表格</p>
      <table border="1px">
        <thead>
          <th>序号</th>
          <th>用户名</th>
          <th>年龄</th>
        </thead>
        <tbody>
          <tr v-for="(value, index) of userList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ value.name }}</td>
            <td>{{ value.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
// 暴露接口，可以被其他模块调用;
export default {
  // 1、数据要用函数返回
  data() {
    return {
      message: "Hello world!",
      numList: [1, 2, 3],
      userList: [
        { name: "jasmine", age: 14 },
        { name: "qiqi", age: 13 },
        { name: "jasmine_qiqi", age: 32 },
      ],
    };
  },
  // 2、函数在方法中定义
  methods: {
    sayHi() {
      alert("Hello world!");
    },
  },
};
</script>

<style>
#app {
  /* 二维布局 */
  display: grid;
  /* 列 */
  grid-template-columns: 25% 25% 25% 25%;
  /* 行 */
  grid-template-rows: 50% 50%;
}
img {
  width: 200px;
  height: 100px;
}
</style>