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 메소드란?
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
