Apprentissage de Vue --- basé sur les instructions de vue, les slots et les composants intégrés dans vue2

Apprentissage de Vue - basé sur les instructions de vue, les slots, les composants intégrés dans vue2

1. Instructions de vue

1.1 v-pro

Laissez le contenu de l'étiquette être affiché tel quel, au lieu de compiler et d'afficher

<h1 v-pre>{
   
   {msg}}</h1>
    <h1 v-pre>{
   
   {1+1}}</h1>

1,2 v-une fois

Fonction : Laisser l'élément/composant être rendu une seule fois, afin d'éviter les mises à jour invalides

L'élément n'est affiché qu'une seule fois. Lorsque la page est en cours d'exécution, le msg sera affiché sur la page. Une fois cliqué, le msg changera mais ne sera plus affiché sur la page

<h1 v-once @click="msg=888">{
   
   {msg}}</h1>

 data(){
    return {
      msg:'Vuejs项目'
    }
  }

1.3 v-manteau

Empêcher les éléments d'afficher des accolades doubles avant la fin du rendu

Résoudre le problème du rendu du résultat après le rendu sur la page, les doubles accolades n'apparaîtront pas

 <h1 v-cloak>{
   
   {msg}}</h1>
 
 data(){
    return {
      msg:'Vuejs项目'
    }
  }

2. Fente

Les emplacements peuvent être utilisés dans les composants de table et les composants de carrousel

2.1 Emplacement par défaut

Lorsqu'il s'agit de l'emplacement par défaut, vous pouvez directement écrire du contenu dans le composant parent et utiliser <slot/>un espace réservé dans le composant enfant pour que le contenu écrit dans le composant parent <slot/>s'affiche à la position du composant enfant.

Dans le composant parent :

<Dialog ref="dialog">
      <!-- 当是默认插槽时可以直接在父组件中写内容 -->
      <!-- vip还有3天过期 -->
      <!-- <input type="text"> -->
    </Dialog>

Dans le sous-composant :

<!-- 默认插槽 default可以省略不写-->
            <!-- <slot name="default"/> -->

2.2 Emplacements nommés

Lorsqu'il s'agit d'un emplacement nommé, utilisez le modèle de modèle pour envelopper le contenu à rendre et écrivez le nom correspondant à l'emplacement du sous-composant dans la balise de modèle

v-slot : le nom peut être abrégé #nom

Utilisez l'emplacement pour déterminer dynamiquement quel est le contenu interne du composant, occuper une position à l'intérieur du composant et déterminer à travers le contenu, différents emplacements ont des noms différents

Dans le composant parent :

<template v-slot:title>
        警告
      </template>

Dans le sous-composant :

 <!-- 具名插槽 -->
            <slot name="title" :msg="msg"></slot>

2.3 Emplacements délimités

Les emplacements de portée peuvent étendre l'utilisation des données dans les sous-composants, et les données reçues ne peuvent être utilisées que dans les modèles de sous-composant et ne peuvent pas être utilisées ailleurs

#Name = "scope" Afin de recevoir les données dans le sous-composant, placez le contenu dans le slot du sous-composant

Dans le composant parent :

<template #title="scope">
        <h3>{
   
   {scope.msg}}</h3>
        警告
      </template>

Dans le sous-composant :

<slot name="title" :msg="msg"></slot>

data(){
    return {
        visible:false,
        // 作用域仅限于当前子组件内容
        msg:'我是dialog组件',
    }
},

3. Composants intégrés

3.1 Composants dynamiques

composant : selon le changement de l'indice, basculez dynamiquement le composant (déchargez le composant précédent et chargez le composant suivant)

La fonctionnalité est la suivante : la valeur de l'attribut is peut être un composant spécifique ou le nom du composant

3.2 Composants d'animation

transition : l'attribut name peut spécifier le préfixe du nom de l'animation, et le mode définit l'ordre de l'animation d'entrée et de l'animation de sortie, out-in est d'abord sorti puis entré, et in-out est d'abord entré puis sorti

3.3 Composants du cache

keep-alive : les composants internes seront mis en cache lors de la commutation. Les composants qui n'ont pas besoin d'être affichés lors de la commutation seront mis en cache dans la mémoire de l'ordinateur au lieu d'être détruits. Lorsque le composant est réaffiché, il ne sera affiché qu'à partir du cache et ne sera pas Le composant est instancié et monté lorsqu'il est affiché pour la première fois

L'attribut max dans keep-alive, une fois qu'il y a trop de composants en cache occupera trop de mémoire de l'ordinateur, vous pouvez utiliser max pour définir le nombre maximum de composants qui peuvent être mis en cache

Le composant de cache keep-alive doit être à côté du composant dynamique, sinon il n'a aucun effet

Attributs dans keep-alive :

attribut max : si max peut contenir jusqu'à dix composants, lorsque le onzième composant est atteint, le premier composant de la file d'attente sera détruit et le onzième sera mis en place, en gardant dix en mémoire peut être contrôlé La taille du mémoire pour alléger l'utilisation de la mémoire

include="nom du composant" Spécifiez manuellement le composant interne lors du changement, seul le composant contenant ce nom sera mis en cache et les autres composants seront détruits. Tous les composants n'ont pas besoin d'être mis en cache, et il n'est pas nécessaire d'en mettre un en cache. Plusieurs composants peuvent être mis en cache. Séparez plusieurs composants par des virgules

exclude="nom du composant" Le composant spécifié ne sera pas mis en cache. S'il y a plusieurs composants et que seuls quelques composants n'ont pas besoin d'être mis en cache, vous pouvez utiliser l'attribut exclude

Les composants de cache peuvent être utilisés pour les composants nécessitant des commutations fréquentes Inconvénients : il existe un risque de fuites de mémoire

exemple de code

composant parent :

<template>
   <div id="app">
    <!-- 动态组件 component,根据下标的变化，动态的切换组件（卸载上一个组件，搭载下一个组件） -->
    <!-- 动态组件 component,特点是：is属性的值可以是具体的组件，也可以是组件的名字 -->
    <!-- 动画组件 transition，其中name属性可以规定动画名称的前缀，mode设置入场动画，立场动画的顺序，out-in 先出后入，in-out 先入后出 -->
    <!-- 缓存组件 keep-alive，内部组件在切换时会缓存起来，组件在切换时不需要显示的组件会缓存在计算机内存中而不是销毁当组件重新显示时只是从缓存中取出显示即可不会重新实例化 -->
    <!-- keep-alive 内的max属性，一旦缓存的组件过多会占用过多的计算机内存，可以用max来设置，最多可以缓存多少个组件 -->
    <!-- keep-alive 缓存组件需要紧挨着动态组件的位置否则没有效果 -->
    <transition name="fade" mode="out-in">
      <!-- 如果max最多可以容纳十个组件，当第十一个组件的时候会将队列中最先放进去的组件销毁掉，将第十一个放进去，一直保持内存中放十个 可以控制内存的大小，缓解内存占用情况-->
      <!-- include="组件名" 手动指定内部组件在切换时只有包含该名字的组件才会被缓存其他组件会被销毁，并不是每个组件都需要缓存，同时也不一定缓存一个可以缓存多个组件，多个组件之间用逗号隔开-->
      <!-- exclude="组件名" 用于指定的组件不会被缓存，有多个组件只有几个组件不需要缓存时可以用exclude属性 -->
      <keep-alive :max="10" include="Home">
        <component :is="coms[currentIndex]"/>
      </keep-alive>
    </transition>

    <div class="tabbar">
      <span :class="{active:currentIndex == index}" v-for="(item,index) in btns" :key="index"
      @click="currentIndex=index">{
   
   {item}}</span>
    </div>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Mine from './components/Mine.vue'
import Order from './components/Order.vue'
export default {
  data(){
    return {
      currentIndex:0,
      btns:['首页','订单','我的'],
      // coms:[Home,Order,Mine]
      // 字符串的写法
      coms:['Home','Order','Mine']
    }
  },
  components:{
    Home,
    Mine,
    Order,
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.tabbar {
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  border-top:1px solid #ccc
}

.tabbar .active{
  color: lightblue;
}

// 入场动画
.fade-enter {//动画开始时的状态
  // opacity: 0;
  transform: scale(1) rotate(0deg);

}

.fade-enter-active {
  transition: all 0.2s;
}

.fade-enter-to {//动画结束时的状态
  // opacity: 1;
  transform: scale(1) rotate(360deg);

}

// 离场动画
.fade-leave {
  // opacity: 1;
  transform: scale(1) rotate(360deg);
}

.fade-leave-active {
  transition: all 0.2s;
}

.fade-leave-to {
  // opacity: 0;
  transform: scale(1) rotate(0deg);

}
</style>

Sous-composant Accueil

<template>
    <div class="Home">
        Home组件
    </div>
  </template>
  
  <script>
  export default {
  created(){
    console.log('Home组件 已实例化');
  },
  mounted(){
    console.log('Home组件 已挂载');
  },
  destroyed(){
    console.log('Home组件 已销毁');
  },
// 在激活的时候重新执行某些d代码比如重新发送请求以得到最新的数据
  activated(){
    console.log('Home组件 激活了');
  },
  deactivated(){
    console.log('Home组件 缓存了');
  }
  }
  </script>
  
  <style>
  .Home{
      background-color: lightsalmon;
      height: 300px;
      line-height: 300px;
      text-align: center;
  }
  
  </style>

Sous-composante mine

<template>
    <div class="Mine">
        Mine组件
    </div>
  </template>
  
  <script>
  export default {
    created(){
    console.log('Mine组件 已实例化');
  },
  mounted(){
    console.log('Mine组件 已挂载');
  },
  destroyed(){
    console.log('Mine组件 已销毁');
  },
  activated(){
    console.log('Mine组件 激活了');
  },
  deactivated(){
    console.log('Mine组件 缓存了');
  }
  }
  </script>
  
  <style>
  .Mine{
      background-color: lightgreen;
      height: 300px;
      line-height: 300px;
      text-align: center;
  }
  
  </style>

Commander le sous-composant

<template>
  <div class="Order">
    Order组件
  </div>
</template>

<script>
export default {
  created(){
    console.log('Order组件 已实例化');
  },
  mounted(){
    console.log('Order组件 已挂载');
  },
  destroyed(){
    console.log('Order组件 已销毁');
  },
  activated(){
    console.log('Order组件 激活了');
  },
  deactivated(){
    console.log('Order组件 缓存了');
  }
}
</script>

<style>
.Order{
    background-color: lightskyblue;
    height: 300px;
    line-height: 300px;
    text-align: center;
}

</style>

3.4 Fonctions de cycle de vie étendu

activé et désactivé sont tous deux des hooks de cycle de vie liés au cache

1. activé : le composant est activé (ré-exécutez du code lorsqu'il est activé, par exemple en renvoyant la requête aux dernières données)
2. désactivé : le composant est mis en cache
3. errorCaptured : fonction de capture d'erreur