VUE3 クイック スタート: Vue.js 命令を使用して、アニメーション コンポーネントの切り替えをカプセル化します。

Vue.js は、インタラクティブな Web アプリケーションとユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue.js 3 はフレームワークの最新バージョンで、より高速なレンダリング速度、より強力な TypeScript サポート、より優れた開発者エクスペリエンスなどの強力な新機能をもたらします。このうち、Vue.js ディレクティブは Vue.js のコア機能であり、ディレクティブでバインドされた要素に動的な動作を追加するために使用できます。この記事では、Vue.js 命令を使用して、切り替えアニメーション コンポーネントをカプセル化します。

ステップ 1: Vue インスタンスを作成する

まず、Vue インスタンスを作成します。ここでは、Vue.cli を使用して Vue.js 3 をインストールし、Vue アプリケーションを作成します。以下の手順に従ってください:

#Vue.cli のインストール
1. #ターミナルを開き、次のコマンドを入力して Vue.cli をインストールします:

npm install -g @vue/cli

Vue アプリケーションを作成します

2. 次のコマンドを使用してターミナルで Vue.js アプリケーションを作成します:

vue create my-app

Vue アプリケーションを開始します

3. #Use 次のコマンドは、ターミナルで Vue.js アプリケーションを起動します。

cd my-app
npm run serve

これで、Vue.js アプリケーションが正常に作成され、開発サーバーが起動されました。

ステップ 2: 切り替えアニメーション コンポーネントを作成する

このステップでは、Vue.js ディレクティブを使用して切り替えアニメーション コンポーネントをカプセル化します。私たちの目標は、要素が切り替わったときにスムーズなアニメーションを表示する要素に追加できるディレクティブを作成することです。次の手順に従ってください:

新しいファイルを作成し、switch-animation.jsとして保存します

1. オプションで、src/components ディレクトリにファイルを作成できます。このファイルに次のコードを入力します。

import { DirectiveBinding } from 'vue'
export default {
  beforeMount (el: HTMLElement, binding: DirectiveBinding) {
    el.style.transition = 'opacity 0.5s'
  },
  mounted (el: HTMLElement, binding: DirectiveBinding) {
    el.style.opacity = '0'
  },
  updated (el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value !== binding.oldValue) {
      el.style.opacity = '0'
      setTimeout(() => {
        el.style.opacity = '1'
      }, 100)
    }
  }
}

このコードでは、switch-animation という Vue.js ディレクティブを定義します。このディレクティブは、要素の beforeMount、マウントおよび更新されたフック内の対応する関数を実行します。これらの関数の目的は、要素が DOM に追加されるときに遷移効果を追加し、要素の初期透明度を設定し、要素の状態が更新されるときにトグル効果を追加することです。

ディレクティブを main.js ファイルに登録する

2. このディレクティブを Vue.js アプリケーションで使用するには、main.js ファイルに登録する必要があります。ファイルに次のコードを入力します。

import { createApp } from 'vue'
import switchAnimation from './components/switch-animation.js'

const app = createApp(App)
app.directive('switch-animation', switchAnimation)
app.mount('#app')

このコードでは、Vue.js の createApp 関数を使用して Vue インスタンスを作成します。次に、ディレクティブを app.directive に登録することで、アプリケーションで使用できるようにします。

コンポーネントでのディレクティブの使用

3. これで、ディレクティブが正常に作成され、登録されました。次に、このディレクティブをコンポーネントで使用する必要があります。このディレクティブの使用方法を示すために、トグル ボタンを使用して 2 つのテキスト段落を順番に切り替える単純なコンポーネントを作成します。 src/components ディレクトリに switch-example.vue ファイルを作成し、次のコードを入力します。

<template>
  <div>
    <button @click="toggle">Toggle Text</button>
    <p v-switch-animation="show.first">{{ show.first ? 'Hello' : 'Goodbye' }}, world!</p>
    <p v-switch-animation="show.second">{{ show.second ? 'How are you?' : 'I am fine.' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: {
        first: true,
        second: false,
      },
    }
  },
  methods: {
    toggle() {
      this.show.first = !this.show.first
      this.show.second = !this.show.second
    },
  },
}
</script>

このコードでは、switch-example という名前の Vue コンポーネントを作成しました。このコンポーネントには、テキスト トグル ボタンと、先ほど作成したディレクティブを使用した 2 つの段落要素が含まれています。ディレクティブは各段落の要素レベルで適用されるため、各段落を v-switch-animation ディレクティブでラップすると、スムーズなトランジション効果を簡単に追加できます。

これで、切り替えアニメーションコンポーネントの作成と使用が完了しました。

結論

この記事では、Vue.js 命令を使用して切り替えアニメーション コンポーネントをカプセル化する方法を紹介しました。このディレクティブを使用すると、任意の要素にスムーズなトランジション効果を簡単に追加して、ユーザー エクスペリエンスを向上させることができます。また、Vue.js アプリケーションでディレクティブを作成および登録する方法と、コンポーネントでディレクティブを使用する方法も示しました。 Vue.js ディレクティブやその他の強力な Vue.js 機能について詳しく知りたい場合は、Vue.js の公式ドキュメントを参照してください。

以上がVUE3 クイック スタート: Vue.js 命令を使用して、アニメーション コンポーネントの切り替えをカプセル化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。