2. Vue.js 시작하기

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.데이터명 쓰기)

 

 

 

 

계속 추가중..