[Vue.js] 기초 1 (설치 및 실행/데이터바인딩/반복문)

 

vue를 사용하는 곳이 점점 많아져서, 리액트뿐만 아니라 vue도 기본은 알아야하지 않나 싶어서 시작하게 되었다.

 

vue 의 장점

1. vue는 웹 앱 개발툴 React, Angular 중에서 가장 쉽다. 직관적인 방법을 이용해 한 눈에 알아보기 용이하다.

2. 개발하는 방식도 다양하지 않아 협업 시에 스타일 통일이 용이하다. 리액트는 코드를 짜는 방식이 매우 다양한데 vue는 딱 한 가지 방법만 가지고 있다.

3. HTML 렌더링하는 시간이 빠르다.

4. 꾸준히 업데이트되는 라이브러리

 

 

---

 

 

설치 및 실행

npm install -g @vue/cli
vue create 생성할 프로젝트 이름
npm run serve

 

 

 

기본 구조

App.vue

<template>
  화면을 렌더링 하는 template 부분
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
	데이터, 함수 등을 저장하는 부분
</script>

<style>
#app {
  css를 설정하는 부분
}
</style>

 

 

 

---

데이터 바인딩

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4 class="room1" :style="파란글씨">{{ products[0] }} 원룸</h4>
    <p>월 {{ price1 }}만원</p>
  </div>
  <div>
    <h4>{{ products[1] }} 원룸</h4>
    <p>월 {{ price2 }}만원</p>
  </div>
  <div>
    <h4>{{ products[2] }} 원룸</h4>
    <p>월 {{ price3 }}만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      price1: 60,
      price2: 70,
      price3: 80,
      파란글씨: "color: blue",
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

 

데이터는 script 속 data() 안에 보관하고, data(){ return { } } 

template에서  {{ }} 이 안에 넣어서 꺼내서 쓰면 된다.

 

*  HTML 속성도 데이터바인딩이 가능하다.

<div :id="아이디" :class="클래스명" :style="원하는 스타일"></div>

속성 값 앞에 :을 붙여주면 데이터바인딩을 할 수가 있다.

 

예를 들어,

<template>
  <div>
    <h4 :id="idnn" :class="classnn" :style="파란글씨">
      {{ products[0] }} 원룸
    </h4>
    ....
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ...
      파란글씨: "color: blue",
      idnn: "냐냐",
      classnn: "뇨뇨",
    };
	...

 

이런식으로 작성 후 확인해보면,

잘 사용되고 있음이 확인된다.

 

---

 

반복문 v-for

 <div class="menu">
    <a>Home</a>
    <a>Products</a>
    <a>My page</a>
  </div>

 

를 반복문으로 바꿔보자

<div class="menu">
    <a v-for="짓고 싶은 이름 in 몇 번 반복할지">Home</a>
</div>

key값 작성하라고 친절하게 알려주기 까지 함.

그럼 :key="방금 지은 이름" 을 추가해주면 된당

 

암튼 이렇게 하면 근데 Home이라는 것만 3개가 생긴다.

이때는 "몇 번 반복할지" 부분에 데이터를 넣어주면 된다.

 

<script>
export default {
  name: "App",
  data() {
    return {
      header_menu: ["Home", "Product", "My page"],
    };
  },
  components: {},
};
</script>

script data() 부분에 header_menu 데이터를 추가해주고,

<a v-for="aa in header_menu" :key="aa">{{ aa }}</a>

template 부분에 위처럼 작성해주게 되면 ,

출력이 완성된다.

 

정리 

1. a태그에 v-for를 이용했으니 a태그가 header_menu의 개수만큼 반복이 될 것.

2. 작명한 변수는 (aa) 데이터안의 자료가 되어 반복을 돌 때마다 해당 값을 가진다.

3.key는 반복문 돌린 요소를 컴퓨터가 구분하기 위해 꼭 사용
-> in 왼쪽에 변수를 2개 지정하여 두번째 변수는 하나씩 증가하는 idx로 지정해줄 수 있음. 

<a v-for="(a,i) in header_menu" :key="i">{{ i }}</a>

i 값 확인

 

---

<div>
    <h4>{{ products[0] }} 원룸</h4>
    <p>월 {{ price1 }}만원</p>
  </div>
  <div>
    <h4>{{ products[1] }} 원룸</h4>
    <p>월 {{ price2 }}만원</p>
  </div>
  <div>
    <h4>{{ products[2] }} 원룸</h4>
    <p>월 {{ price3 }}만원</p>
  </div>

기존에 만들었던 코드를 변환시켰다

<div v-for="(a, i) in products" :key="i">
    <h4>{{ products[i] }}</h4>
    <p>월 {{ price1 }}만원</p>
</div>

일단 가격은 신경쓰지 말고 상단의 지역만 바꾸라고 해서 바꿨는데,

방법이 있지 않을까 해서 한번 객체에 담아서 해보았다.

 

 

<template>
  <div v-for="(a, i) in list" :key="i">
    <h4>{{ a.place }} 원룸</h4>
    <p>월 {{ a.price }}만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [
        { place: "역삼동", price: "60" },
        { place: "천호동", price: "70" },
        { place: "마포구", price: "80" },
      ],
    };
  },
  components: {},
};
</script>

list 의 반복을 돌면서 각각의 값들을 가져올 수 있었다.