[01] Vue 인스턴스 만들기 : new Vue
Vue 인스턴스 서식
new Vue({/*내용*/})또는
var 변수명 = new Vue({/*내용*/})
el 옵션
"어떤 HTML 요소와 연결할것인가?"를 의미한다.
data 옵션
"어떤 데이터가 있는가?"를 의미한다.
사용 예시
new Vue({ el:"#ID명", data:{ 프로퍼티명:값, 프로퍼티명:값 } })
이 외에도 다양한 옵션이 존재하며, 이는 뒤에서 차근차근 포스팅할 예정이다.
[02] 데이터를 그대로 표시 : {{데이터}}
이중중괄호"{{}}"로 표시
데이터를 있는 그대로 출력하려면 이중 중괄호를 사용하면 된다.
서식
{{프로퍼티명}}
프로퍼티 : 변수명이라고 생각하면 될 듯하다.
HTML을 실행할 때 프로퍼티의 값이 변경되어 표시된다.
이를 데이터 바인딩이라 한다.
데이터를 있는 그대로 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <p>{{mytext}}</p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ mytext:"hello vue world!" } }) </script>
💕정리
el : HTML 태그 요소 - vue 인스턴스 연결
data : HTML 원하는 곳에 데이터 바인딩
v-text로 표시
정석대로 데이터 바인딩을 하려면 "v-text"를 사용해야한다.
워낙 자주 사용하는 기능이라서 {{}}와 같은 간편한 서식을 추가해준 것이다.
서식
<태그명 v-text="프로퍼티명"></태그명>
확실히 {{}} 방식이 더 간결하다.
데이터를 v-text로 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <p v-text="mytext"></p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ mytext:"hello vue world!" } }) </script>
v-html로 표시
{{}}나 v-text는 텍스트 그대로 표시하지만,
HTML로 표시하고자 할 때는 v-html를 사용한다.
서식
<태그명 v-html="프로퍼티명"></태그명>
데이터로 HTML를 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <p>{{mytext}}</p> <p v-text="mytext"></p> <p v-html="mytext"></p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ mytext:"<h1>Hello Vue World!</h1>" } }) </script>
{{}}, v-text, v-html 비교를 위해 3번의 p태그가 있다.
결과
[03] 사용할 수 있는 데이터의 종류
기본적인 데이터
숫자형, 문자형, 불린형 등이 있다.
Vue.js도 Javascript처럼 데이터형이 자동으로 정해진다.
여러가지 데이터 형을 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <p>{{mytext}}</p> <p>{{mynumber}}</p> <p>{{myboolean}}</p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ mytext:"hi", mynumber:5000, myboolean:true } }) </script>
결과
Javascript를 이용하여 표시하는 예제
간단한 연산을 하고나서 데이터 바인딩을 하고 싶을 때 아래처럼 적용하면 된다.
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <p>{{mytext+" by se_bb"}}</p> <p>{{mynumber*2}}</p> <p>{{mytext.substr(0,2)}}</p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ mytext:"hello", mynumber:5000 } }) </script>
결과
배열
서식
new Vue({ el:"#id명", data:{ 배열명:[값1, 값2, 값3, ...] } })
데이터 표시할 때 서식
{{배열명[인덱스값]}}
배열값을 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <h1>배열로 값을 표시하는 예제</h1> <p>{{arr}}</p> <p>{{arr[0]}}</p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ arr:['다즐링','얼그레이','실론'] } }) </script>
결과
오브젝트형
key.value 형식이다.
###오브젝트형 데이터를 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="one"> <h1>오브젝트 데이터를 표시하는 예제</h1> <p>{{obj}}</p> <p>{{obj.name +' '+obj.price}}</p> </div> </body> </html> <script> new Vue({ el : "#one", data:{ obj:{name:'다즐링', price:5000} } }) </script>
결과
미리 준비한 데이터 사용하기
Javascript로 미리 만들어놓은 데이터를 vue로 표시해보자
Javascript로 만든 데이터를 표시하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="main"> <h1>JavaScript 데이터를 표시하는 예제</h1> <p>{{myTea}}</p> <!--배열 전체 표시--> <p>{{myTea[1].name +' '+myTea[1].price}}</p> <!--n번째 배열 값 추출--> </div> </body> </html> <script> var teaList=[ {name:'다즐링', price:6000}, {name:'얼그레이', price:5000}, {name:'실론', price:5000} ]; new Vue({ el : "#main", data:{ myTea:teaList } }) </script>
결과
데이터의 내부를 확인하고 싶을 때
지금이야 뭐 간단하지만 Vue 인스턴스 내부가 복잡해지면 data 옵션 구조를 파악해야할 때가 있을 것이다.
그럴 때 사용하는 것이 "$data"이다.
$data : Vue 인스턴스가 가지고 있는 모든 데이터
전체 데이터를 확인하는 예제
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="main"> <h1>전체 데이터를 표시하는 예제</h1> <p>{{$data}}</p> <br><br> <li v-for="(item, key) in $data">{{key}} : {{item}}</li> </div> </body> </html> <script> var teaList=[ {name:'다즐링', price:6000}, {name:'얼그레이', price:5000}, {name:'실론', price:5000} ]; new Vue({ el : "#main", data:{ myTea:teaList, myText:"안녕하세요 열업훈", myNumber:2022, myBool:true, myArray:[1,2,3,4,5] } }) </script>
결과
💫실습해봅시다
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>다양한 데이터의 출력</h1> <p>{{myText}}</p> <p v-text='myText'></p> <p v-html='myHtmlText'></p> <p>{{typeof(myNumber)}} {{myNumber}}</p> <p>{{typeof(myBool)}} {{myBool}}</p> <p>{{typeof(myArray)}} {{myArray}}</p> <p>{{typeof(myObject)}} {{myObject}}</p> <br> <p>{{$data}}</p> </div> </body> </html> <script> new Vue({ el:'#app', data:{ myText:'Vue를 배워 봅시다. 이렇게 그냥 출력할 수도 있고', myHtmlText:'<h3>태그를 넣어서 출력할 수도 있습니다.</h3>', myNumber:12345, myBool:true, myArray:[1,2,3,4,5], myObject:[ {name:'다즐링', price:6000}, {name:'얼그레이', price:5000}, {name:'실론', price:5000} ] } }) </script>
결과
