소개
이 프로젝트에서는 Vue.js 와 Element-UI 라이브러리를 사용하여 다차원 평점 컴포넌트를 만드는 방법을 배우게 됩니다. 이 평점 컴포넌트를 통해 사용자는 배달 속도, 음식 맛, 포장 품질 등 테이크아웃 주문의 다양한 측면에 대해 평가할 수 있습니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 다차원 평점 기능을 처리하기 위해
my-rate.vue라는 사용자 정의 Vue.js 컴포넌트를 만드는 방법. - 개별 평점 차원을 구현하기 위해 Element-UI 라이브러리의
el-rate컴포넌트를 사용하는 방법. - 평점이 업데이트될 때 상위 컴포넌트에 알리기 위해
my-rate컴포넌트에서change이벤트를 발생시키는 방법. - 디자인 요구 사항에 맞게 평점 컴포넌트의 스타일과 레이아웃을 사용자 정의하는 방법.
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- 사용자 정의 기능을 갖춘 재사용 가능한 Vue.js 컴포넌트를 만들 수 있습니다.
- Element-UI 라이브러리를 사용하여 복잡한 UI 컴포넌트를 구축할 수 있습니다.
- Vue.js 애플리케이션에서 부모 및 자식 컴포넌트 간에 데이터를 관리하고 통신할 수 있습니다.
- CSS 를 사용하여 Vue.js 컴포넌트의 스타일과 레이아웃을 지정할 수 있습니다.
프로젝트 구조 설정
이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:
프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:
├── element-ui-2.6.2
│ ├── element-icons.ttf
│ ├── element-icons.woff
│ ├── element-ui.min.js
│ └── element-ui.style.css
├── index.html
├── js
│ ├── http-vue-loader.js
│ └── vue.min.js
└── my-rate.vue
그 중:
index.html은 메인 페이지입니다.element-ui-2.6.2폴더에는 element-ui 라이브러리와 관련된 스크립트 파일, 스타일 파일 및 글꼴이 포함되어 있습니다.js폴더에는 vue 및 http-vue-loader 라이브러리와 관련된 파일이 포함되어 있습니다.my-rate.vue는 캡슐화된 평점 컴포넌트의 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지를 볼 수 있습니다.
My-Rate 컴포넌트 완성
이 단계에서는 다차원 평점 기능을 구현하기 위해 my-rate.vue 컴포넌트를 완성합니다.
- 프로젝트 폴더에서
my-rate.vue파일을 엽니다. template섹션에서 평점 컴포넌트의 HTML 구조를 추가합니다:
<div class="block">
<span class="demonstration">테이크아웃을 평가해주세요: </span>
<ul class="rate-list">
<li>
<!-- TODO: el-rate 속성 완성 -->
배달 속도:
<el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
</li>
<li>
<!-- TODO: el-rate 속성 완성 -->
테이크아웃 맛:
<el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
</li>
<li>
<!-- TODO: el-rate 속성 완성 -->
테이크아웃 포장:<el-rate
v-model="pack"
show-score
@change="changeHandler"
></el-rate>
</li>
</ul>
</div>
이 구조는 각 평점 차원 (속도, 맛, 포장) 에 대해 하나의 el-rate 컴포넌트를 포함합니다.
<script>섹션에서changeHandler메서드를 추가합니다:
<script>
module.exports = {
data() {
return {
speed: 0,
flavor: 0,
pack: 0
};
},
/* TODO */
methods: {
changeHandler() {
if (this.speed && this.flavor && this.pack) {
const rate = {
speed: this.speed,
flavor: this.flavor,
pack: this.pack
};
this.$emit("change", rate);
}
}
}
};
</script>
data 함수는 각 차원의 현재 평점 값을 저장하는 speed, flavor, pack의 세 가지 속성을 가진 객체를 반환합니다.
changeHandler 메서드는 모든 차원의 평점이 변경될 때 호출됩니다. 세 가지 평점이 모두 설정되었는지 확인하고, 설정된 경우 업데이트된 평점 값을 포함하는 객체와 함께 change 이벤트를 발생시킵니다.
my-rate.vue파일을 저장합니다.- 브라우저로 돌아가 페이지를 새로 고칩니다. 완성된 인터페이스는 그림과 같습니다:
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
