Vue.js 인스턴스

Vue 인스턴스

• el 옵션 : 어떤 HTML 요소와 연결할지를 지정한다.
• data 옵션 : 어떤 데이터가 있는지를 지정한다.

​

# 머스테시(Mustache)는 콧수염이라는 의미이다. 중괄호 기호 { }를 옆으로 눕히면 콧수염처럼 보여서 머스태시라고한다.

​

​

예제 .

1) Hello를 출력해보면

HTML

<div id = "app">

   <p> {{ myText }} </p>

</div>

<script>

   new Vue ({

        el : '#app',

        data : { 

            myText: 'Hello!!

        }

   })

</script>

하면 출력 값은 Hello!! 라고 나온다..

 

 

 

 

 

2) v-text

 

<h2>데이터를 v-text로 표시하는 예제</h2>

<div id="app">

   <p v-text="myText"></p>

</div>

​

<script>

   new Vue({

      el: '#app',

      data: {

      myText:'Hello!!!'

      } 

   })

</script>

앞에와 같이 Hello!!! 가 출력된다.

​

 

 

3) v-html

 

<h2>HTML로 표시하는 예제</h2>

<div id="app">

   <p>{{ myText }}</p>

   <p v-text="myText"></p>

   <p v-html="myText"></p>

</div>

<script>
   new Vue({

      el: '#app',

      data: {

      myText:'<h1>Hello!!!</h1>

      }

   })

</script>

코드를 출력 해보면

​

<h1>Hello!!!<h1>

<h1>Hello!!!<h1>

​

Hello!!!

​로 출력이 된다. v-html로 지정한 경우는 HTML 태그가 유효하게 표시되는 것을 알 수 있다.

 

 

 

 

사용할 수 있는 데이터의 종류

기본적인 데이터

​

기본적인 데이터의 종류에는 숫자형, 문자형, 불린형 등이 있다. Vue.js도, JavaScript와 같이 입력된 값에 따라서 데이터형을 자동으로 결정한다. 숫자 값이 입력되면 숫자형, 문자열이 입력되면 문자형, 불린형이 입력되면 불린형으로 자동으로 정해진다.

​

​

4) 3종류의 데이터 형을 표시해 보자.

 

​

<h2>여러가지 데이터형을 표시하는 예제</h2>

<div id="app">

   <p>{{ myNumber }}</p>

   <p>{{ myText }}</p>

   <p>{{ myBool }}</p>

</div>

​

<script>

   new Vue({

      el: '#app',

      data: {

      myNumber:12345,

      myText:'Hello!!!',

      myBool:true

      }

   })

</script>

를 코드를 적어보고 출력을 해본다면

​

12345

Hello!!!

true

라고 출력이 될 것이다.

​

 

배열

배열에 값을 넣어두고 배열 자체를 다루거나 인덱스를 지정하여 배열 값에 접근 할 수 있다.

​

new Vue ({

el: "#ID명" ,

data: { <배열명>: [<값1>,<값2>,<값3>, ...]

}

})

{{ 배열명[인덱스] }}

​

​

예) 배열값을 표시해본다면

​

배열전체와 배열의 0번 인덱스를 지정한다.

​

<div id="app">

<p>{{ myArray }}</p>

<p>{{ myArray[1] }}</p>

</div>

​

<script>

new Vue({

el: '#app',

data: {

myArray: ['가', '나', '다']

}

})

​

출력을 한다면

​

['가', '나', '다']

​

가

​

이렇게 출력이 된다.

​

 

오브젝트형

​

Vue.js는 오브젝트 데이터도 사용 가능하다.

"키와 밸류의 한쌍" 으로 오브젝트 데이터를 준비해두고 "<오브젝트명>,<키이름>"으로 지정하면 값을 표시할 수 있다.

​

​

  <h2>예제</h2>
  <div id="app">
      <p>{{ myTea }}</p>
      <p>{{ myTea[1].name }} {{ myTea[1].price }}원</p>
  </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>

예)로 이렇게 작성하고 출력을 해보면

​

[ { "name": "아메리카노", "price": 600 }, { "name": "카페라떼", "price": 500 }, { "name": "복숭아티", "price": 500 } ]

​

카페라떼 500원

​

이 출력이 된다.

 

 

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

data: 의 내부를 보면 데이터 전체 구조를 알 수 있도록 이해하기 쉬운 구조로 제공된다.

실제의 데이터로 어떻게 읽어 들이고 있는지 확인 하고싶을경우에 $data를 사용한다.

​

<h2>오브젝트 데이터의 내부를 확인하는 예제</h2>
<div id="app">
    {{ $data }}
    <hr>
   <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>

코드를 적고 출력해보면

​

{ "myText": "Hello!!!", "myNumber": 12345, "myBool": true, "myArray": [ 1, 2, 3, 4, 5 ] }

---

• myText : Hello!!!
• myNumber : 12345
• myBool : true
• myArray : [ 1, 2, 3, 4, 5 ]

​

전체의 데이터가 표시되고 데이터가 하나씩 표시됨을 알 수 있다.