Vue Js click,keyup 이벤트
Vue Js click,keyup 이벤트 — #vuejs #vuejsclick #vuejskeyup 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않...
#vuejs #vuejsclick #vuejskeyup
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
4.새로운 지식을 넣을땐 뇌를 비우자
JavaScript 배열함수란?
vue js 이벤트
html에는 onclick, onchange같이 js 함수와 연결하여 사용할 수 있는 속성값이 존재합니다. vue js는 이런 이벤트들을 더욱 간단한 코드로 작성할 수 있습니다!
클릭 이벤트 (onclick)
@click
onclick속성을 사용하고 싶으면 html태그에 @click을 적어주시면됩니다.
| <template> <div> <button @click="myFunc">hello!!</button> </div></template> |
|---|
button속성에 @click 이벤트를 연결하였고 myFunc함수를 실행하도록 설정하였습니다. @click을 사용할때는 myFunc뒤에 따로 소괄호()를 사용하지 않아도 됩니다.
| <script>export default { components: {}, data() { return{ } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: { myFunc() { alert("hello!!") } }}</script> |
|---|
모든 함수는 methods: {}안에 넣어주면됩니다. 함수를 정의할때 따로 function을 작성하지 않아도 됩니다.
키보드 이벤트 onkeyup
html 속성중에 키보드를 감지하여 이벤트를 발생시키는 onkeyup, onkeydown속성이 있습니다. Js 함수와 함께 연동하여 특정키를 감지한뒤 이벤트가 발생하게끔 처리하는 경우가 많습니다. vue js에서는 특정키를 감지하는 매서드를 미리 설계해 두어 사용자로 하여금 개발을 더욱 쉽게하도록 만듭니다!
@keyup
| <template> <div> <input @keyup.enter="myFunc"> </div></template><script>export default { components: {}, data() { return{ } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: { myFunc() { alert("hello!!") } }}</script> |
|---|
onkeyup 속성은 @keyup으로 사용할 수 있습니다. 이후 @click처럼 함수를 연결해주면됩니다. 앞의 예시로 사용했던 함수를 그대로 사용해보겠습니다. @keyup뒤의 .enter은 enter을 감지하는 기능입니다. .enter외에 tab,delete,esc 등 다양한 기능이 미리 구현되어 있습니다.
.left,.right,.up,.down은 방향키를 의미합니다.
.stop은 myFunc가 실행될때 event.stopPropagation() 함수가 실행됩니다. (부모 테그로 이벤트 전파를 막는 기능)
.prevent는 myFunc가 실행될때 event.preventDefault() 함수가 실행됩니다. (본기능 막는 함수)
이제 input박스에서 enter을 입력시 alert창이 나옵니다.