VUE3 빠른 시작: Vue.js 지침을 사용하여 전환 애니메이션 구성 요소를 캡슐화합니다.

Vue.js는 대화형 웹 애플리케이션과 사용자 인터페이스를 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue.js 3은 더 빠른 렌더링 속도, 더 강력한 TypeScript 지원, 더 나은 개발자 경험과 같은 강력한 새 기능을 제공하는 최신 버전의 프레임워크입니다. 그 중 Vue.js 지시문은 Vue.js의 핵심 기능으로 지시문에 바인딩된 요소에 동적 동작을 추가하는 데 사용할 수 있습니다. 이 기사에서는 Vue.js 지침을 사용하여 전환 애니메이션 구성 요소를 캡슐화합니다.

1단계: Vue 인스턴스 생성

Vue 인스턴스 생성부터 시작하겠습니다. 여기서는 Vue.cli를 사용하여 Vue.js 3을 설치하고 Vue 애플리케이션을 만듭니다. 아래 단계를 따르십시오.

1. Vue.cli 설치

터미널을 열고 다음 명령을 입력하여 Vue.cli를 설치하십시오.

npm install -g @vue/cli

2. Vue 앱 만들기

다음 명령을 사용하여 Vue.js 앱을 만듭니다. 터미널 절차:

vue create my-app

3. Vue 애플리케이션 시작

다음 명령을 사용하여 터미널에서 Vue.js 애플리케이션을 시작합니다.

cd my-app
npm run serve

이제 Vue.js 애플리케이션을 성공적으로 생성하고 개발 서버를 시작했습니다.

2단계: 전환 애니메이션 구성 요소 만들기

이 단계에서는 Vue.js 지침을 사용하여 전환 애니메이션 구성 요소를 캡슐화합니다. 우리의 목표는 해당 요소가 전환될 때 부드러운 애니메이션을 표시하는 모든 요소에 추가할 수 있는 지시문을 만드는 것입니다. 다음 단계를 따르세요.

1. 새 파일을 만들고 switch-animation.js로 저장하세요.

선택적으로 src/comComponents 디렉터리 아래에 파일을 만들 수 있습니다. 이 파일에 다음 코드를 입력합니다.

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에 추가될 때 전환 효과를 추가하고, 요소의 초기 투명도를 설정하고, 요소의 상태가 업데이트될 때 토글 효과를 추가하는 것입니다.

2. main.js 파일에 지시문 등록

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. 구성 요소에서 지시어 사용

이제 지시어를 성공적으로 생성하고 등록했습니다. 다음으로 구성 요소에서 이 지시문을 사용해야 합니다. 이 지시문을 어떻게 사용할 수 있는지 보여주기 위해 토글 버튼을 통해 텍스트의 두 단락을 순서대로 토글하는 간단한 구성 요소를 생성하겠습니다. src/comComponents 디렉터리에 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 컴포넌트를 생성합니다. 이 구성 요소에는 텍스트 전환 버튼과 방금 만든 지시어를 사용하는 두 개의 단락 요소가 포함되어 있습니다. 지시문은 각 단락의 요소 수준에서 적용되므로 각 단락을 v-switch-animation 지시어로 래핑하면 부드러운 전환 효과를 쉽게 추가할 수 있습니다.

이제 스위칭 애니메이션 컴포넌트 생성 및 사용이 완료되었습니다!

결론

이 기사에서는 Vue.js 지침을 사용하여 전환 애니메이션 구성 요소를 캡슐화하는 방법을 소개했습니다. 이 지시문을 사용하면 모든 요소에 부드러운 전환 효과를 쉽게 추가하여 사용자 경험을 향상시킬 수 있습니다. 또한 Vue.js 애플리케이션에서 지시문을 생성하고 등록하는 방법과 구성 요소에서 지시문을 사용하는 방법을 시연했습니다. Vue.js 지시어 및 기타 강력한 Vue.js 기능에 대해 자세히 알아보려면 공식 Vue.js 설명서를 확인하세요.

위 내용은 VUE3 빠른 시작: Vue.js 지침을 사용하여 전환 애니메이션 구성 요소를 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!