vue+mixin enregistre le code

Cette fois, je vais vous apporter vue+mixin pour économiser la quantité de code. Quelles sont les précautions à prendre pour que vue+mixin enregistre la quantité de code ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Concept Mixin : logique réutilisable au niveau des composants, y compris les variables de données/hooks de cycle de vie/méthodes publiques, afin qu'elle puisse être utilisée directement dans des composants mixtes sans écrire de manière répétée une logique redondante (similaire à l'héritage)

Utilisation :

Créez un dossier mixin sous un certain dossier public pub et créez mixinTest.js en dessous

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

Référez-le dans le composant Utilisez le fichier mixin public tout à l'heure et utilisez

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

ps : Si vous utilisez la méthode Vue.mixin(), cela affectera tous les exemples Vue créés plus tard, à utiliser avec prudence !

Faites attention à plusieurs fonctionnalités de mixin :

1. Les variables de données mélangées sont des fusions superficielles. En cas de conflits, les données du composant sont prioritaires (variables personnalisées). dans l'objet)

2. La logique de la fonction de cycle de vie mixte sera fusionnée avec la logique de la fonction de cycle de vie définie dans le composant et exécutée en premier (créée/montée/détruite)

3. La valeur mixte est une option d'objet, qui sera mélangée dans un objet. Après un conflit, le nom de la clé au sein du composant aura la priorité (données/méthode/composants/directives)

Distribution du contenu des slots

Introduction au concept de slot : La différence entre Vue et React en écriture réside dans l'organisation des éléments internes des composants et sous -components. Il n'y a aucun élément enfant dans le composant auquel nous pouvons accéder et afficher (sans tenir compte de la fonction de rendu pour l'instant), l'API est plutôt slot

Définition du scénario d'utilisation :

1. Il y a du HTML imbriqué dans le sous-composant personnalisé Ou d'autres composants d'étiquette personnalisés

2. Ce sous-composant personnalisé est écrit dans le composant parent, et les éléments imbriqués sont également placé dans le composant parent

3. En utilisant la balise dans le modèle du composant enfant, l'effet du rendu de la balise imbriquée écrite dans le composant parent est atteint

4. Essence Il place le contenu du composant parent dans le composant enfant et l'insère dans la position du composant enfant. Plusieurs balises seront également insérées ensemble

<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>

Deux points avancés de la fonctionnalité slot :

Portée de compilation du contenu inséré dans le slot : La portée du contenu distribué est déterminée en fonction du modèle dans lequel il se trouve

1. L'emplacement où le contenu spécifique est écrit détermine le rôle du domaine de compilation (dans la plupart des cas sous la portée du composant parent)

2. 2.1. 0+ ajoute un nouvel emplacement de portée, afin que les propriétés du composant enfant puissent être exposées au composant parent pour l'écriture. Utilisez la balise slot dans le sous-composant pour écrire directement des attributs personnalisés pour le contenu dans le sous-composant, puis ajoutez l'attribut slot-scope à la balise écrite dans le slot par le composant parent

3. L'attribut name de slot spécifie l'emplacement où l'étiquette est insérée, qui est le nom slot dans le document (ce document officiel l'explique clairement)

<!-- 父组件模板 -->
<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>

Le slot écrit dans le modèle du composant enfant a un attribut name (< ;/slot>)

1. Écrivez le composant enfant dans le composant parent Pour le contenu du slot à l'intérieur, spécifiez l'attribut slot (

   123

2. Le contenu du composant parent sera placé correspondant à slot==name Allez au bon emplacement

3. Si l'attribut slot n'est pas spécifié, il sera placé par défaut dans l'emplacement anonyme

4. Composant dynamique

Cette fonctionnalité des composants dynamiques a été écrite par de nombreux des gens dans de nombreux projets Vue, mais ils ne l'ont jamais utilisé. Il faut dire quelques mots de plus

Applicabilité des composants dynamiques :

Application d'une seule page, la commutation de certains composants n'implique pas de routage, mais les composants d'une zone de la page doivent être modifiés

1. La définition des paramètres des composants modifiés est la même, par exemple , ce sont toutes des boîtes de dialogue et un objet doit être transmis, mais la structure des données dans l'objet est différente

2. En utilisant l'attribut is du composant, le code du composant redondant dans le modèle peut être évité, il est plus propre d'éviter plusieurs codes de modèle v-if

3. Méthode utilisée (référence du document) :

Remarques :

<keep-alive>
  <component v-bind:is="currentView">
  <!-- 组件在 vm.currentview (对应组件名称)变化时改变！ -->
  <!-- 非活动组件将被缓存！可以保留它的状态或避免重新渲染 -->
  </component>
</keep-alive>Les composants de commutation dynamique doivent être importés dans le composant parent. Le rendu est dynamique, mais l'introduction ne l'est pas. <p style="text-align: left;"></p>
</li>
<li><p style="text-align: left;"><keep-alive>包裹动态组件时，会缓存不活动的组件实例，提高性能，避免重复渲染(keep-alive不会渲染额外DOM结构)</p></li>
<li><p style="text-align: left;"><keep-alive>有include和exclude这两个属性，用于指定缓存和不缓存的组件(传入字符串/数组/正则)</p></li>
<li><p style="text-align: left;">另一种避免重新渲染的方法是为标签增加属性v-once，用于缓存大量的静态内容，避免重复渲染。</p></li>
</ol>
<p style="text-align: left;">ps:<keep-alive>不会在函数式组件中正常工作，因为它们没有缓存实例。</p>
<p style="text-align: left;"><strong>动画与过渡</strong></p>
<blockquote style="text-align: left;"><p style="text-align: left;">其实很多前端工程师第一次用Vue的动画和过渡都是通过库组件来做到的，所以对这块没怎么深挖，各种过渡特效和按钮动画就跑起来了，现在就看下文档，补补课</p></blockquote>
<p style="text-align: left;">前端实现动画的基本方法分为三种种：css3的过渡和keyframe/javascript操纵dom/使用webgl或者canvas来独立实现，其中第三种是作为展示动画，与交互结合较少，而Vue作为一个框架，其支持动画基是从前两种入手的，从官方文档提到的四种支持就可以看出这一点。不过官方文档是从DOM过渡和状态过渡两个方面来讲解，前者是DOM的消失和出现的动画等属性的变化，后者是页面上某些值的变化。</p>
<p style="text-align: left;"><strong>DOM属性的改变</strong></p>
<p style="text-align: left;">若是单个元素/组件的显隐，在组件外面包裹一层<transition></transition>，而后选择是css过渡还是javascript过渡</p>
<p style="text-align: left;">CSS过渡：</p>
<ol class=" list-paddingleft-2">
<li><p style="text-align: left;">vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)</p></li>
<li><p style="text-align: left;">如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)</p></li>
<li><p style="text-align: left;">常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在transiton标签上加上appear，另有三个属性可指定(appear-?[to|active]?-class)</p></li>
</ol>
<pre class="brush:php;toolbar:false"><!-- 每种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>

数值和属性动态变化

L'animation dans cette partie est principalement destinée aux effets spéciaux de l'élément de données lui-même, tels que l'augmentation et la diminution des nombres, le contrôle du processus de transition des couleurs, la mise en œuvre de l'animation svg, etc. L'essence est le changement de chiffres/texte. Mon propre résumé est le suivant : en utilisant le système réactif de Vue, les modifications des nombres peuvent être transformées en un effet continu par les modifications des valeurs correspondantes sur le DOM via des bibliothèques externes. Par exemple, 1->100 est un processus continu de. nombres croissants, processus noir-> Le document officiel utilise principalement plusieurs exemples de codes pour illustrer. Les étapes essentielles sont les suivantes :

1. Modifiez une certaine variable a via la liaison bidirectionnelle de l'entrée sur la page, et il y a aussi un traitement sur le dom La variable b de l'effet de transition

2. est liée par le watcher (un certain attribut dans l'objet watch est cette variable a), déclenchant la logique

3. La logique dans l'observateur est de spécifier la valeur initiale b et la valeur finale a via la bibliothèque de transition externe, et enfin de changer la valeur de b en a

4. La variable liée au DOM est b , si certaines situations complexes peuvent être basées sur les propriétés calculées de b, afin de montrer le processus de changement de b

L'idée ci-dessus peut être utilisé pour compléter un effet d'animation au niveau de l'unité. Ce type de processus similaire est en fait une exigence très courante, il est donc nécessaire d'encapsuler ce processus dans un composant et d'exposer uniquement la valeur à transitionner à chaque fois. la valeur est modifiée, ce sera un effet de transition d'animation. L'encapsulation du composant doit ajouter la valeur initiale spécifiée dans le cycle de vie monté en fonction des quatre étapes ci-dessus. Dans le même temps, les deux valeurs d'origine a/b sont utilisées comme une seule valeur dans le composant et peuvent être distinguées. par newValue et oldValue dans l’objet watch. Quant au SVG final, son essence est également une transition numérique, mais elle implique plus de variables d'état et un code plus long. Cependant, il n'y a toujours pas beaucoup de demande pour des pages frontales pures, mais en tant que passe-temps, vous pouvez bricoler en vous amusant. les petits. démo, mais cela nécessite définitivement la participation du concepteur, sinon il sera difficile d'ajuster les paramètres.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Node crée un outil de ligne de commande personnalisé

jQuery entre un événement de bouton de déclenchement (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!