VUE3 빠른 시작: Vue.js 플러그인을 사용하여 팝업 구성 요소 만들기

Vue.js는 사용자 인터페이스를 구축하는 구성 요소 기반 방법을 제공하는 인기 있는 JavaScript 프레임워크입니다. 최신 Vue.js 버전 3은 성능이 최적화되었을 뿐만 아니라 몇 가지 새로운 기능도 추가했습니다. 이 기사에서는 Vue.js 3와 플러그인을 사용하여 팝업 구성 요소를 만드는 방법을 빠르게 소개합니다.

1. Vue.js 3 애플리케이션 만들기

시작하기 전에 Node.js와 Vue CLI를 설치해야 합니다. npm을 사용하여 다음 도구를 설치할 수 있습니다.

npm install -g @vue/cli

다음으로 Vue CLI를 사용하여 새 Vue.js 3 애플리케이션을 만듭니다.

vue create my-app
cd my-app
npm run serve

이렇게 하면 "my-app"이라는 새 애플리케이션이 생성되고 개발 서버가 시작됩니다.

2. Vue.js 플러그인 설치

팝업 구성 요소를 만들기 위해 Vue.js Modal이라는 플러그인을 사용합니다. 플러그인을 설치하려면 다음 명령을 실행하세요.

npm install vue-js-modal

src/main.js 파일을 열고 다음 콘텐츠를 추가하세요.

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'

Vue.config.productionTip = false

Vue.use(VModal)

new Vue({
  render: h => h(App),
}).$mount('#app')

먼저 Vue 및 App 구성 요소를 가져왔습니다. 다음으로 Vue.js Modal 플러그인을 가져오고 Vue.use(VModal)를 실행하여 이를 Vue.js 애플리케이션의 확장으로 사용했습니다.

3. 팝업 구성 요소 만들기

이제 자체 팝업 구성 요소를 만들 수 있습니다. 이 경우 사용자가 로그인이 필요한 작업을 수행하려고 할 경우를 대비해 간단한 로그인 양식을 생성하겠습니다.

먼저 새로운 Vue.js 구성 요소를 만들어야 합니다. LoginModal.vue라는 새 파일을 만들고 다음 코드를 복사하세요.

<template>
  <div id="login-modal">
    <h1>Login</h1>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // Your login logic goes here
      this.$emit('close')
    }
  }
}
</script>

이 구성 요소에는 사용자가 사용자 이름과 비밀번호를 입력할 수 있는 양식이 포함되어 있습니다. 양식이 제출되면 로그인 논리가 포함된 로그인 메소드를 호출합니다. 이 예에서는 자리 표시자 메서드를 사용하고 그 안에 닫기 이벤트를 발생시켜 팝업 창을 닫습니다.

이제 다른 구성 요소에서 이 LoginModal 구성 요소를 사용하여 팝업 창을 만들어 보겠습니다.

4. 팝업 구성 요소

를 사용하여 App.vue 파일을 열고 템플릿 태그의 아무 곳에나 다음 콘텐츠를 추가하세요.

<modal name="login-modal">
  <login-modal @close="$modal.hide('login-modal')"></login-modal>
</modal>
<button @click="$modal.show('login-modal')">Show Login Modal</button>

이 코드는 Vue.js Modal 플러그인에서 제공하는 구성 요소와 지침을 사용합니다. . 먼저 Name 속성을 사용하여 이름이 지정된 모달 창을 정의합니다. 이 모달 창에는 방금 만든 LoginModal 구성 요소가 포함되어 있습니다. 그런 다음 페이지에 버튼이 추가되고 클릭하면 모달 창이 표시됩니다.

모달 창을 닫으려면 LoginModal 구성 요소에서 닫기 이벤트를 발생시켜야 합니다. $modal.hide('login-modal') 메서드를 사용하면 상위 구성 요소에서 이를 수신하고 모달 창을 닫을 수 있습니다.

5. 결론

이 기사에서는 Vue.js 3 및 플러그인을 사용하여 팝업 구성 요소를 만드는 방법을 배웠습니다. Vue.js Modal 플러그인은 모달 창을 직접 생성할 수 있는 기능을 제공하며 간단한 Vue.js 구성 요소만 사용하면 됩니다. 이러한 방식으로 우리는 사용자가 대화형 웹 애플리케이션과 상호 작용할 수 있는 복잡한 사용자 인터페이스를 빠르고 쉽게 만들 수 있습니다.

위 내용은 VUE3 빠른 시작: Vue.js 플러그인을 사용하여 팝업 구성 요소 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!