728x90
사용자 입력 핸들링
사용자와 앱이 상호작용할 수 있도록 이벤트 리스너를 사용하는데 Vue에서는 v-on을 통해 할 수 있다. 다음은 버튼을 눌렀을 때 문자열을 뒤집는 것이다. v-on에 이벤트를 등록할 수 있으며 여기서 click 이벤트가 발생했을 때 reverseMessage함수를 등록한다. 함수 등록은 methods 안에 정의한다.
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">문자열 뒤집기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Javascript'
},
methods:{
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>위와 똑같은 기능을 바닐라 자바스크립트로 아래와 같이 작성할 수 있다. 아래의 코드에서는 DOM을 직접 조작하여 기능을 만들지만 Vue에서는 내부에서 DOM조작을 도와준다.
<body>
<div class="app">
<p>Javascript</p>
<button>문자열 뒤집기</button>
</div>
<script>
const div = document.querySelector('.app');
const p = div.querySelector('p');
const button = div.querySelector('button');
button.addEventListener('click', reverseMessage);
function reverseMessage () {
let message = p.innerText;
p.innerText = message.split('').reverse().join('');
}
</script>
</body>
v-model을 통해 입력과 동시에 데이터가 변경되는 양방향으로 바인딩할 수 있다. 아래의 코드를 통해 input이 message와 연결이되고 입력과 동시에 message의 값이 변한다.
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
</body>위의 기능을 바닐라 자바스크립트로 구현하면 다음과 같다. Vue에서 input과 message가 연결된 것처럼 구현한 것을 각각의 DOM 요소를 조작하고 있으며 <input>에 이벤트 리스너를 등록하여 입력할 때마다 이벤트 함수가 실행된다. 이벤트 함수에서는 현재 입력한 내용을 <p>에 저장하는 기능을 하고있다.
<body>
<div class="id">
<p></p>
<input type="text">
</div>
<script>
const div = document.querySelector('.id');
const p = div.querySelector('p');
const input = div.querySelector('input');
input.addEventListener('input', handleInput);
function handleInput(event) {
const message = event.target.value;
p.innerText = message;
}
</script>
</body>'프로그래밍 > JavaScript' 카테고리의 다른 글
| [Vue] 싱글 파일 컴포넌트(SFC) (0) | 2021.05.11 |
|---|---|
| [Vue] computed와 watch (0) | 2021.05.10 |
| [Vue] Vue 인스턴스 (0) | 2021.05.09 |
| [Vue] 시작하기 01 (0) | 2021.05.07 |
| 동기와 비동기 (0) | 2021.05.03 |