VUE3 개발의 기본 소개: 기본 기능 구현

프런트 엔드 개발에서 VUE는 의심할 여지 없이 매우 인기 있는 프레임워크입니다. VUE3가 출시되면서 점점 더 많은 개발자가 VUE의 새로운 버전을 배우고 사용하기 시작했습니다. 이 기사에서는 VUE3를 사용하여 프런트 엔드 애플리케이션을 개발하는 방법을 소개하고 몇 가지 간단한 예제를 기반으로 몇 가지 기본 기능을 구현하는 방법을 보여줍니다.

1. 환경 준비

시작하기 전에 Node.js와 npm이 설치되어 있는지 확인하세요. 그런 다음 명령줄 인터페이스에 다음 명령을 입력하여 VUE CLI를 설치할 수 있습니다.

npm install -g @vue/cli

설치가 완료된 후 VUE CLI를 사용하여 새 프로젝트를 생성할 수 있습니다. 명령줄 인터페이스에 다음 명령을 입력하세요.

vue create my-project

여기서 "my-project"는 자신의 프로젝트 이름입니다. 그런 다음 VUE에 대한 구성 옵션을 선택하라는 메시지가 표시됩니다. 기본 옵션을 선택하거나 수동으로 구성할 수 있습니다. 프로젝트가 생성된 후 VUE3를 사용하여 자체 개발을 시작할 수 있습니다.

2. 구성 요소 만들기

VUE에서 구성 요소는 중요한 개념입니다. 일반적인 구성 요소는 템플릿, 스크립트, 스타일의 세 부분으로 구성됩니다. 템플릿은 구성 요소의 HTML 콘텐츠이고, 스크립트는 구성 요소의 논리 코드이며, 스타일은 구성 요소의 스타일 시트입니다. 다음으로 간단한 구성 요소를 만들어 보겠습니다. 먼저 "src/comComponents" 디렉터리에 "HelloWorld.vue"라는 파일을 만듭니다. 파일에 다음 콘텐츠를 추가합니다.

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {},
  computed: {},
  created() {}
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

여기에서는 "HelloWorld"라는 구성 요소를 정의하고 H1 태그를 구성 요소의 콘텐츠로 설정합니다. 또한 데이터, 메서드, 계산 및 생성을 포함한 몇 가지 다른 옵션도 정의합니다.

3. Using Components

컴포넌트를 생성한 후에는 이를 애플리케이션에서 사용해야 합니다. "src/App.vue" 파일에 다음 내용을 추가합니다.

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

여기서는 컴포넌트에서 "HelloWorld" 컴포넌트를 참조하고 "comComponents"에 해당 컴포넌트를 등록했습니다. 애플리케이션에서는 "6854c4afb0434626d6ff80c7da64c5b8" 태그만 사용하여 구성 요소를 참조하면 됩니다. 애플리케이션을 실행하면 페이지에 "Hello World"라는 제목이 표시됩니다.

4. 이벤트 핸들러

애플리케이션에서는 일반적으로 버튼 클릭, 텍스트 입력 등과 같은 사용자 작업에 응답해야 합니다. 이때 이벤트 핸들러를 사용해야 합니다. VUE에서는 "v-on" 지시어를 통해 이벤트 핸들러를 구현할 수 있습니다. 다음으로, 사용자가 버튼을 클릭하면 이벤트가 트리거되고 팝업 창이 표시되는 간단한 버튼 구성 요소를 만들어 보겠습니다.

먼저 "src/comComponents" 디렉터리에 "Button.vue"라는 파일을 만듭니다. 파일에 다음 콘텐츠를 추가합니다.

<template>
  <button @click="showAlert">Click me!</button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    showAlert() {
      window.alert('Hello World!')
    }
  },
}
</script>

<style scoped>
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

여기에서는 "Button"이라는 구성 요소를 만들고 버튼을 정의했습니다. 버튼에 "v-on:click" 명령을 사용하여 클릭 이벤트를 바인딩하고, 클릭 시 "showAlert" 메서드를 호출하여 팝업 창을 표시합니다.

마지막으로 "src/App.vue" 파일에 다음 콘텐츠를 추가합니다.

<template>
  <div id="app">
    <Button />
  </div>
</template>

<script>
import Button from '@/components/Button.vue'

export default {
  components: {
    Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

여기에서는 애플리케이션의 "Button" 구성 요소를 참조했습니다. 애플리케이션을 실행하고 버튼을 클릭하면 팝업 창이 표시됩니다.

5. 계산된 속성

애플리케이션에서는 때때로 하나 이상의 상태를 기반으로 새로운 값을 계산해야 할 때가 있습니다. 이때 계산된 속성을 사용하여 이 문제를 해결할 수 있습니다. VUE에서는 "computed" 옵션을 통해 계산된 속성을 구현할 수 있습니다. 다음으로 숫자의 제곱을 계산하는 계산 속성을 만들어 보겠습니다.

먼저 "src/comComponents" 디렉터리에 "Number.vue"라는 파일을 만듭니다. 파일에 다음 내용을 추가합니다.

<template>
  <div>
    <label>Number: </label>
    <input type="number" v-model="number" />
    <p>Number squared: {{ numberSquared }}</p>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data() {
    return {
      number: 0
    }
  },
  computed: {
    numberSquared() {
      return this.number * this.number
    }
  }
}
</script>

<style scoped>
label {
  font-weight: bold;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width 100px;
  margin-right: 10px;
}
p {
  margin-top: 10px;
}
</style>

여기에서는 "Number"라는 구성 요소를 만들고 숫자를 입력하기 위한 입력 상자를 정의했습니다. 또한 숫자의 제곱을 계산하는 데 사용되는 계산 속성 "numberSquared"를 정의합니다. 숫자가 변경되면 계산된 속성이 숫자의 제곱을 자동으로 업데이트하여 페이지에 표시합니다.

마지막으로 "src/App.vue" 파일에 다음 내용을 추가합니다.

<template>
  <div id="app">
    <Number />
  </div>
</template>

<script>
import Number from '@/components/Number.vue'

export default {
  components: {
    Number
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

여기에서는 애플리케이션의 "Number" 구성 요소를 참조하여 숫자 입력 상자와 숫자의 제곱 계산 결과를 표시합니다.

Summary

이 기사에서는 VUE3를 사용하여 프런트 엔드 애플리케이션을 개발하는 방법을 소개하고 구성 요소를 생성하고 이벤트 핸들러 및 계산된 속성을 사용하는 방법 등을 시연했습니다. 기본 기능. 이러한 예를 통해 귀하는 이미 기본적인 이해와 기술을 갖추고 있다고 믿습니다. 물론 VUE3에는 여전히 개발자가 탐색하기를 기다리는 많은 강력한 기능과 기능이 있습니다. 계속해서 VUE3를 배우고 사용하며 실무에서 지속적으로 발전과 혁신을 이룰 수 있기를 바랍니다.

위 내용은 VUE3 개발의 기본 소개: 기본 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!