728x90
반응형
먼저 Vue의 기본 코드를 살펴보겠습니다!!
1. Vue 인스턴스 만들기 : new Vue, el, data
아래와 같이 Script에 작성하면 Vue를 사용할 수 있습니다.
new Vue({Vue 인스턴스 내용}) 또는 var 변수명 = new Vue({Vue 인스턴스 내용})
<div id = "ID명">
</div>
<script>
new Vue({
el: '#ID명',
// class를 지정해도 상관없고 '.class명'으로 표기하면 됩니다.
data: {
프로퍼티명1 : 값1,
프로퍼티명2 : 값2
}
})
</script>
보통 Vue의 구성은 아래를 참고하시면 됩니다!
new Vue({
el : 어느 HTML 요소를 연결할 것인가
data : 어떤 데이터인가
methods : 어떤 처리를 하는가
computed : 어떤 데이터를 사용하여 계산하는가
watch : 어느 데이터를 감시하는가
})
2. 데이터 표시 방법
데이터를 표시할 때는 이중 중괄호 {{ 데이터 }} 즉 머스태시(Mustache) 태그로 표시합니다.
머스태시 : 콧수염
더블쿼테이션 : " "
싱클쿼테이션 : ' '
따옴표 자체를 쿼테이션이라고 합니다.
알아두시면 좋을 것 같네요~
( ' { ' 중괄호 표시가 눕히면 수염과 비슷하다고 해서 머스태시(콧수염)이라고 부른다고해요ㅎㅎ )
그럼 예제를 통해서 데이터 표시 방법을 한 번 볼게요!
예제1) 데이터 표시 예시( {{ 프로퍼티명 }}, v-text )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Hello</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>데이터를 있는 그대로 표시하는 예제</h2>
<div id="app">
<p> {{ myText1 }}</p>
<!-- {{ 프로퍼티명 }} 대신 <p v-text="myText1"></p>으로 사용해도 됩니다. -->
<!-- <p v-text = "myText1"></p> -->
<!-- <p v-text = "myText2"></p> -->
<p> {{ myText2 }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText1: "Hello!!!",
myText2: "World!!!!"
}
})
</script>
</body>
</html>위의 방법처럼 Vue를 생성해 app이라는 id와 연결하고 아래와 같이 두가지 방법으로 변수를 넣을 수 있습니다!
1. 머스태시( {{ }} )를 통해 데이터를 입력하는 방법
2. v-text를 이용해 p요소 안에 변수를 같이 묶어주는 방법
Vue는 Script와 다르게 바깥에 데이터(변수)를 지정할 수 있네요
또한, 보통 HTML에서는 더블 쿼테이션(" "), Java Script에서는 싱글 쿼테이션(' ')을 사용합니다.
어떤 것을 사용해도 상관없지만 위와 같이 사용하는 것을 추천하고 있다고 하네요!!
예제2) 데이터 표시 추가 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Hello</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>데이터를 있는 그대로 표시하는 예제</h2>
<div id="app">
<p v-text = "myText1"></p>
<p v-text = "myText2"></p>
</div>
<div class="app1">
<p v-text = "myText3"></p>
<p v-text = "myText4"></p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText1: "Hello!!!",
myText2: "World!!!!"
}
})
new Vue({
el: ".app1",
data: {
myText3: "Hello!!!",
myText4: "World!!!!"
}
})
</script>
</body>
</html>이렇게 id, class마다 vue를 생성하면 모든 텍스트는 설정이 됩니다.
하지만, div, p 등의 요소를 el로 선택하면 가장 첫 번째 자식요소만 출력이 됩니다.
3. 기본적인 데이터의 종류(숫자형, 문자형, 불린형)
vue.js도 JavaScript와 같이 입력된 값에 따라서 데이터형을 자동으로 결정합니다.
(1) 숫자값이 입력되면 숫자형
(2) 문자열이 입력되면 문자형
(3) 불린형(참, 거짓)이 입력되면 불린형으로 자동으로 결정
예제3) 데이터 종류 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>datatext1</title>
</head>
<body>
<div id="app">
<p>{{ myNumber }}</p>
<p>{{ myText }}</p>
<p>{{ myBool }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myNumber: 123,
myText: "Hello",
myBool: true
}
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<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: 10000,
myName: "홍길동"
}
})
</script>
</body>
</html>위의 두 코드와 같이 텍스트에는 쿼테이션(' ', " ")을 사용하고 숫자형은 숫자만, 불린형은 ture, false만 표시합니다.
머스태시에도 수식을 적용할 수 있어서 2번째 코드처럼 사용하시면 값이 계산되거나 원하는 결과를 출력할 수 있네요!
substr(0,1)은 문자를 0의 위치에서 한 개 출력한다는 말입니다. 따라서, '홍길동'의 '홍'만 출력이 되네요ㅎㅎ
4. 배열의 사용 방법
◎ 배열은 대괄호[] 를 사용합니다.
바로 예시로 넘어가볼게요!!
예제4) 배열 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>배열로 값을 표시하는 예제</h2>
<div id="app">
<p>{{ myArray }}</p>
<p>{{ myArray[1] }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myArray: ['다즐링', '얼그레이', '실론']
}
})
</script>
</body>
</html>위의 방법처럼 배열을 지정하고 사용할 수 있습니다.
myArray는 ['다즐링', '얼그레이', '실론']이 출력되고 myArray[1]은 다즐링이 출력됩니다.
5. 오브젝트형(객체형)의 사용 방법
▷ 오브젝트는 중괄호를 사용해서 지정합니다.
▷ 배열은 동일한 데이터의 형태(자료형, 숫자형 등)만 지정이 되지만, 오브젝트는 다른 형태의 데이터도 지정이 됩니다.
바로 예시로 넘어가볼게요!
예제5) 오브젝트 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>오브젝트 데이터를 표시하는 예제</h2>
<p>{{ myTea }}</p>
<p>선택한 티의 종류 : {{ myTea.name }}<br> 가격 : {{ myTea.price }}원</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myTea: {name:'다즐링', price: 600}
}
})
</script>
</body>
</html>
예제6) 오브젝트의 여러줄 출력 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>Javascript로 만든 데이터를 표시하는 예제</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}
];
new Vue({
el: '#app',
data:{
myTea: teaList
}
})
</script>
</body>
</html>출력)
[ { "name": "다즐링", "price": 600 }, { "name": "얼그레이", "price": 500 }, { "name": "실론", "price": 500 } ]
얼그레이 500원
예제7) 오브젝트 데이터의 내부를 확인하는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>오브젝트 데이터의 내부를 확인하는 예제</h2>
<div id="app">
{{ $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>
</body>
</html>
이렇게 {{ $data }}를 사용하면 위와 같이 객체 데이터가 모두 { } 안에 나타나게 됩니다.
마무리 문제) 학습한 다양한 데이터들의 출력 확인 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>final</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>다양한 데이터의 출력</h1>
<div id="app">
<p>{{ myText }}</p>
<p v-text="myText"></p>
<p v-html="myHtmlText"></p>
<p>숫자 {{ myNumber }}</p>
<p>부울형 {{ myBool }}</p>
<p>배열 {{ myArray }}</p>
<p>오브젝트 {{ myObject }}</p>
{{ $data }}
</div>
<script>
new Vue({
el: '#app',
data:{
myText: 'Vue를 배워 봅시다. 이렇게 그냥 출력할 수도 있고',
myHtmlText: '<h3>태그를 넣어서 출력할 수도 있습니다.</h3>',
myNumber: 12345,
myBool: true,
myArray: [1, 2, 3, 4, 5],
myObject: [
{name:'다즐링', price:600},
{name:'얼그레이', price:500},
{name:'실론', price:500}
]
}
})
</script>
</body>
</html>
Vue.js 입문 2장에서 배운 모든 것들을 한 번에 출력되도록 만들었습니다.
자바스크립트보다 훨씬 간단하지만 사용 방법이 달라 익히기가 쉽지 않네요,,ㅎㅎ
그래도 달려보겠습니다!!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 유저 입력 연결(v-model) (0) | 2022.12.22 |
|---|---|
| [java script] Vue.js 속성(v-bind, a, class) (0) | 2022.12.22 |
| [java script] Vue.js 입문 start (0) | 2022.12.21 |
| [java script] DOM 노드 추가, 삭제 연습 문제 (0) | 2022.12.20 |
| [java script] DOM에서 노드 추가, 삭제하기 (0) | 2022.12.20 |
