vue基本知识 - 生命周期、通讯、$nextTick

Vue3文档
Vue2文档
演练场

v-show和v-if的区别

区别在于v-show是渲染出来了，只不过加上了 display: none，v-if是没有渲染出来
频繁切换用v-show

为何v-for中要用key

• v-if和v-for不能一起使用
• v-for比v-if的计算运算级要高一点

<div>
    <p>遍历数组</p>
    <ul>
      <li v-for="(item, index) in listArr" :key="item.id">
        {
  { index }} - {
  { item.id }}
      </li>
    </ul>
    <p>遍历对象</p>
    <ul>
      <li v-for="(item, key, index) in listObj" :key="key">
        {
  { index }} - {
  { key }}
      </li>
    </ul>
  </div>

事件修饰符

   <button @click="add">add</button>
    <!--  阻止单击事件继续传播  -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"