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

原创

已于 2024-03-21 15:35:32 修改 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-03 21:09:09 首次发布

本文详细介绍了Vue的基本概念，包括v-show与v-if的区别、v-for的key使用、事件修饰符和组件生命周期。重点讲解了组件间的通信，如prop和$emit、自定义事件以及Vue的高级特性，如自定义v-model、$nextTick、slot插槽、动态和异步组件、keep-alive、mixin以及v-model的实现原理。同时，文章还涉及Vuex的使用和Vue-router的基本操作。

文章目录

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"></form>
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form