Vue.js의 Method와 Event

• 증가 버튼 만들기

<!--HTML 코드 작성-->
<template>
  <h1>{{ count }}</h1>
  <button>증가</button>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App',  // 컴포넌트의 이름

 data() {
  return {
    count: 0
  }
},
methods: {

 }
};
</script>

• v-on = @
• 클릭 이벤트 확인
• 이벤트 핸들러를 요소에 연결할 때 사용하는 디렉티브
• 사용자 인터페이스에서 발생하는 이벤트(클릭, 입력 등)에 반응하여 특정 동작을 수행할 때 사용

<!--HTML 코드 작성-->
<template>
  <h1>{{ count + 1 }}</h1>
  <button v-on:click="addNumber">증가</button> <!--클릭 이벤트로 메서드 실행-->
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0
  }
},
methods: {
  addNumber() {
    console.log("addNumber가 실행되었습니다")
  }
 }
};
</script>

• 값에 접근하기 위해 this라는 키워드가 필요함

<!--HTML 코드 작성-->
<template>
  <h1>{{ count + 1 }}</h1>
  <button v-on:click="addNumber">증가</button> <!--클릭 이벤트로 메서드 실행-->
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0
  }
},
methods: {
  addNumber() {
    this.count = this.count +1;  // 값에 접근하기 위해 this라는 키워드가 필요함
  }
 }
};
</script>

• 감소 버튼 만들기
• Arrow Function(화살표 함수)를 사용하면 this키워드가 올바르게 동작하지 않을 수 있음
• 자신의 this 컨텍스트를 가지지 않고, 부모 스코프의 this를 그대로 사용하기 때문

<!--HTML 코드 작성-->
<template>
  <h1>{{ count + 1 }}</h1>
  <button v-on:click="addNumber">증가</button> <!--클릭 이벤트로 메서드 실행-->
  <button v-on:click="minusNumber">감소</button> <!--클릭 이벤트로 메서드 실행-->
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0
  }
},
methods: {
  addNumber() {
    this.count = this.count + 1;  // 값에 접근하기 위해 this라는 키워드가 필요함
  },
  minusNumber() {
    this.count = this.count - 1;
  }
 }
};
</script>

• 숫자를 받아서 그 숫자만큼 증가시키기

<!--HTML 코드 작성-->
<template>
  <h1>{{ count + 1 }}</h1>
  <button v-on:click="addNumber">증가</button> <!--클릭 이벤트로 메서드 실행-->
  <button v-on:click="minusNumber">감소</button>
  <button v-on:click="addNumber(10)">10씩 증가</button>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0
  }
},
methods: {
  addNumber(value) {
    this.count = this.count + value;
  },
  minusNumber() {
    this.count = this.count - 1;
  },
 }
};
</script>

• 마우스오버 이벤트로 변경

<template>
  <h1>{{ count + 1 }}</h1>
  <button v-on:click="addNumber">증가</button> <!--클릭 이벤트로 메서드 실행-->
  <button v-on:click="minusNumber">감소</button>
  <button v-on:mouseover="addNumber(10)">마우스 오버 10씩 증가</button>
</template>

• 값을 전달해주지 않으면 기본적으로 이벤트 객체가 들어가게 됨

<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0
  }
},
methods: {
  addNumber(value) {
    console.log(value);
    this.count = this.count + value;
  },
  minusNumber() {
    this.count = this.count - 1;
  },
 }
};
</script>

• value 값 전달하기

<template>
  <h1>{{ count + 1 }}</h1>
  <button v-on:click="addNumber(1)">증가</button> <!--클릭 이벤트로 메서드 실행-->
  <button v-on:click="minusNumber">감소</button>
  <button v-on:mouseover="addNumber(10)">마우스 오버 10씩 증가</button>
</template>

• v-on을 @로 축약해서 사용하기

<!--HTML 코드 작성-->
<template>
  <h2>{{ message }}</h2>
  <button @click="greeting">인사하기</button>
  <button @click="goodBye">작별하기</button>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0,
    message: ""
  }
},
methods: {
  greeting() {
    this.message = "안녕하세요"
  },
  goodBye(){
    this.message = "안녕히가세요"
  },
 }
};
</script

• 어떠한 값도 넘기지 않으면 이벤트 값을 받을 수 있음

<!--HTML 코드 작성-->
<template>
  <h2>{{ message }}</h2>
  <div @mouseover="getMousePosition" class="box"></div>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0,
    message: ""
  }
},
methods: {
  getMousePosition(event) {
    console.log(event);
    this.message = "마우스의 값"
  },
 }
};
</script>

<script>

export default {
 name: 'App', 

 data() {
  return {
    count: 0,
    message: ""
  }
},
methods: {
  getMousePosition(event) {
    console.log(event);
    this.message = `마우스는 ${event.pageX}와 ${event.pageY}에 있습니다`;
  },
 }
};
</script>

• e.pageX를 사용하려면 e라는 이름의 이벤트 객체를 함수에 인자로 전달 안하면 오류 남

<!--HTML 코드 작성-->
<template>
  <h2>{{ message }}</h2>
  <button @click="addNumber(10)">10씩 증가</button>
  <button @click="addNumber(100)">100씩 증가</button>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    message: ""
  }
},
methods: {
  getMousePosition(event) {
    console.log(event);
    this.message = `마우스는 ${event.pageX}와 ${event.pageY}에 있습니다`;
  },
  addNumber(value) {
    e.pageX
    console.log(value);
    this.message= `마우스 좌표 ${e.pageX}와 더하기 ${value}는 ${e.pageX + value}`;
  },
 }
};
</script>



• $event
• 현재 VIEW에서 사용하는 이벤트가 파라미터로 명시할 수 있음

<!--HTML 코드 작성-->
<template>
  <h2>{{ message }}</h2>
  <button @click="addNumber($event, 10)">10씩 증가</button>
  <button @click="addNumber($event, 100)">100씩 증가</button>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
 name: 'App', 

 data() {
  return {
    message: ""
  }
},
methods: {
  getMousePosition(event) {
    console.log(event);
    this.message = `마우스는 ${event.pageX}와 ${event.pageY}에 있습니다`;
  },
  addNumber(e, value) {
    e.pageX
    console.log(value);
    this.message = `마우스 좌표 ${e.pageX}와 더하기 ${value}는 ${e.pageX + value}`;
  },
 }
};
</script>