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.js アプリケーションを作成します:

vue create my-app

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

cd my-app
npm run serve

ログイン後にコピー

新しいファイルを作成し、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)
    }
  }
}

ログイン後にコピー

ディレクティブを 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')

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。