[ Vue.js ] 예제 - 웹설문지 / 퀴즈 만들기 구현

 

안녕하세요 상훈입니다. 

금일은 Vue.js - Tailwind.css 를 이용하여 간단한(나는 안간단함ㅠ) 예제를 구현해보려고합니다.

결과물

프로젝트 설치방법은 Tailwind.css에서 git clone(클릭시 이동) 방식으로 진행하여
npm install, build를 통해 npm module들을 다운로드 받고,
vue.js는 cdn으로 연동하였습니다.

다음번에는 vue-cli를 통해 진행하는것도 좋을 것 같습니다.

사용한 vue.js 항목으로는 
v-if, v-for, v-on, v-model, v-show, v-binding 등이고, tailwind.css 의 클래스를 입력하는 것들이 생각보다 빡셌습니다. 후...

많은 조건문을 넣느라 토하는줄 

많은 조건문-클래스 입력의 예시,,

 

 

해당 내용은 컴포넌트의 분리 없이 한개의 html로 모두 구성이 되었습니다.

componenets를 다루지 않은게 조금 아쉽네요.

 

 

요 부분은 왜 [ ] 대괄호를 사용한걸까요?

 

 

 

강의

전체 프로젝트

GitHub - ThirusOfficial/simple-quiz-app-vue3-tailwind-css

 

감사합니다.