1. Visual Studio Code에서 터미널을 연 후 vue 빌드 폴더 이름으로 vue 프로젝트를 생성합니다.
2. 사용 중인 vue 버전을 설치합니다.
3. vue 프로젝트 생성 후 cd todolist-p2 폴더로 이동
4. vue 프로젝트가 npm run serve로 실행 중인지 확인합니다.
5. todolist-p2의 src 하위 디렉토리에 있는 App.vue에 todoList 및 테이블을 생성합니다.
<프레젠테이션>
<다양한 ID=“애플리케이션”>
<테이블>
<머리>
<트>
<일>아니요일>
<일>만들다일>
<일>완전한일>
<일>편집하다일>
<일>끄다일>
트>
머리>
<티바디>
<트 v-for=“만들다 ~ 안에 할 일 목록“ v-바인드:단추=“‘만들다_’ + 만들다.ID“>
<td>{{ 만들다.ID }}td>
<td>{{ 만들다.만들다 }}td>
<td>{{ 만들다.완전한 }}td>
<td>단추>편집하다단추>td>
<td>단추>끄다단추>td>
트>
티바디>
테이블>
다양한>
프레젠테이션>
내보내다 기본 {
성: ‘애플리케이션’,
데이터(){
돌려 주다{
할 일 목록:(
{
ID: 하나,
만들다: ‘뷰’,
완전한: 잘못된,
끄다: 잘못된
},
{
ID: 2,
만들다: ‘반응’,
완전한: 잘못된,
끄다: 잘못된
},
{
ID: 삼,
만들다: ‘정사각형’,
완전한: 잘못된,
끄다: 잘못된
},
)
}
}
}
6. 간단한 CSS 적용
<스타일>
#앱 {
글꼴 패밀리: 아베니르, 헬베티카, 굴림, 산세 리프;
-웹킷-폰트-스무딩: 부드럽게;
-moz-osx-폰트-스무딩: 그레이스케일;
텍스트 정렬: 센터;
색상: #2c3e50;
보더 업: 60픽셀;
}
테이블 머리 트 일{
키:30픽셀;
배경색: 검은색;
색상:하얀색;
}
테이블 티바디 트 td{
키:30픽셀;
}
테이블 티바디 tr:n번째 자식(이상한){
배경색: #cccccc;
}
스타일>
