VUE3 시작하기 튜토리얼: 데이터 바인딩 및 이벤트 처리-View.js-php.cn

VUE3 시작하기 튜토리얼: 데이터 바인딩 및 이벤트 처리

WBOY

풀어 주다： 2023-06-15 22:18:14

원래의

3478명이 탐색했습니다.

VUE3는 프론트엔드 개발에 널리 사용되는 JavaScript 프레임워크 기반의 UI 라이브러리입니다. 이 기사에서는 초보자를 위한 VUE3 데이터 바인딩 및 이벤트 처리를 소개합니다.

1. 데이터 바인딩

데이터 바인딩은 VUE3에서 가장 중요한 기능으로, 데이터 변경 사항을 페이지에 동기화할 수 있도록 데이터를 페이지에 바인딩하는 데 사용됩니다. VUE3는 모델 데이터와 뷰를 양방향으로 바인딩하여 데이터 동기화를 달성할 수 있는 MVVM(Model-View-ViewModel) 개발 모델을 채택합니다. 실제 개발에서는 innerHTML과 같은 HTML 태그의 속성에 데이터를 바인딩해야 합니다.

다음은 간단한 데이터 바인딩 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>VUE3数据绑定示例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello, Vue3!'
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>

로그인 후 복사

위 코드에서는 먼저 VUE3의 JavaScript 파일을 도입한 후 "app"이라는 ID로 div를 정의하고 "{{ message }}"를 전달했습니다. 데이터는 p 태그에 바인딩됩니다. 다음으로 Vue 인스턴스를 정의하고 초기 값이 "Hello, Vue3!"인 데이터에 메시지 속성을 정의했습니다. 마지막으로 app.mount 함수를 통해 ID가 "app"인 div에 Vue 인스턴스를 마운트했습니다. 이런 방식으로 데이터가 변경되면 p 태그의 내용도 변경됩니다.

2. 이벤트 처리

VUE3의 이벤트 처리는 다른 JavaScript 프레임워크와 유사하며 이벤트는 v-on 명령을 통해 바인딩됩니다. 예를 들어 클릭 이벤트를 버튼에 바인딩할 수 있습니다.

<div id="app">
    <button v-on:click="handleClick">Click me</button>
</div>
<script>
    const app = Vue.createApp({
        methods: {
            handleClick() {
                alert('You clicked me!')
            }
        }
    })
    app.mount('#app')
</script>

로그인 후 복사

위 코드에서는 ID가 "app"인 div를 정의하고 사용자가 클릭할 때 v-on:click 지시어를 통해 클릭 이벤트를 바인딩합니다. 버튼 일 때, handlerClick 기능이 실행되고 프롬프트 상자가 팝업됩니다.

클릭 이벤트 외에도 VUE3는 다음과 같은 많은 다른 이벤트도 지원합니다.