Vue 인스턴스
<template>
<!--HTML 넣는곳-->
</template>
<script>
<!--JS 넣는곳-->
export default {
name: "hi"
}
</script>
<style>
<!--CSS 넣는곳-->
</style>
new Vue를 통해 인스턴스를 생성하고 안에 el, data등 옵션을 넣어 인스턴스를 생성하고 화면을 컨트롤 할 수 있다
우선 우리가 사용할 파일은 기존의 App.vue 파일이다
데이터 바인딩
{{데이터바인딩}}은 JS부분의 데이터를 HTML로 넣어준다
데이터는 object 자료로 넣어둘것 (자료이름 : 자료내용)
데이터바인딩 사용 이유?
- 유지보수가 편해진다 -> 자주 변하는 데이터
- Vue의 실시간 랜더링 기능을 사용하기 위해서
<template>
<div>
<h3 :style="나도바인딩">바인딩</h3>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
나도바인딩 : 'color : blue',
}
},
components: {
}
}
</script>
위 코드와 같이 HTML속성도 데이터 바인딩이 가능하다
:속성 = "데이터이름"
Vue의 반복문 v-for
<template>
<div class="menu">
<a v-for="(abc,i) in menus" :key="i">{{ i }}</a>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
menus : ['Home','Products','About'],
}
},
components: {
}
}
</script>
<태그 v-for="작명 in 횟수"> (:key="작명"도 필요)
- 횟수에 자료형(array/object)을 넣으면 자료형의 데이터 갯수만큼 동작한다
- 작명한 변소는 데이터안의 자료가 된다
->menus:['home'.'product'.'about'] 면 3개
여기서 key=""의 용도
- 반복문을 쓸때 꼭 필요하다
- 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용
(menus대신 key값을 넣으면 각각의 키값 출력 0 1 2)
Event Handler
vue는 실시간 랜더링이 되어서 HTML이 자동으로 변해서
다양한 이벤트들을 쉽게 사용할수있다
HTML 클릭시 코드 실행하는 법
예를들어 클릭하면 +1씩 카운트되는 버튼을 구현해보자
Javascript로 구현하려면 onclick 를 통해 +1시키고 HTML에 반영해준다
하지만 Vue는 v-on: 또는 @click를 통해 데이터 바인딩된 변수를 증가시킨다
변수가 변경되면 실시간 반영이 되어 따로 코드를 짤 필요가 없다
<template>
<div>
<button @click='클릭수++'>나는버튼</button>
<span>클릭 수 : {{클릭수}}</span>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
클릭수 :0,
}
},
components: {
}
}
</script>
이렇게 데이터바인딩으로 data에 있는 "클릭수" 의 값을 증가시켰다
Vue에서 함수쓰는법
(아래 코드는 위 eventHandler의 기능을 함수로 만든 것)
<template>
<div>
<h4>{{products}}</h4> <!--데이터바인딩으로 리스트 가져오기-->
<p>{{pay}}</p> <!--데이터바인딩으로 리스트 가져오기-->
<button @click="increase">허위매물신고</button>
<span>신고 수 : {{신고수}}</span>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
신고수 : 0,
products : '역삼동 원룸',
pay : '50만원',
}
},
methods :{
increase(num){
this.신고수++;
},
},
components: {
}
}
script안에 methods:{ 함수(){} } 의 형식이고
위 코드를 보면 increase 이름의 함수를 만든것이 보인다 -> JavasScript와 비슷하다
(함수안에서 데이터를 쓸 때는 this.데이터명 쓰기)
계속 추가중..
'Vue > Vue' 카테고리의 다른 글
5. get방식 통신 (Vue + Springboot 연동 3) (0) | 2021.11.18 |
---|---|
4. axios & vuetify (Vue + Springboot 연동 2) (0) | 2021.11.18 |
3. Vue + Springboot 연동 1 (0) | 2021.11.17 |
1. Vue.js 의 구조와 빌드하기 (0) | 2021.11.14 |
0. Vue.js (0) | 2021.11.14 |