Vue 메소드 완벽 가이드: 초보자를 위한 포괄적 설명

Vue 메소드 완벽 가이드: 초보자를 위한 포괄적 설명

Vue 메소드란?

Vue 메소드는 'methods' 속성 아래 Vue 인스턴스에 속하는 함수입니다. 이 메소드는 이벤트 처리(v-on)와 함께 사용하거나 복잡한 작업을 수행하는 데 유용합니다. 또한, 이벤트 처리 이외의 다양한 작업에도 활용할 수 있습니다.

Vue '메소드' 속성

Vue 인스턴스에는 값을 저장할 수 있는 'data' 속성 외에도 함수를 저장할 수 있는 'methods'라는 속성이 있습니다. 다음 예제는 Vue 인스턴스에 메소드를 저장하는 방법을 보여줍니다.

const app = Vue.createApp({
  data() {
    return {
      text: ''
    }
  },
  methods: {
    writeText() {
      this.text = 'Hello World!'
    }
  }
})

this 키워드는 메소드 내부에서 데이터 속성을 참조할 때 사용합니다. 예를 들어, 아래 코드는 writeText 메소드를 클릭 이벤트와 연결하는 방법을 보여줍니다.

<div v-on:click="writeText"></div>

예제

아래 코드는 v-on 지시어를 사용하여 '클릭' 이벤트를 수신하고, 이벤트가 발생하면 'writeText' 메소드가 호출되어 텍스트가 변경됩니다.

<div id="app">
  <p>Click on the box below:</p>
  <div v-on:click="writeText">
    {{ text }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: ''
      }
    },
    methods: {
      writeText() {
        this.text = 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

이벤트 객체를 사용하여 메소드 호출

이벤트가 발생하여 메소드가 호출될 때 기본적으로 이벤트 객체가 메소드와 함께 전달됩니다. 이벤트 객체에는 대상 객체, 이벤트 유형, 마우스 위치 등 유용한 데이터가 많이 포함되어 있습니다.

예제

아래 코드는 mousemove 이벤트를 수신하고, 마우스 포인터의 위치에 따라 배경색을 변경하는 방법을 보여줍니다.

<div id="app">
  <p>Move the mouse pointer over the box below:</p>
  <div v-on:mousemove="mousePos"
       v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}"></div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        xPos: 0,
        yPos: 0
      }
    },
    methods: {
      mousePos(event) {
        this.xPos = event.offsetX
        this.yPos = event.offsetY
      }
    }
  })
  app.mount('#app')
</script>

인수 전달

이벤트가 발생할 때 메소드에 인수를 전달할 수 있습니다. 아래 예제는 버튼을 클릭하여 무스 목격 횟수를 증가시키는 방법을 보여줍니다.

<div id="app">
  <img src="img_moose.jpg">
  <p>{{ "Moose count: " + count }}</p>
  <button v-on:click="addMoose(+1)">+1</button>
  <button v-on:click="addMoose(+5)">+5</button>
  <button v-on:click="addMoose(-1)">-1</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      addMoose(number) {
        this.count += number
      }
    }
  })
  app.mount('#app')
</script>

인수와 이벤트 객체를 모두 전달하기

이벤트 객체와 다른 인수를 모두 전달하고 싶은 경우, 예약된 이름인 $event를 메소드 호출 위치에서 사용할 수 있습니다.

예제

아래 코드는 이벤트 객체와 텍스트를 모두 메소드에 전달하는 방법을 보여줍니다.

<div id="app">
  <img src="img_tiger.jpg"
       id="tiger"
       v-on:click="myMethod($event,'Hello')">
  <p>{{ msgAndId }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        msgAndId: ''
      }
    },
    methods: {
      myMethod(e, msg) {
        this.msgAndId = msg + ', ' + e.target.id
      }
    }
  })
  app.mount('#app')
</script>

더 큰 예제

아래 예제는 각 동물에 대해 세 가지 다른 증분으로 세 마리의 다른 동물을 세는 방법을 보여줍니다. 이벤트 객체와 증분 숫자를 모두 전달하여 이를 달성합니다.

<div id="app">
  <div id="tigers">
    <img src="img_tiger.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,-1)">-1</button>
  </div>
  <div id="moose">
    <img src="img_moose.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,-1)">-1</button>
  </div>
  <div id="kangaroos">
    <img src="img_kangaroo.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,-1)">-1</button>
  </div>
  <ul>
    <li>Tigers: {{ tigers }} </li>
    <li>Moose: {{ moose }} </li>
    <li>Kangaroos: {{ kangaroos }} </li>
  </ul>
</div>

<script src="https://unpkg```html


                                                
                

                
                
                
  
  
  
  
  
  

                

                
                














                
                

  
Vue 메소드 완벽 가이드: 초보자를 위한 포괄적 설명
  
  
Vue 메소드란?
  
Vue 메소드는 'methods' 속성 아래 Vue 인스턴스에 속하는 함수입니다. 이 메소드는 이벤트 처리(v-on)와 함께 사용하거나 복잡한 작업을 수행하는 데 유용합니다. 또한, 이벤트 처리 이외의 다양한 작업에도 활용할 수 있습니다.

  
Vue '메소드' 속성
  
Vue 인스턴스에는 값을 저장할 수 있는 'data' 속성 외에도 함수를 저장할 수 있는 'methods'라는 속성이 있습니다. 다음 예제는 Vue 인스턴스에 메소드를 저장하는 방법을 보여줍니다.

  
const app = Vue.createApp({
  data() {
    return {
      text: ''
    }
  },
  methods: {
    writeText() {
      this.text = 'Hello World!'
    }
  }
})

  
this 키워드는 메소드 내부에서 데이터 속성을 참조할 때 사용합니다. 예를 들어, 아래 코드는 writeText 메소드를 클릭 이벤트와 연결하는 방법을 보여줍니다.

  
<div v-on:click="writeText"></div>

  
예제
  
아래 코드는 v-on 지시어를 사용하여 '클릭' 이벤트를 수신하고, 이벤트가 발생하면 'writeText' 메소드가 호출되어 텍스트가 변경됩니다.

  
<div id="app">
  <p>Click on the box below:</p>
  <div v-on:click="writeText">
    {{ text }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: ''
      }
    },
    methods: {
      writeText() {
        this.text = 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

  
이벤트 객체를 사용하여 메소드 호출
  
이벤트가 발생하여 메소드가 호출될 때 기본적으로 이벤트 객체가 메소드와 함께 전달됩니다. 이벤트 객체에는 대상 객체, 이벤트 유형, 마우스 위치 등 유용한 데이터가 많이 포함되어 있습니다.

  
예제
  
아래 코드는 mousemove 이벤트를 수신하고, 마우스 포인터의 위치에 따라 배경색을 변경하는 방법을 보여줍니다.

  
<div id="app">
  <p>Move the mouse pointer over the box below:</p>
  <div v-on:mousemove="mousePos"
       v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}"></div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        xPos: 0,
        yPos: 0
      }
    },
    methods: {
      mousePos(event) {
        this.xPos = event.offsetX
        this.yPos = event.offsetY
      }
    }
  })
  app.mount('#app')
</script>

  
인수 전달
  
이벤트가 발생할 때 메소드에 인수를 전달할 수 있습니다. 아래 예제는 버튼을 클릭하여 무스 목격 횟수를 증가시키는 방법을 보여줍니다.

  
<div id="app">
  <img src="img_moose.jpg">
  <p>{{ "Moose count: " + count }}</p>
  <button v-on:click="addMoose(+1)">+1</button>
  <button v-on:click="addMoose(+5)">+5</button>
  <button v-on:click="addMoose(-1)">-1</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      addMoose(number) {
        this.count += number
      }
    }
  })
  app.mount('#app')
</script>

  
인수와 이벤트 객체를 모두 전달하기
  
이벤트 객체와 다른 인수를 모두 전달하고 싶은 경우, 예약된 이름인 $event를 메소드 호출 위치에서 사용할 수 있습니다.

  
예제
  
아래 코드는 이벤트 객체와 텍스트를 모두 메소드에 전달하는 방법을 보여줍니다.

  
<div id="app">
  <img src="img_tiger.jpg"
       id="tiger"
       v-on:click="myMethod($event,'Hello')">
  <p>{{ msgAndId }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        msgAndId: ''
      }
    },
    methods: {
      myMethod(e, msg) {
        this.msgAndId = msg + ', ' + e.target.id
      }
    }
  })
  app.mount('#app')
</script>

  
더 큰 예제
  
아래 예제는 각 동물에 대해 세 가지 다른 증분으로 세 마리의 다른 동물을 세는 방법을 보여줍니다. 이벤트 객체와 증분 숫자를 모두 전달하여 이를 달성합니다.

  
<div id="app">
  <div id="tigers">
    <img src="img_tiger.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,-1)">-1</button>
  </div>
  <div id="moose">
    <img src="img_moose.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,-1)">-1</button>
  </div>
  <div id="kangaroos">
    <img src="img_kangaroo.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,-1)">-1</button>
  </div>
  <ul>
    <li>Tigers: {{ tigers }} </li>
    <li>Moose: {{ moose }} </li>
    <li>Kangaroos: {{ kangaroos }} </li>
  </ul>
</div>

<script src="https://unpkg