Vue로 문제 풀이 페이지 만들어보기 1

Vue 를 배운지 벌써 1주일이 지나가는 것 같은데 뭐라도 안 만들어보면 금방 또 까먹게 될 것 같아 

 

웹 페이지 하나를 만들어보려고 합니다.

 

node는 웹페이지에서 다운로드 받으시고ㅡ,

 

npm install -g @vue/cli 를 이용하시면 vue/cli를 다운로드 받을 수 있습니다.

 

node.js와 vue/cli를 잘 깔아 뒀으니 이제 mypjt 뷰 프로젝트를 하나 만들겠습니다.\

 

vue create mypjt 로 뷰 프로젝틀르 만들어줍니다.

 

cd mypjt -> npm run serve 로 

 

뷰 프로젝트가 잘 완성된 것을 확인할 수 있습니다.

 

이제 쓸데없는 HelloWorld.vue 컴포넌트를 없애준뒤 시작해보겠습니다.

 

자 HelloWorld 대신 QustionComponent를 만들고 components에도 잘 추가해주었습니다.

 

자 이제, App.vue에서 Question Component에 문제들을 전달해 줄겁니다.

 

여러개의 Question Component를 App vue에 만들건데 각자 다른 정보들을 가지고 있어야 합니다.

 

Question Component안에 문제를 만들어 버리면 거기서 컨트롤을 하기가 좀 어려울 것 같아 App.vue에서 props로 전달해 주도록 하겠습니다.

 

일단 잘 작동을 하는지 테스트용으로 question과 answer을 넘겨보도록 하겠습니다.

 

<template>
  <div id="app">
    <QuestionComponent 
    question="세상에서 가장 귀여운 동물은?"
    :answer="{a:'강아지', b:'고양이', c:'토끼', d:'페코'}"
    />
  </div>
</template>

 

자 QuestionComponent에서 값을 잘 받을 수 있도록 QuestionComponent의 props에서 정의를 해주도록 합시다.

 

 

<script>

export default {

  props:{

    question:String,

    answer:Object,

  }

}

</script>

props에서 받아주어야 한다는걸 까먹으면 안되겠습니다.

 

그리고 html에 적절하게 넣어서 출력을 해보도록 하겠습니다.

<template>

  <div>

    <div>

    <h3>문제 1</h3>

    <p>{{question}}</p>

    </div>

    <div>

    <p> &lt;보기&gt;</p>

    <p>{{answer}}</p>

    </div>

  </div>

</template>

아주 좋습니다. 이제 이것들을 가공해서 이뻐보이게 만들면 되겠군요

 

좀 이뻐보이게 만들기 위해서 bootstrap을 깝니다. npm install bootstrap 해주면 됩니다.

 

그런 뒤 main.js에서 

import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.min.css'

이 2개를 css에 추가해주면 됩니다.

 

보기가 훨씬 나아졌습니다.

 

오브젝트 타입에 있는 아이들을 하나씩 꺼내주고 라디오 버튼을 달아놓았습니다

 

 

<template>
  <div>
    <div>
    <h3>문제 1</h3> 
    <p>{{question}}</p>
    </div>
    <div class="container d-flex justify-content-center">

    <div> &lt;보기&gt;
    <div class="answerBox d-flex align-items-center justify-content-evenly">
      <input type="radio" name="answer" value='a' id=a> <label for="a">{{ answer.a }}</label> 
      <input type="radio" name="answer" value='b' id=b> <label for="b">{{ answer.b }} </label> 
      <input type="radio" name="answer" value='c' id=c> <label for="c">{{ answer.c }} </label> 
      <input type="radio" name="answer" value='d' id=d> <label for="d">{{ answer.d }} </label> 

    </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    question:String,
    answer:Object,
  }
}
</script>

<style>
.answerBox{
  border: 1px solid black;
  width: 500px;
  height: 100px;
}
</style>