- 리렌더링되는 부분이 데이터가 변하는 부분만으로 한정되어있음을 볼 수 있다.
- vue의 내부 동작을 통해 반응형 데이터만 리렌더링 함으로써 효과적으로 브라우저 기능을 사용하고 있다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Events</h1>
</header>
<section id="events">
<h2>Events in Action</h2>
<button v-on:click="add(5)">Add 5 </button> // 상수 5가 파라미터로 전달됨
<button v-on:click="reduce(5)">Reduce 5</button> // 상수 5가 파라미터로 전달됨
<p>Result: {{ counter }}</p>
<input type="text" v-on:input="setName"> // 이벤트객체가 파라미터로 전달됨
<input type="number" v-on:input="setAgeGender($event, 'MAN')"> // 이벤트객체와 문자열이 파라미터로 전달됨
<p>Name: {{ name }}</p>
<p>Age & Gender: {{ ageGender }}</p>
</section>
</body>
</html>
- 이벤트는 v-on: 으로 HTML 엘레먼트에 바인딩시킬 수 있다.
- 일단 이벤트 종류는 바닐라 자바스크립트와 같다.
- v-on:click="바인딩할메서드" 형태로 사용한다.
- 일단 이벤트 바인딩이 걸리면 JS 내부적으로 이벤트 객체가 이벤트 핸들러에 전달이 되지만,
button에 걸어놓은 이벤트 핸들러처럼 상수값을 미리 인수로 집어넣으면, 인수가 이벤트 핸들러를 덮어써버린다.
- 첫번째 input에 v-on:input="setName" 과 같이 별도의 괄호 없이 코드할 경우, 이벤트 객체가 파라미터로 전달이 된다.
- 두번쨰 input처럼 이벤트 핸들러에 여러개의 파라미터를 설정해야하며, 이벤트 객체가 필요한 경우에는
덮어쓰기로 인한 이벤트 객체의 소실을 막기 위해 $event를 붙여준다.
JavaScript
const app = Vue.createApp({
data() {
return {
counter: 0,
name: "",
ageGender: ""
};
},
methods: {
setName(event) {
this.name = event.target.value
},
setAgeGender(event, gender) {
this.ageGender = event.target.value + ' & ' + gender
},
add(num) {
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
});
app.mount('#events');
