https://kr.vuejs.org/v2/guide/forms.html
v-model과 v-on
v-model
input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.
연결을 해두면 자동으로 업데이트 된다.
message인풋에 값을 입력하면 밑에 변수에 바로 바인딩 되어 나온다.
<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>
v-on :
dom 이벤트가 트리거될 때 js를 실행할 수 있는 이벤트 리스너다.
v-on을 줄여서 @로 작성한다.
이벤트의 종류
- click : 마우스로 클릭했을 때 실행되는 이벤트
- dblclick: 마우스로 더블클릭했을 때 실행되는 이벤트
- mouseover : 마우스포인트가 해당요소에 올라왔을 때 실행되는 이벤트
- mouseout : 마우스포인트가 해당요소를 벗어났을 때 실행되는 이벤트
- mousemove : 마우스포인트가 이동했을 때(움직일때) 실행되는 이벤트
- mousedown : 마우스가 버튼을 눌렀을 때 실행되는 이벤트
- mouseup : 마우스가 버튼을 놓았을 때 실행되는 이벤트
- keyup : 키보드 키를 놓았을 때 실행되는 이벤트
- keydown : 키보드 키를 눌렀을 때 실행되는 이벤트
- keypress : 키보드 키를 눌렀다가 놓았을 때 실행되는 이벤트
- change : 요소가 변경될 때 실행되는 이벤트
- submit : form 태그에서 제출될 때 실행되는 이벤트
- reset : form 태그에서 리셋할 때 실행되는 이벤트
- select : select 태그의 값이 선택되었을 때 실행되는 이벤트
- focus : 태그에 포커스되어 있을 때 실행되는 이벤트
- blur : 태그가 포커스를 잃었을 때 실행되는 이벤트
그러나 영어는 v-model로 바로 바인딩이 되는데 한글이나 중국어 일본어는 바로 반영이 안되고 한글자씩 밀리는 현상이 발생한다.
여기서 input 이벤트를 대신 사용하라고 되어있다.
<template>
<input type="text" :value="name" @input="changeName">
<p>message : {{name}}</p>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const name = ref('');
const changeName = (e) => {
name.value = e.target.value;
};
return {
name,
changeName
};
}
});
</script>
728x90
'WEB > VUE.js' 카테고리의 다른 글
[VUE.js] vue3 scss media query 전역으로 쓰는 법 (0) | 2021.11.17 |
---|---|
[Vue.js] computed와 method/ watch 의 차이 (0) | 2021.11.07 |
[VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기 (0) | 2021.11.03 |
[Vue.js] vue 데이터 양방향 바인딩 / 폼 입력 바인딩 (0) | 2021.10.12 |
[Vue.js] button 이벤트 핸들링/ 이벤트 수식어 (0) | 2021.10.12 |