Mula Pantas VUE3: Gunakan arahan Vue.js untuk merangkum komponen animasi bertukar

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi web interaktif dan antara muka pengguna. Vue.js 3 ialah versi terbaharu rangka kerja, membawa ciri baharu yang berkuasa seperti kelajuan pemaparan yang lebih pantas, sokongan TypeScript yang lebih berkuasa dan pengalaman pembangun yang lebih baik. Antaranya, arahan Vue.js ialah fungsi teras Vue.js, yang boleh digunakan untuk menambah gelagat dinamik pada elemen yang terikat oleh arahan tersebut. Dalam artikel ini, kami akan menggunakan arahan Vue.js untuk merangkum komponen animasi pensuisan.

Langkah 1: Buat tika Vue

Kami akan mulakan dengan mencipta tika Vue. Di sini kami akan menggunakan Vue.cli untuk memasang Vue.js 3 dan mencipta aplikasi Vue kami. Sila ikuti langkah di bawah:

1. Pasang Vue.cli

Buka terminal dan masukkan arahan berikut untuk memasang Vue.cli:

npm install -g @vue/cli

2. Cipta aplikasi Vue

Buat aplikasi Vue.js dalam terminal menggunakan arahan berikut:

vue create my-app

3. Lancarkan aplikasi Vue

Gunakan Perintah berikut memulakan aplikasi Vue.js dalam terminal:

cd my-app
npm run serve

Kini, kami telah berjaya mencipta aplikasi Vue.js dan memulakan pelayan pembangunan.

Langkah 2: Buat komponen animasi pensuisan

Dalam langkah ini, kami akan menggunakan arahan Vue.js untuk merangkum komponen animasi pensuisan. Matlamat kami adalah untuk mencipta arahan yang boleh ditambah pada mana-mana elemen yang akan memaparkan animasi yang lancar apabila elemen itu ditogol. Sila ikut langkah berikut:

1. Buat fail baharu dan simpan sebagai suis-animasi.js

Anda boleh membuat fail secara pilihan di bawah direktori src/komponen. Dalam fail ini, masukkan kod berikut:

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

Dalam kod ini, kami mentakrifkan arahan Vue.js yang dipanggil suis-animasi. Arahan ini akan melaksanakan fungsi yang sepadan dalam cangkuk beforeMount, dipasang dan dikemas kini elemen. Tujuan fungsi ini adalah untuk menambah kesan peralihan apabila elemen ditambahkan pada DOM, menetapkan ketelusan awal elemen dan menambah kesan togol apabila keadaan elemen dikemas kini.

2. Daftar arahan dalam fail main.js

Untuk menggunakan arahan ini dalam aplikasi Vue.js, kami perlu mendaftarkannya dalam fail main.js. Masukkan kod berikut ke dalam fail:

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

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

Dalam kod ini, kami mencipta contoh Vue kami menggunakan fungsi createApp Vue.js. Kami kemudiannya menyediakan arahan untuk aplikasi kami dengan mendaftarkannya dalam app.directive.

3. Menggunakan arahan dalam komponen

Kini, kami telah berjaya mencipta dan mendaftarkan arahan kami. Seterusnya, kita perlu menggunakan arahan ini dalam komponen kita. Untuk menunjukkan cara arahan ini boleh digunakan, kami akan mencipta komponen mudah yang menogol dua perenggan teks dalam urutan melalui butang togol. Cipta fail switch-example.vue dalam direktori src/components dan masukkan kod berikut:

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

Dalam kod ini, kami mencipta komponen Vue bernama switch-example. Komponen ini mengandungi butang togol teks dan dua elemen perenggan menggunakan arahan yang baru kami buat. Memandangkan arahan kami digunakan pada peringkat elemen untuk setiap perenggan, membalut setiap perenggan dalam arahan v-switch-animasi membolehkan kami menambah kesan peralihan yang lancar dengan mudah.

Kini, kami telah menyelesaikan penciptaan dan penggunaan komponen animasi pensuisan!

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan arahan Vue.js untuk merangkum komponen animasi pensuisan. Dengan menggunakan arahan ini, kami boleh dengan mudah menambah kesan peralihan yang lancar pada mana-mana elemen untuk meningkatkan pengalaman pengguna. Kami juga menunjukkan cara membuat dan mendaftar arahan dalam aplikasi Vue.js, dan menunjukkan cara menggunakan arahan dalam komponen. Jika anda ingin mengetahui lebih lanjut tentang arahan Vue.js dan ciri Vue.js lain yang berkuasa, lihat dokumentasi rasmi Vue.js.

Atas ialah kandungan terperinci Mula Pantas VUE3: Gunakan arahan Vue.js untuk merangkum komponen animasi bertukar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!