Vue Instance

💜poiuyy0420·2022년 8월 18일
0

Vue

목록 보기
2/8

Vue 인스턴스 만들기

모든 Vue 애플리케이션은 다음 기능을 사용하여 새 Vue 인스턴스를 생성 하여 시작한다.

new Vue ({ Vue 인스턴스 내용 })
var 변수명 = new Vue({ Vue 인스턴스 내용 })

vue 인스턴스에는 여러가지 옵션이 있는데 기본적으로 el,data 옵션이 있다.

el 옵션 : 어떤 HTML 요소와 연결할지 지정 한다.
HTML 중에 <태그명 id="ID명"> 요소를 작성해 두고 el 옵션으로 el: "#ID명"으로 지정하는 것으로 그 요소와 연결된다.

data 옵션 : 어떤 데이터가 있는지를 지정한다.
data : {데이터부분} 에서 데이터부분 영역에 <프로퍼티명> : <값> 과 같은 형식으로 작성한다.

Vue.js에서는 데이터 이름을 프로퍼티 라고 한다.

<div id="ID명">
</div>

new Vue ({
	el: "#ID명",
	data: { 프로퍼티명:, 프로퍼티명:} 
})

데이터 표시

데이터 바인딩의 가장 기본 형태는 Mustache (이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation)이다.

HTML의 텍스트 부분에 {{ 프로퍼티명 }} 이라고 작성하면 된다.

<div id="app">
  <p> {{ myText }} </p>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
      myText: 'Hello'
    }
  })
</script>

v-text

데이터를 있는 그대로 표시하는 것은 머스태시 태그로 감싸기만 하면 되지만 이는 자주 사용되는 기능이기 때문에 특별히 제공되는 방식이다.
Vue.js에서 기본적으로 HTML 요소에 대해서 실행하는 명령은 디렉티브 이다.

디렉티브라는 것은 요소에 대해서 Vue가 어떤 일을 하는지를 지정하는 명령어로써 v-가 붙어 있다. 데이터를 있는 그대로 표시하는 기능도 디렉티브를 사용한 방식으로 작성하는 것이 v-text 이다.

<div id="app">
  <p v-text="myText"></p>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
      myText: 'Hello'
    }
  })
</script>

v-html

HTML로 표시하고자 할 때는 v-html을 사용한다.

<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>

데이터 종류

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

배열

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

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

오브젝트형

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

<div id="app">
  <p> {{ myTea }} </p>
  <p> {{ myTea.name }} {{ myTea.price }}원 </p>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
      myTea: {name:'다즐링', price:600}
    }
  })
</script>

미리 준비한 데이터

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

<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}
  ];

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

데이터의 내부 확인

Vue.js에서는 데이터를 많이 만들었다 하더라도 data:의 내부를 보면 데이터 전체 구조를알 수 있도록 이해하기 쉬운 구조로 제공해 준다.
실제로 데이터를 어떻게 읽어 들이고 있는지를 확인하고 싶을 경우에는 $data를 사용한다.
$data는 Vue 인스턴스에서 갖고 있는 모든 데이터다.

<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>

profile
안녕하세요 :)

0개의 댓글