[Vue] 데이터의 종류

기본적인 데이터 종류 : 숫자형, 문자형, 불린

- JavaScript와 같이 입력된 값에 따라 테이터형을 자동으로 결정

- 숫자값이 입력되면 숫자형

- 문자열이 입력되면 문자형

<h2>Javascript 를 이용하여 표시하는 예제</h2>
<div id="app">
  <p>{{ myPrice * 1.08 }}</p> <!-- 숫자형 (연산가능) -->
  <p>{{ "안녕하세요~ "+ myName + "님" }}</p><!-- 문자형 -->
  <p>{{ myName.substr(0,1) }}</p><!-- 문자형에서 특정한 부분을 뽑아낼 수 있음 -->
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      myPrice: 500,
      myName: "홍길동",
    },
  });
</script>

 

배열

- HTML : {{ 배열명 }} or {{ 배열명[인덱스] }}

- JS : new Vue({ el : "#ID명", data : { 배열명 : [값1, 값2, 값3,,,] } })

<h2>배열로 값을 표시하는 예제</h2>
<div id="app">
    <p>{{ myArray }}</p> <!-- ['다즐링','얼그레이','실론'] 출력 -->
    <p>{{ myArray[0] }}</p> <!-- 다즐링 출력 -->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myArray:['다즐링','얼그레이','실론']
        }
    })
</script>

 

 

오브젝트형 (객체형)

- 키와 밸류의 한 쌍으로 이루어진 데이터 타입 (여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입)

- 동일한 데이터 형태만 저장하는 배열과는 달리, 오브젝트형은 다양한 데이터 형태를 한 변수에 저장할 수 있다.

- HTML : {{ 오브젝트명 }} or {{ 오브젝트명.키이름 }}

- JS : new Vue({ el : "#ID명", data : { 오브젝트명 : {키1:값1, 키2:값2, 키3:값3,,,} } })

<h2>오브젝트 데이터를 표시하는 예제</h2>
<div id="app">
    <p>{{ myTea }}</p> <!-- { "name": "다즐링", "price": 600 } 출력 -->
    <p>{{ myTea.name }} {{ myTea.price }}원</p> <!-- 다즐링 600원 출력 -->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myTea:{name:'다즐링', price:600}
        }
    })
</script>

 

미리 선언된 데이터 사용

- Vue인스턴스를 만들기 전에 JAvaScript로 만들어 놓은 데이터를 Vue 데이터로 읽어들여서 사용할 수도 있다.

- 가장 많이 사용하는 형태이다.

<h2>Javascript로 만든 데이터를 표시하는 예제</h2>
<div id="app">
    <p>{{ myTea }}</p> <!-- teaList에 저장된 데이터 출력 -->
    <p>{{ myTea[1].name }} {{ myTea[1].price }}원</p> <!-- 얼그레이 500원 출력 -->
</div>

<script>
    var teaList = [
                {name:'다즐링', price:600},
                {name:'얼그레이', price:500},
                {name:'실론', price:500}
            ]; //JavaScript Object Notation(JSON) - 배열안에 오브젝트형이 들어간 형식

    new Vue({
        el: '#app',
        data: {
            myTea: teaList
        }
    })
</script>

 

데이터의 내부를 확인하고 싶을 때

- HTML : {{ $data }}

- $data : Vue 인스턴스에서 갖고 있는 모든 데이터

<h2>오브젝트 데이터의 내부를 확인하는 예제</h2>
<div id="app">
    {{ $data }} <!-- data에 저장된 모든 데이터를 출력함  -->
    <hr>
    <!-- for in 반복문을 이용하여 data의 키 : 값 을 출력함 -->
    <li v-for="(item, key) in $data">{{ key }} : {{ item }}</li>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myText:'Hello!!!',
            myNumber:12345,
            myBool:true,
            myArray:[1,2,3,4,5]
        }
    })
</script>