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

PHPz

풀어 주다： 2023-06-15 16:10:44

원래의

1369명이 탐색했습니다.

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

1단계: Vue 인스턴스 생성

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

Vue.cli 설치

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

npm install -g @vue/cli

로그인 후 복사

Vue 앱 만들기

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

vue create my-app

로그인 후 복사

Vue 애플리케이션 시작

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

cd my-app
npm run serve

로그인 후 복사

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

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

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

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

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에 등록하여 애플리케이션에서 지시문을 사용할 수 있도록 합니다.

구성 요소에서 지시어 사용

이제 지시어를 성공적으로 생성하고 등록했습니다. 다음으로 구성 요소에서 이 지시문을 사용해야 합니다. 이 지시문을 어떻게 사용할 수 있는지 보여주기 위해 토글 버튼을 통해 텍스트의 두 단락을 순서대로 토글하는 간단한 구성 요소를 생성하겠습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!