vue+mixin はコードを保存します-jsチュートリアル-php.cn

今回は、コード量を節約するための vue+mixin について、実際のケースを見てみましょう。

ミックスインの概念: データ変数/ライフサイクルフック/パブリックメソッドを含むコンポーネントレベルの再利用可能なロジック。冗長なロジック(継承と同様)を繰り返し記述することなく、混合コンポーネントで直接使用できます

使用方法:

あるパブリックフォルダーpub配下にmixinフォルダーを作成し、その配下にmixinTest.jsを作成します

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

ログイン後にコピー

コンポーネント内で先ほどのpublic mixinファイルを参照して使用してください

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

ログイン後にコピー

ps: Vue.mixin()メソッドを使用する場合、これは、後で作成されるすべての Vue サンプルに影響するため、注意して使用してください。

ミックスインのいくつかの機能に注意してください:

混合されたデータ変数は浅いマージであり、競合が発生した場合、コンポーネント内のデータが優先されます (オブジェクト内のカスタム変数)
のロジック。混合ライフサイクル関数は、コンポーネントで定義されたライフサイクル関数ロジックとマージし、最初に実行 (作成/マウント/破棄) します
オブジェクトとして値が混合されたオプションは、競合後にオブジェクトに混合されます。、コンポーネント内のキー名も優先されます (データ/メソッド/コンポーネント/ディレクティブ)

スロットコンテンツの配布

スロットの概念の紹介: 記述における Vue と React の違いは内部コンポーネントの構成にありますコンポーネントとサブコンポーネントの要素にアクセスして表示するための API は、代わりにスロットです

使用シナリオ定義:

カスタムサブコンポーネントにはネストされたHTMLやその他のカスタムタグコンポーネントがあります
このカスタムサブコンポーネントは親コンポーネントに記述されており、ネストされたものも親コンポーネントに配置されます
。サブコンポーネントのテンプレートでタグを使用することで実現されます親コンポーネントに記述されたネストされたタグの効果
本質は、親コンポーネントのコンテンツを子コンポーネントに配置することですコンポーネントを挿入し、子コンポーネントの位置に挿入します。複数のタグも一緒に挿入されます

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

ログイン後にコピー

スロット機能 2つの高度なポイント:

スロットに挿入されたコンテンツのコンパイル範囲: 配布されるコンテンツの範囲は次のように決定されます。テンプレートが配置される場所

特定のコンテンツが書き込まれる場所によってコンパイルのスコープが決まります (ほとんどの場合、親コンポーネントのスコープ内にあります)
2.1.0 以降では、新しいスコープスロットが追加されます, これにより、子コンポーネントの
を使用して、子コンポーネントのプロパティを親コンポーネントの子コンポーネントに書き込まれたコンテンツに公開できるようになります。スロットタグはカスタム属性を直接書き込むことができ、その後、親コンポーネントがそのタグを書き込みますスロット内に、slot-scope 属性

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

ログイン後にコピー

slot の name 属性を加えて、タグが挿入される場所を指定します。これは、ドキュメント内の名前付きスロットです (この公式ドキュメントで明確になっています)

書き込まれたスロット子コンポーネントのテンプレートにname属性()がある
親コンポーネントに記述する子コンポーネントのスロット内容にはslot属性を指定(
123
)
親コンポーネントのコンテンツは、slot==name に対応する正しい位置に配置されます
slot 属性がそうでない場合指定すると、デフォルトで匿名スロットの位置に配置されます

動的コンポーネント

動的コンポーネントにはこの機能があり、多くの人が多くの Vue プロジェクトを作成しましたが、一度も使用したことがないと言う必要があります。さらにいくつかの言葉

動的コンポーネントの適用性:

単一ページのアプリケーション、一部のコンポーネントの切り替えにはルーティングは含まれず、ページの領域内のコンポーネントのみを変更する必要があります
定義変更されたコンポーネントのパラメーターは同じです。たとえば、それらはすべてダイアログボックスであり、オブジェクトを渡す必要がありますが、オブジェクト内のデータ構造は異なります
コンポーネントの is 属性を使用することで、次のことができますテンプレート内の冗長なコンポーネントコードを回避し、複数の v-if テンプレートを回避します。コードがよりクリーンになります

使用方法 (ドキュメントを参照):

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

ログイン後にコピー

注:

動的に切り替えられるコンポーネントは親コンポーネントに導入する必要がありますレンダリングは動的ですが、導入部分は動的ではありません。
包裹动态组件时，会缓存不活动的组件实例，提高性能，避免重复渲染(keep-alive不会渲染额外DOM结构)
有include和exclude这两个属性，用于指定缓存和不缓存的组件(传入字符串/数组/正则)
另一种避免重新渲染的方法是为标签增加属性v-once，用于缓存大量的静态内容，避免重复渲染。

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

动画与过渡

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

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

DOM属性的改变

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

CSS过渡：

vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)
如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)
常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在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过渡：

因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式
通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)
监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数
元素首次渲染的动画，可以指定的监听事件有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>

ログイン後にコピー

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

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

使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。
列表的每个元素需要提供key属性
使用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>

ログイン後にコピー

数值和属性动态变化

この部分のアニメーションは主に、数値の増減、色の遷移プロセスの制御、SVGアニメーションの実装など、データ要素自体の特殊効果を目的としています。本質は数値の変化です/文章。私自身の要約は次のとおりです。Vue の応答システムを使用すると、外部ライブラリを介して DOM 上の対応する値を変更することで、数値の変更を継続的な効果にすることができます。たとえば、1->100 は数値が増加する継続的なプロセスです。、黒→赤のプロセス。公式ドキュメントでは主にいくつかのサンプルコードを使用して説明しています。重要な手順は次のとおりです:

ページ上の入力の双方向バインディングを通じて特定の変数 a を変更します。また、遷移を処理する変数 b もあります。 dom への影響
このデータはウォッチャーによってバインドされており (ウォッチオブジェクトの特定の属性はこの変数 a)、ロジックがトリガーされます
ウォッチャーのロジックは、初期値 b と外部遷移ライブラリを介して最終値 a が変更されます。の値は最終的に a に変更されます
DOM にバインドされている変数は b です。いくつかの複雑な状況がある場合は、計算されたプロパティに基づいている可能性があります。 b

の変更プロセスを示すために、上記のアイデアを実行します。これと同様のプロセスが実際には非常に一般的な要件であるため、このプロセスを a にカプセル化する必要があります。この値が変更されるたびに、アニメーション化されたトランジション効果が発生します。コンポーネントのカプセル化は、上記の 4 つの手順に基づいて、実装されたライフサイクルで指定された初期値を追加する必要があります。同時に、元の 2 つの値 a/b はコンポーネント内で 1 つの値として使用され、区別できます。監視オブジェクトの newValue と oldValue によって。最後の SVG についても、その本質はデジタル移行ですが、より多くの状態変数と長いコードが含まれます。ただし、純粋なフロントエンドページの需要はまだそれほど多くありませんが、趣味として少しいじってみるのも良いでしょう。小さなことですが、これには必ずデザイナーの参加が必要です。そうしないと、パラメーターを調整するのが難しくなります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

nodeはパーソナライズされたコマンドラインツールを作成します

jQuery Enterトリガーボタンイベント(コード付き)

以上がvue+mixin はコードを保存しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。