728x90
반응형
Vue.js?
: 웹 프론트엔드 프레임워크, 컴포넌트 기반의 SPA를 구축할 수 있게 해 주는 프레임 워크 컴포넌트 -> 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI 요소 -> 재사용 가능하도록 구조화한 것
- Anfular JS, React 라이브러리는 SPA를 만드는 것이 가능(사이트 전체를 제대로 구성하고 만들 때, 환경설정과 상세내용을 만듦)
= 가벼운 소규모 어플리케이션을 만드는 것을 목표로 만들어짐
= 데이터와 표시(View)를 연결해 주는 역할
뷰 연결 스크립트
<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
Vue 인스턴스 만들기 : new Vue
new Vue({
el : 어떤 HTML 요소를 연결할 것인지,
data : 어떤 데이터인지,
method : 어떤 기능을 하는지(함수처리),
computed : 어떤 데이터를 사용하여 계산하는지,
watch : 어떤 데이터를 감시하는지
})
데이터 표시하는 방법
1) {{변수명}} 사용하기
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
el: '#app',
data: {
myText: 'Hello!!!'
}
})
</script>
</body>
2) v-text 사용하기
<body>
<div id="app">
<p v-text="myText"></p>
<p v-text="myName"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
myText: 'Hello!!!',
myName: 'Dodo'
}
})
</script>
</body>
3) v-html 사용하기
⇒ html 태그들을 같이 써도 v-html이 해당 태그들을 처리하여 출력함
⇒ v-text로 myText를 출력했다면 해당 태그들까지 그대로 출력이 된다.
<body>
<div id="app">
<!-- <p> {{myText}} </p> -->
<p v-text="myName"></p>
<p v-html="myText"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
myText: '<h2>Vue.js 사용하기</h2><hr><font color=red>Vue.js</font>',
myName: 'Dodo'
}
})
</script>
</body>
데이터 출력 활용
더보기
<body>
<div id="app">
<!--데이터 출력하기-->
<p> {{myText}} </p>
<p v-text="myName"></p>님 반갑습니다.
<p v-html="myText"></p>
<p> {{"안녕하세요 " + myName}} 님 반갑습니다. </p>
<p>{{myNumber*5}}</p>
<p>{{myBool}}</p>
<!--글자 잘라내기-->
<p>{{myText.substr(2,5)}}</p> <!--2번방부터 5개를 잘라라-->
<p>{{myText.substring(2,5)}}</p> <!--2번방부터 4번방까지를 잘라라-->
<p>{{myText.slice(2,5)}}</p> <!--2번방부터 4번방까지를 잘라라-->
<!--문자의 위치 찾기 o-->
<p>{{myText.indexOf('o', 20)}}</p> <!--20번째부터 o를 찾음-->
<!--문자의 마지막 위치 찾기 o-->
<p>{{myText.lastIndexOf('o', 20)}}</p> <!--20까지만 o를 찾음-->
<!--문자열 자르기, 구분기호 배열 형태의 결과로 출력함-->
<p>{{myText.split(' ')}}</p>
<!--문자열 연결하기-->
<p>{{myName.concat('님~ 반갑습니다.')}}</p>
<!--myText를 대문자로 변경해서 표시-->
<p>{{myText.toUpperCase()}}</p>
<!--myText를 소문자로 변경해서 표시-->
<p>{{myText.toLowerCase()}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myText: '<h2>Vue.js</h2> <hr> <font color=red> Vue.js </font>',
myName: 'Dodo',
myNumber: 12345,
myBool: true
}
})
</script>
</body>
데이터 입력 받는 방법 : prompt() 사용
<script>
new Vue({
el: '#app',
data: {
myName: prompt('이름을 입력하세요', 'Dodos'), <!--기본 값은 Dodos임-->
}
})
</script>
데이터의 배열 출력
<body>
<div id="app">
<!--데이터의 배열-->
<p>{{myArray}}</p>
<p>{{myArray[0]}} {{myArray[1]}} {{myArray[2]}}</p>
<p>{{myArray[0] + " " + myArray[1] + " " + myArray[2]}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myArray: ['다즐링', '얼그레이', '실론']
}
})
</script>
</body>
- 배열의 오브젝트형 데이터
<body>
<div id="app">
<p>{{myTea}}</p>
<p>{{myTea[0].name}} : {{myTea[0].price}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myTea: [
{name: '다즐링', price: 600},
{name: '얼그레이', price: 500},
{name: '실론', price: 800}
]
}
})
</script>
</body>
- 오브젝트 배열 선언 후 사용하기
1) var 배열명 = []; 으로 선언
2) 선언한 배열을 Vue에서 불러와 사용함
<body>
<div id="app">
<!--배열의 오브젝트형 데이터-->
<p>{{myTea}}</p>
<p>{{myTea[0].name}} : {{myTea[0].price}}</p>
</div>
<script>
var teaList = [
{name: '다즐링', price: 600},
{name: '얼그레이', price: 500},
{name: '실론', price: 800}
];
new Vue({
el: '#app',
data: {
myTea: teaList
}
})
</script>
</body>
배열을 반복문으로 출력하기 + 리스트 형태로 출력하기
<!--변수명에 배열의 값을 출력한다.-->
<li v-for="변수명 in myArray"> {{변수명}}</li><body>
<div id="app">
<!--배열을 반복문으로 출력하기, 리스트 형태로 출력하기-->
<ol>
<li v-for="aa in myArray"> {{aa}}</li>
</ol>
<ul>
<li v-for="aa in myArray"> {{aa}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
myArray: ['다즐링', '얼그레이', '실론']
}
})
</script>
</body>반응형
날짜 출력하기
<body>
<div id="app">
<!--날짜 출력하기-->
<p>{{toDay}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
toDay: new Date()
}
})
</script>
</body>
데이터의 내부(구조) 확인하는 방법
<body>
<body>
<div id="app">
<!--데이터의 구조 확인하는 법-->
<p>{{$data}}</p>
</div>
<script>
var teaList = [
{name: '다즐링', price: 600},
{name: '얼그레이', price: 500},
{name: '실론', price: 800}
];
new Vue({
el: '#app',
data: {
myText: '<h2>Vue.js</h2> <hr> <font color=red> Vue.js </font>',
myName: prompt('이름을 입력하세요', 'Dodos'),
myName2: 'dodos',
myNumber: 12345,
myBool: true,
myArray: ['다즐링', '얼그레이', '실론'],
myArray2: ['1', '2', '3'],
myTea: teaList
}
})
</script>
</body>
</body>
구조를 리스트로 출력하기
더보기
<body>
<div id="app">
<!--데이터의 구조 확인하는 법-->
<li v-for = "(item,key) in $data "> {{key}} : {{item}}</li>
</div>
<script>
var teaList = [
{name: '다즐링', price: 600},
{name: '얼그레이', price: 500},
{name: '실론', price: 800}
];
new Vue({
el: '#app',
data: {
myText: '<h2>Vue.js</h2> <hr> <font color=red> Vue.js </font>',
myName: prompt('이름을 입력하세요', 'Dodos'),
myName2: 'dodos',
myNumber: 12345,
myBool: true,
myArray: ['다즐링', '얼그레이', '실론'],
myArray2: ['1', '2', '3'],
myTea: teaList
}
})
</script>
</body>
728x90
반응형