vue+mixin speichert Code

Dieses Mal bringe ich Ihnen Vue + Mixin, um die Menge an Code zu sparen. Was sind die Vorsichtsmaßnahmen für Vue + Mixin, um die Menge an Code zu sparen?

Mixin-Konzept: Wiederverwendbare Logik auf Komponentenebene, einschließlich Datenvariablen/Lebenszyklus-Hooks/öffentlichen Methoden, sodass sie direkt in gemischten Komponenten verwendet werden kann, ohne wiederholt redundante Logik zu schreiben (ähnlich der Vererbung)

Verwendung:

Erstellen Sie einen Mixin-Ordner unter einem bestimmten öffentlichen Ordner pub und erstellen Sie mixinTest.js darunter

const mixinTest = {
  created() {
    console.log(`components ${this.name} created`)
  },
  methods: {
    hello() {
      console.log('mixin method hello')
    }
  }
}
export default mixinTest

Referenz gerade in der öffentlichen Mixin-Datei der Komponente und verwenden Sie

import mixinTest from '../pub/mixin/mixinTest.js'
export default {
  data() {
    return {
      name: 'hello'
    }
  },
  mixins: [mixinTest],
  methods: {
    useMixin() {
      this.hello()
    }
  }
}

ps: Wenn Sie die Methode Vue.mixin() verwenden, wirkt sich dies auf alle später erstellten Vue-Beispiele aus. Verwenden Sie diese mit Vorsicht!

Achten Sie auf mehrere Funktionen von Mixin:

1. Die eingemischten Datenvariablen sind flache Zusammenführungen. Bei Konflikten haben die Daten in der Komponente Vorrang (benutzerdefinierte Variablen). im Objekt)

2. Die Logik in der gemischten Lebenszyklusfunktion wird mit der in der Komponente definierten Lebenszyklusfunktionslogik zusammengeführt und zuerst ausgeführt (erstellt/montiert/zerstört)

3. Der gemischte Wert ist eine Objektoption, die in ein Objekt eingemischt wird. Nach einem Konflikt hat der Schlüsselname innerhalb der Komponente Vorrang (Daten/Methode/Komponenten/Anweisungen)

Slot-Inhaltsverteilung

Einführung in das Slot-Konzept: Der Unterschied zwischen Vue und React beim Schreiben liegt in der Organisation interner Elemente von Komponenten und Sub -Komponenten. Es gibt kein untergeordnetes Element in der Komponente, auf das wir zugreifen und das wir anzeigen können (wobei die Renderfunktion vorerst außer Acht gelassen wird), die API ist stattdessen Slot

Verwendungsszenariodefinition:

1. In der benutzerdefinierten Unterkomponente oder anderen benutzerdefinierten Etikettenkomponenten gibt es verschachteltes HTML.

2. Diese benutzerdefinierte Unterkomponente ist in der übergeordneten Komponente geschrieben, und auch verschachtelte Dinge sind es in der übergeordneten Komponente platziert

3. Durch die Verwendung des -Tags in der Vorlage der untergeordneten Komponente wird der Effekt des Renderns der in der übergeordneten Komponente geschriebenen verschachtelten Tags erzielt wird erreicht

4. Es geht darum, den Inhalt der übergeordneten Komponente in die untergeordnete Komponente einzufügen und ihn an der Position der untergeordneten Komponente einzufügen

<template>
  <p id="app"> 
    <self-component> <!--self-component表示自定义的组件-->
      <span>12345</span> <!--父组件里的嵌套标签--> 
    </self-component> 
  </p> 
</template>
<script>
export default {
  components: [selfComponent]
}
</script>
<!--self-component的组件模板-->
<template>
  <p>
    <button><slot></slot></button>
  </p>
</template>
<script>
export default {
  // 只有子组件的模板里面有slot标签，才能取到写在自定义组件里面的标签的渲染引用
}
</script>

Zwei erweiterte Punkte der Slot-Funktion:

Zusammenstellungsumfang des in den Slot eingefügten Inhalts: Der Umfang des verteilten Inhalts richtet sich nach der Vorlage, in der er sich befindet

1. Der Ort, an dem der spezifische Inhalt geschrieben wird, bestimmt den Umfang der Kompilierung (in den meisten Fällen liegt er im Bereich der übergeordneten Komponente)

2. 2.1.0+ fügt einen neuen Bereichsslot hinzu, sodass die Eigenschaften der untergeordneten Komponente der übergeordneten Komponente zugänglich gemacht und in die untergeordnete Komponente geschrieben werden können. Der Inhalt innerhalb der Komponente kann mithilfe des Slot-Tags in der Unterkomponente

3. und fügen Sie dann das Slot-Scope-Attribut

   <!-- 父组件模板 -->
   <child :items="items">
    <!-- 作用域插槽也可以是具名的 -->
    <li slot="item" slot-scope="props" class="my-fancy-item">{{ props.text }}</li>
   </child>
   <!-- 子组件模板 -->
   <ul>
    <slot name="item" v-for="item in items" :text="item.text">
     <!-- 这里写当父组件引用子组件但没写内部内容时展示的东东 -->
    </slot>
   </ul>

Das Namensattribut des Slots Gibt den Ort an, an dem das Etikett eingefügt wird. Dies ist der benannte Steckplatz im Dokument (dieses offizielle Dokument erklärt dies klar)

in der Unterkomponente Der in der Vorlage geschriebene Steckplatz verfügt über ein Namensattribut ()
Schreiben Sie den Slot in der untergeordneten Komponente im Inhalt der übergeordneten Komponente und geben Sie das Slot-Attribut an (123
)
Der Inhalt der übergeordneten Komponente wird an der richtigen Position entsprechend Slot==Name

3. platziert

Wenn das Slot-Attribut nicht angegeben ist, wird es standardmäßig im anonymen Slot platziert

Dynamische Komponente

Diese Funktion dynamischer Komponenten wurde von vielen Leuten in vielen Vue-Projekten geschrieben, aber sie haben sie noch nie verwendet. Es ist notwendig, noch ein paar Worte zu sagen

Anwendbarkeit dynamischer Komponenten:

Einzelseitige Anwendung, das Umschalten einiger Komponenten erfordert kein Routing, aber die Komponenten in einem Bereich der Seite müssen geändert werden
Die Definitionen von Die geänderten Komponentenparameter sind konsistent, z. B. Beide sind Dialogfelder. Sie müssen ein Objekt übergeben, aber die Datenstruktur im Objekt ist unterschiedlich
Durch die Verwendung des is-Attributs von Komponente können Sie redundanten Komponentencode in der Vorlage vermeiden und mehrere vermeiden. Der v-if-Vorlagencode ist sauberer
Verwendete Methode (Referenz aus dem Dokument):

<keep-alive>
  <component v-bind:is="currentView">
  <!-- 组件在 vm.currentview (对应组件名称)变化时改变！ -->
  <!-- 非活动组件将被缓存！可以保留它的状态或避免重新渲染 -->
  </component>
</keep-alive>

Hinweis:

Dynamisch geschaltete Komponenten müssen in die übergeordnete Komponente importiert werden. Das Rendering ist dynamisch, die Einführung jedoch nicht.

2. 包裹动态组件时，会缓存不活动的组件实例，提高性能，避免重复渲染(keep-alive不会渲染额外DOM结构)

3. 有include和exclude这两个属性，用于指定缓存和不缓存的组件(传入字符串/数组/正则)

4. 另一种避免重新渲染的方法是为标签增加属性v-once，用于缓存大量的静态内容，避免重复渲染。

ps:不会在函数式组件中正常工作，因为它们没有缓存实例。

动画与过渡

其实很多前端工程师第一次用Vue的动画和过渡都是通过库组件来做到的，所以对这块没怎么深挖，各种过渡特效和按钮动画就跑起来了，现在就看下文档，补补课

前端实现动画的基本方法分为三种种：css3的过渡和keyframe/javascript操纵dom/使用webgl或者canvas来独立实现，其中第三种是作为展示动画，与交互结合较少，而Vue作为一个框架，其支持动画基是从前两种入手的，从官方文档提到的四种支持就可以看出这一点。不过官方文档是从DOM过渡和状态过渡两个方面来讲解，前者是DOM的消失和出现的动画等属性的变化，后者是页面上某些值的变化。

DOM属性的改变

若是单个元素/组件的显隐，在组件外面包裹一层，而后选择是css过渡还是javascript过渡

CSS过渡：

1. vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)

2. 如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)

3. 常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在transiton标签上加上appear，另有三个属性可指定(appear-?[to|active]?-class)

<!-- 每种CSS动画库对应的class命名规则可能不同，所以根据不同库要自己写，以animate.css为例 -->
<transition
  name="custom-classes-transition"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight"
  :duration="{ enter: 500, leave: 800 }"
>...</transition>
<!-- duration属性可以传一个对象，定制进入和移出的持续时间-->

JS过渡：

1. 因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式

2. 通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)

3. 监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数

4. 元素首次渲染的动画，可以指定的监听事件有4个([before|after]?-?appear和appear-cancelled)

<template>
  <transition v-bind:css="false"
  v-on:before-enter="beforeEnter" v-on:enter="enter"
  v-on:leave="leave" v-on:leave-cancelled="leaveCancelled">
    <!-- 对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测 -->
  </transition>
</template>
<script>
methods: { // 以Velocity库为例
  beforeEnter: function (el) {/*...*/},
 // 此回调函数是可选项的设置
 enter: function (el, done) {
  // Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
  done() //回调函数 done 是必须的。否则，它们会被同步调用。
 },
 leave: function (el, done) {
  // Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
  done()
 },
 leaveCancelled: function (el) {/*...*/}
}
</script>

多元素过渡其实就是一句话：照常使用v-if/v-else的同时对同一种标签加上key来标识

Vue对于这种多元素动画有队列上的处理，这就是transiton这个标签上的mode属性，通过指定(in-out|out-in)模式，实现消失和出现动画的队列效果，让动画更加自然。

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

多组件过渡也是一句话：用上一节提到的动态组件，即可完成。

针对列表过渡，其本质仍是多个元素的同时过渡，不过列表大部分是通过数组动态渲染的，因此有独特的地方，不过整体的动画思路不变。具体有以下几点

1. 使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。

2. 列表的每个元素需要提供key属性

3. 使用CSS过渡的话，要考虑到列表内容变化过程中，存在相关元素的定位改变，如果要让定位是平滑过渡的动画，要另外一个v-move属性。 这个属性是通过设置一个css类的样式，来将创建元素在定位变化时的过渡，Vue内部是通过FLIP实现了一个动画队列，只要注意一点就是过渡元素不能设置为display:inline,这里需要文档上的代码做一个简短的demo：(其实通过在li上设置过渡transition属性也可以实现v-move的效果)

<template>
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">{{ item }}</li>
  </transition-group>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9]
    }
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
}
</script>
<style lang="css">
.flip-list-move {
 transition: transform 1s;
}
</style>

数值和属性动态变化

Die Animation in diesem Teil dient hauptsächlich den Spezialeffekten des Datenelements selbst, wie z. B. dem Erhöhen und Verringern von Zahlen, der Steuerung des Farbübergangsprozesses, der Implementierung von SVG-Animationen usw. Das Wesentliche ist die Änderung von Zahlen/Text. Meine eigene Zusammenfassung lautet: Durch die Verwendung des reaktionsfähigen Systems von Vue können die Änderungen der Zahlen durch die Änderungen der entsprechenden Werte im DOM über externe Bibliotheken umgesetzt werden. Beispielsweise ist 1->100 ein kontinuierlicher Prozess zunehmende Zahlen, Schwarz-> Das offizielle Dokument verwendet zur Veranschaulichung hauptsächlich mehrere Beispielcodes. Die wesentlichen Schritte lauten wie folgt:

1. Ändern Sie eine bestimmte Variable a durch die bidirektionale Bindung der Eingabe auf der Seite auch eine Verarbeitung auf dem Dom Die Variable b des Übergangseffekts

2. wird vom Beobachter gebunden (ein bestimmtes Attribut im Überwachungsobjekt ist diese Variable a) und löst die Logik

   aus

3. Die Logik im Watcher besteht darin, den Anfangswert b und den Endwert a über die externe Übergangsbibliothek anzugeben und schließlich den Wert von b in a zu ändern

4. Die an das DOM gebundene Variable ist b. Wenn einige komplexe Situationen auf den berechneten Eigenschaften von b basieren können, um den Änderungsprozess von b zu zeigen

Die obige Idee kann verwendet werden, um einen Animationseffekt auf Einheitenebene abzuschließen. Dies ist tatsächlich eine sehr häufige Anforderung. Daher ist es erforderlich, diesen Prozess in einer Komponente zu kapseln und nur den zu übertragenden Wert als Eingang verfügbar zu machen Wird der Wert geändert, handelt es sich um einen Animationsübergangseffekt. Bei der Komponentenkapselung muss der im montierten Lebenszyklus angegebene Anfangswert basierend auf den oben genannten vier Schritten hinzugefügt werden. Gleichzeitig werden die beiden ursprünglichen Werte a/b als ein Wert in der Komponente verwendet und können unterschieden werden durch newValue und oldValue im Watch-Objekt. Was das endgültige SVG betrifft, so ist es im Wesentlichen ein digitaler Übergang, der jedoch mehr Zustandsvariablen und längeren Code beinhaltet. Es besteht jedoch immer noch keine große Nachfrage nach reinen Frontend-Seiten, aber als Hobby kann man etwas Spaß daran haben Demo, aber es erfordert unbedingt die Beteiligung des Designers, sonst wird es schwierig, die Parameter anzupassen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Node erstellt ein personalisiertes Befehlszeilentool

jQuery gibt Trigger-Button-Ereignis ein (mit Code)

Das obige ist der detaillierte Inhalt vonvue+mixin speichert Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!