[Vue 기초] 데이터 바인딩, v-for, 이벤트 리스너 추가하는 법

Vue 데이터 바인딩하는 법

<script>
export default {
  name : 'App',
  data(){
    return {
      msg : '안녕하세요',
    }
  }
</script>

① <script> 태그 안에 data(){ return{ }} 안에 데이터를 저장

 

<span>메세지: {{ msg }}</span>

② html 안에 {{ 저장한 데이터 }}를 입력

 

Vue 반복문 v-for

data(){
  return {
    menu : ['Home', 'Shop', 'About']
  }
}

- 데이터 안에 menu라는 Array 자료형이 있음

 

<div class="menu">
  <a v-for="작명 in menu" :key="작명"> {{ 작명 }}</a>
</div>

해당 html의 v-for부분에서의 작명부분은 menu 안의 자료형의 데이터가 됨

- 즉, 해당 html의 작명 데이터는 Home, Shop, About이 한 개 씩 들어가게 됨

menu부분은 Array 자료의 개수만큼 돌게 됨

- 즉, 해당 html의 menu부분은 자료형 개수인 3이 들어가게 됨

쉽게 생각하면 이 부분은 자바스크립트의 변수.length로 생각하면 될듯

 

v-for 안에 변수는 2개까지 작성 가능

<div class="menu">
  <a v-for="(작명,i) in 메뉴들" :key="i"> {{ 작명 }}</a>
</div>

v-for에서는 변수를 2개까지 작명 할 수 있음

하지만 두번째로 들어가는 변수는 0, 1, 2, 3....과 같이 1씩 증가하는 정수로 고정 됨

- 2개의 변수를 사용했을때는 두 번째 변수명은 i로 하고 :key안에 넣는게 관습임

 

Vue 이벤트 리스너 추가하기

<template>
  <div>
    <button @click="handleClick">버튼 클릭</button>
  </div>
</template>

① 이벤트 리스너를 추가 할 html 요소에 '@click' 과 같은 호출 할 메서드 이름을 넣음

 

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log("버튼이 클릭되었습니다.");
    }
  }
}
</script>

② Vue 컴포넌트의 'methods'안에 이벤트 처리 동작을 정의

 

함수명을 정의할때 methods 안에 함수명(){ 실행할 코드}를 입력하면 됨

- 정의한 데이터를 끌고와서 사용하고 싶을때는 this.데이터명 이런식으로 사용해야 함