[027] Vue.js와 관련된 기능을 빈칸 채우기 문제

 
2024.06.14(금)
 
스켈레톤 5일차

 

무지출 챌린지 토글 기록까지 완료

 

1조 코드 리뷰
1. 잘한 점 
- UI가 이뻐요
- 프로필 바꾸는거 좋아요
- 엑셀로 내보내기 좋아요
- 발표를 잘했어요

2. 아쉬운 점

없음

 

스스로 아쉬운 점:

회원가입 연동

프로필바 자동 새로고침

 

위 내용 제외하고 아쉬웠던 점이 없었을 정도로

협업도 잘되고, 진행도 너무 원활하게 잘되어 감사했다.

 

굳!

 

이번주 토요일 오전 목표 ▼
1. Vue 이해 30%, 기능 구현 암기 70%
2. Vue 최대한 스스로 작성하기(토)
 

---

 

Vue.js 복습

 

 

문제 1: 기본 컴포넌트 템플릿

아래의 Vue 컴포넌트 템플릿에서 빈칸을 채워주세요.

 

• 빈칸 1에 들어갈 내용을 작성하세요.
• 빈칸 2에 들어갈 내용을 작성하세요.

---

문제 2: 이벤트 핸들링

아래 코드에서 빈칸을 채우세요. 버튼 클릭 시 메시지가 콘솔에 출력되도록 합니다.

• 빈칸 1에 들어갈 함수를 작성하세요.

---

문제 3: 데이터 바인딩

아래 코드에서 v-model을 사용하여 input의 값을 message 데이터 속성과 연결하세요.

• 빈칸 1에 들어갈 데이터 속성을 작성하세요.

---

문제 4: 조건부 렌더링

아래 코드에서 v-if 디렉티브를 사용하여 show 변수가 true일 때만 <p> 태그가 렌더링되도록 하세요.

• 빈칸 1에 들어갈 변수를 작성하세요.

---

문제 5: 리스트 렌더링

아래 코드에서 v-for 디렉티브를 사용하여 items 배열의 항목을 반복하여 <li> 태그로 렌더링하세요.

• 빈칸 1에 들어갈 배열을 작성하세요.