Vue.js 버튼 및 값 업데이트

소개

이 프로젝트에서는 Vue.js 환경을 설정하고 웹 페이지에 표시되는 값을 업데이트하는 버튼 기능을 구현하는 방법을 배우게 됩니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

• Vue.js 환경 설정 방법
• - 및 + 버튼으로 값을 업데이트하는 기능 구현 방법
• 버튼 기능 테스트 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• 기본적인 Vue.js 애플리케이션 설정
• 반응형 데이터 객체 생성 및 값 업데이트
• 이벤트 핸들러를 사용하여 함수를 호출하고 UI 업데이트

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
│   └── style.css
├── index.html
└── js

그 중:

• index.html은 수정할 메인 페이지입니다.
• css는 프로젝트의 스타일을 저장하는 폴더입니다.
• js는 프로젝트가 의존하는 Vue 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다. 페이지에서 - 및 + 버튼을 클릭하면 가운데 값이 변경되지 않는 것을 확인할 수 있습니다. 페이지 효과는 다음과 같습니다:

수리 기능

이 단계에서는 페이지에서 "-" 및 "+" 버튼을 클릭하여 가운데 값이 그에 따라 변경되도록 버그를 수정해야 합니다.

1. index.html 파일에서 // TODO 섹션을 찾습니다:
2. 다음 코드로 수정합니다:

// TODO
let { value } = toRefs(data);

3. - 및 + 버튼의 @click 이벤트 핸들러에서 update 함수를 호출하고 업데이트된 값을 인수로 전달합니다.
4. update 함수에서 인수로 전달된 새 값으로 value 속성을 업데이트합니다.

이 단계를 완료한 후 페이지에서 "-" 및 "+" 버튼을 클릭하면 가운데 값이 그에 따라 변경됩니다.

완료 후 효과는 다음과 같습니다:

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.