VUE 공부 2일차

기본 문법

데이터 바인딩 

{{데이터바인딩}}

• HTML에서 표시할 내용을 JavaScript 데이터와 연결하는 것을 의미하며, 우리가 어떤 데이터를 설정해두면 그 값이 자동으로 화면에 표시되도록 만들 수 있음

어떻게 사용하는가?

• data에 데이터를 넣는다
• <template> 부분에서 {{ }} 안에 데이터를 넣어 화면에 표시

예시

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "여기에서는 제목을 표시", // 데이터는 object 자료형
      message: "이 문장은 데이터 바인딩으로 표시" // {자료이름 : 자료내용}
    };
  }
};
</script>

template 부분

• {{ title }} : 여기서 {{ }}는 Mustache 문법이라고 부르며, 데이터 바인딩을 의미, 이걸로 title이라고 하는 데이터를 화면에 표시할 수 있음.
• {{ message }} : message라는 데이터를 화면에 표시함. 데이터가 변하면 자동으로 화면의 내용도 업데이트 됨

script 부분

• data() 함수는 이 컴포넌트에서 사용할 데이터를 정의
• title과 message라는 데이터를 설정
• 이 데이터는 상단의 template에서 데이터바인딩을 통해 HTML에 표시됨

데이터 바인딩을 사용하는 이유

•  HTML에 하드코딩을 해 놓으면 나중에 변경의 어려움
• Vue의 실시간 자동 렌더링 사용하기 위해 -> 확장적으로 나아가 가격의 필터나 값의 변경 등을 적용할 수 있음
  -> 특정 사이트가 폐쇄하기 전까지 바뀌지 않을 것 같은 값은 하드코딩을 해도 되지만, 변동될 것 같은 값은 데이터바인딩을 사용하는 것이 효율적임

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    부동산
    <h4>XX 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
  	<!-- 속성 데이터 바인딩 시 콜론을 붙여주어야 하며 속성내부는 ""를 통해 표기 -->
    <h4 :style="style1">YY 원룸</h4>
    <p>{{ price2 }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      price1 : 80,
      price2 : 70,
      style1 : 'color : blue', //html 속성도 데이터바인딩이 가능
    };
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue 파일에 해당 코드를 작성했을 시

위와 같은 형태로 나타남

만약에 배열을 사용하여 나타낸다고 하면 아래처럼 나타낼 수 있음

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    부동산
    <h4 :style="styleArray[0]">{{product[0]}}</h4>
    <p>{{price[0]}} 만원</p>
  </div>
  <div>
    <h4 :style="styleArray[1]">{{product[1]}}</h4>
    <p>{{price[1]}} 만원</p>
  </div>
  <div>
    <h4 :style="styleArray[2]">{{product[2]}}</h4>
    <p>{{price[2]}} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      product : ['1번 원룸', '2번 원룸', '3번 원룸'],
      price : ['60', '70', '80'],
      styleArray : ['color : red', 'color : blue', 'color : green']
    };
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue를 이용한 반복문

Vue의 HTML 반복문

<태그 v-for="작명 in 횟수" :key=작명>  형식으로 작성해서 사용 

• Vue는 1장에서 이야기한 것 처럼 정해진 정답이 있기 때문에 반복문은 v-for로 통일해서 사용한다.
• 사용하는 용도는 여러 HTML요소들을 반복적으로 출력해야하는데 코드의 가독성을 높이기 위해 간결히 작성할 때 주로 사용한다.
• 사용하는 위치는 HTML 태그안에서 주로 사용함.

사용 예시

<template>
  <div class="menu">
    <a v-for="Page in menus" :key="Page">{{Page}}</a> <!--Page가 menus 안의 데이터로 변환됨 -->
    <!-- key의 용도 : 반복문 작성 시 필수적으로 작성해야하며 반복문을 돌린 요소(여기서는 Page)를 컴퓨터가 구분할 수 있도록 넣어주는 요소임-->
    <!-- <a v-for="(Page, i) in menus" :key="i">{{Page}}</a> 이렇게 사용 시에는 반복문을 돌리는 요소는 i가 되며 1씩 증가하는 정수임-->
  </div>
  <div>
    <h4 :style="styleArray[0]">{{product[0]}}</h4>
    <p>{{price[0]}} 만원</p>
  </div>
  <div>
    <h4 :style="styleArray[1]">{{product[1]}}</h4>
    <p>{{price[1]}} 만원</p>
  </div>
  <div>
    <h4 :style="styleArray[2]">{{product[2]}}</h4>
    <p>{{price[2]}} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      menus : ['Home', 'Shop', 'About'], // 반복문 안에서 자료형 개수 만큼 반복
      product : ['1번 원룸', '2번 원룸', '3번 원룸'],
      price : ['60', '70', '80'],
      styleArray : ['color : red', 'color : blue', 'color : green']
    };
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu {
  background : darkslateblue;
  padding : 15px;
  border-radius : 5px;
}
.menu a {
  color : white;
  padding : 10px;
}
</style>

위와 같이 코드 작성시 화면은 아래와 같이 나타나게 된다.

v-for 반복문 예시

 

그렇다면 div로 반복되어있는 원룸도 반복문을 통해 고쳐볼 수 있지 않을까?

<template>
  <div class="menu">
    <a v-for="Page in menus" :key="Page">{{Page}}</a> <!--Page가 menus 안의 데이터로 변환됨 -->
    <!-- key의 용도 : 반복문 작성 시 필수적으로 작성해야하며 반복문을 돌린 요소(여기서는 Page)를 컴퓨터가 구분할 수 있도록 넣어주는 요소임-->
    <!-- <a v-for="(Page, i) in menus" :key="i">{{Page}}</a> 이렇게 사용 시에는 반복문을 돌리는 요소는 i가 되며 1씩 증가하는 정수임-->
  </div>

  <!-- 제품 정보를 하나의 v-for로 간결하게 반복 출력 -->
  <div v-for="(product, i) in product" :key="i"> <!-- i를 사용하여 반복적으로 처리함-->
    <h4 :style="styleArray[i]">{{ product }}</h4>
    <p>{{ price[i] }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      menus: ['Home', 'Shop', 'About'], // 메뉴 항목
      product: ['1번 원룸', '2번 원룸', '3번 원룸'],
      price: ['60', '70', '80'],
      styleArray: ['color: red', 'color: blue', 'color: green']
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

위 처럼 반복문을 사용하게 되면 코드의 양이 획기적으로 줄어드는 것을 확인할 수 있음.