Was sind die integrierten Komponenten in vuejs

Zu den integrierten Komponenten in VueJS gehören: „“, „“, „“, „“, „< ;slot />", "".

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9.6-Version, DELL G3-Computer.

vue-Einbaukomponenten

Einbaukomponenten können ohne Registrierung direkt in Vorlagen verwendet werden.

, , können alle mit Tree-Shake verpackt werden. Sie werden also erst eingeführt, wenn sie verwendet werden. Sie können sie auch explizit importieren, wenn Sie direkt darauf zugreifen müssen.

// Vue 的 CDN 构建版本
const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue

rrree

sind komponentenähnliche Attribute in der Vorlagensyntax. Sie sind keine echten Komponenten und können nicht wie die oben genannten Komponenten importiert werden.

Im Folgenden erhalten Sie eine kurze Einführung in die in Vuejs integrierten Komponenten.

Codebeispiel

// Vue 的 ESM 构建版本
import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'

Beim Umschließen einer dynamischen Komponente werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören. Wie ist eine abstrakte Komponente: Es rendert kein DOM-Element selbst und erscheint auch nicht in der übergeordneten Komponentenkette. Zu den Attributen dieser Komponente gehören „include“, „exclude“ und „max“.

Beim Matching wird zunächst die eigene Namensoption der Komponente überprüft. Wenn die Namensoption nicht verfügbar ist, wird deren lokaler Registrierungsname (der Schlüsselwert der Komponentenoption der übergeordneten Komponente) abgeglichen. Anonyme Komponenten können nicht abgeglichen werden.

Diese Komponente wird normalerweise in Verbindung mit v-show, v-if, v-else-if, v-else, is und anderen Komponenten verwendet, die Bedingungen enthalten Codebeispiele

<template>
  <div class="hello">
      <!-- 构建动态组件 -->
      <div :is="currentComp"></div>
      <!-- 按钮点击切换组件 -->
      <button v-on:click="changeComponent">改变组件</button>
  </div>
</template>

<script>
//两个自定义的组件
import login from &#39;../components/login.vue&#39;
import index from &#39;../components/index.vue&#39;
export default {
  name: &#39;BuildInComponent&#39;,
  components:{
      index,
      login
  },
  // 默认显示index组件
  data(){
      return {
          currentComp:index
      }
  },
  methods:{
      changeComponent(){
          if(this.currentComp == login){
              this.currentComp = index
          }else {
              this.currentComp = login
          }

      }
  }
}
</script>

Fügen Sie den Übergangseffekt des umhüllten Elements hinzu, und das <Übergangselement dient als Übergangseffekt eines einzelnen Elements/einer einzelnen Komponente. wendet den Übergangseffekt nur auf den Inhalt an, den es umschließt, ohne zusätzliche DOM-Elemente zu rendern und nicht in der erkannten Komponentenhierarchie zu erscheinen. Wird normalerweise in Kombination mit v-show v-if is usw. verwendet.

Es gibt CSS-Übergang und JS-Übergang.

Allgemeine Attribute: Name: Zeichenfolge, wird zum automatischen Generieren von CSS-Übergangsklassennamen verwendet. CSS: Boolescher Typ, ob verwendet werden soll CSS-Übergangsklasse. Der Standardwert ist „true“. Wenn auf „false“ gesetzt, wird der registrierte JavaScript-Hook nur durch Komponentenereignisse ausgelöst Sie können den Klassennamen auch über Enter-Class-, Leave-Class- und andere Attribute anpassen, die normalerweise in Kombination mit Animationsbibliotheken von Drittanbietern verwendet werden;

CSS-Übergang

Der Klassenname des CSS-Übergangs hat den Namensattributwert des Übergangsattributs (markiert als v, wenn kein Namensattributwert vorhanden ist, ist der Standardwert v-), der sich aus den folgenden Kombinationen zusammensetzt:



v-enter: Definitionseintrag Der Startzustand des Übergangs. Es wird wirksam, bevor das Element eingefügt wird, und wird beim nächsten Frame nach dem Einfügen des Elements entfernt.

v-enter-active: Definieren Sie den Zustand, in dem der Eintrittsübergang wirksam wird. Gilt während des gesamten Übergangs, wird wirksam, bevor das Element eingefügt wird, und wird nach Abschluss des Übergangs/der Animation entfernt. Mit dieser Klasse können Prozesszeiten, Verzögerungen und Kurvenfunktionen für die Eingabe von Transitionen definiert werden.

• v-enter-to: Version 2.1.8 und höher Definiert den Endzustand des Eintrittsübergangs. Wird im nächsten Frame wirksam, nachdem das Element eingefügt wurde (gleichzeitig wird v-enter entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist.

  v-leave: Definiert den Startzustand des Urlaubsübergangs. Es wird sofort wirksam, wenn der Verlassensübergang ausgelöst wird, und wird im nächsten Frame entfernt.

  v-leave-active: Definiert den Zustand, in dem der Urlaubsübergang wirksam wird. Gilt während des gesamten Exit-Übergangs, wird sofort wirksam, wenn der Exit-Übergang ausgelöst wird, und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist. Mit dieser Klasse können Prozesszeiten, Verzögerungen und Kurvenfunktionen für Ausgangsübergänge definiert werden.
  1. v-leave-to: Version 2.1.8 und höher Definiert den Endzustand des Urlaubsübergangs. Wird im nächsten Frame wirksam, nachdem der Verlassen-Übergang ausgelöst wurde (gleichzeitig wird der V-Verlassen gelöscht) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist.
  4. Codebeispiel

  5. <template>
       <div class="hello">
           <!-- css过渡示例，transition组件 名称为slide-fade， -->
           <div id="example-1">
             <button @click="show = !show">
                 Toggle render
             </button>
             <transition name="slide-fade">
                 <p v-if="show">hello</p>
             </transition>
           </div>
             <!-- css动画示例 -->
           <div id="example-2">
             <button @click="show = !show">Toggle show</button>
             <transition name="bounce">
                 <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
             </transition>
           </div>
     
       </div>
     </template>
     
     <script>
     export default {
       name: &#39;BuildInComponent&#39;,
       data(){
           return {
               show: true
           }
       },
     }
     </script>
     
     <!-- Add "scoped" attribute to limit CSS to this component only -->
     <style scoped>
     /* 可以设置不同的进入和离开动画 */
     /* 设置持续时间和动画函数 */
     .slide-fade-enter-active {
       transition: all .3s ease;
     }
     .slide-fade-leave-active {
       transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
     }
     .slide-fade-enter, .slide-fade-leave-to
     /* .slide-fade-leave-active for below version 2.1.8 */ {
       transform: translateX(10px);
       opacity: 0;
     }
     
     /* 也可以使用css动画 */
     .bounce-enter-active {
       animation: bounce-in .5s;
     }
     .bounce-leave-active {
       animation: bounce-in .5s reverse;
     }
     @keyframes bounce-in {
       0% {
         transform: scale(0);
       }
       50% {
         transform: scale(1.5);
       }
       100% {
         transform: scale(1);
       }
     }
     </style>

     • js过渡

     也可以在属性中声明 JavaScript 钩子函数，在钩子函数中，使用js进行动画的操作；
     当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成
     对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

     // 使用js过渡，通常在组件中监听事件，并写好监听到的回调函数即可<transition
       v-on:before-enter="beforeEnter"
       v-on:enter="enter"
       v-on:after-enter="afterEnter"
       v-on:enter-cancelled="enterCancelled"
     
       v-on:before-leave="beforeLeave"
       v-on:leave="leave"
       v-on:after-leave="afterLeave"
       v-on:leave-cancelled="leaveCancelled">
       <!-- ... --></transition>

     Props：

     • tag - string - 如果未定义，则不渲染动画元素。

     • move-class - 覆盖移动过渡期间应用的 CSS 类。

     • 除了 mode - 其他 attribute 和 相同。

     事件：

     • 事件和 相同。

     用法：

     提供了多个元素/组件的过渡效果。默认情况下，它不会渲染一个 DOM 元素包裹器，但是可以通过 tag attribute 来定义。

     注意，每个 的子节点必须有独立的 key，动画才能正常工作。

     支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。如果 CSS transform property 是“可过渡” property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。

     <transition-group tag="ul" name="slide">
       <li v-for="item in items" :key="item.id">
         {{ item.text }}
       </li>
     </transition-group>

     vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件

     Props：

     • name - string，用于具名插槽

     用法：

     • 元素作为组件模板之中的内容分发插槽。 元素自身将被替换。

     Props：

     • to - string。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 内容的目标元素

     <!-- 正确 -->
     <teleport to="#some-id" />
     <teleport to=".some-class" />
     <teleport to="[data-teleport]" />
     
     <!-- 错误 -->
     <teleport to="h1" />
     <teleport to="some-string" />

     disabled - boolean。此可选属性可用于禁用 的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了 的位置渲染。

     <teleport to="#popup" :disabled="displayVideoInline">
       <video src="./my-movie.mp4">
     </teleport>

     请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。

     相关推荐：《vue.js教程》

     Das obige ist der detaillierte Inhalt vonWas sind die integrierten Komponenten in vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!