Muscardinus
v-on 본문
728x90
어떠한 tag에 대해서 event(click, focus ....)에 따른 method의 실행을 위해서
v-on을 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>VueJS Course</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="app" v-cloak>
<p>{{ fullName() }}</p>
<p><a :href="url" target="_blank">Google</a></p>
<p>{{ age }}</p>
<hr />
<label>First Name</label>
<input type="text" v-model="firstName" />
<label>Last Name</label>
<input type="text" v-model="lastName" />
<button type="button" v-on:click="increment">Increment</button>
<button type="button" v-on:click="decrement">Decrement</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>또한 v-bind와 같이 단축키로
<button type="button" @click="increment">Increment</button>
<button type="button" @click="decrement">Decrement</button>를 사용할 수 있다
그 전에 v-model에 관련하여 설명한 적이 있었다. v-model을 통하여 data의 변화를 추적할 수 있다.
또다른 방법으로는,
<input type="text" :value="lastName" @input="updateLastName" />위와 같이, value로 해당하는 data를 바라보고, @input을 사용하여 선언한 method에 따라서 lastName 값이 변하게 할 수 있다.
methods: {
updateLastName(event) {
this.lastName = event.target.value;
},
},
만약, 함수에 어떠한 특정한 값과 event를 전달해서 하고 싶다면,
<input
type="text"
:value="lastName"
@input="updateLastName('Last name event triggered', $event)"
/>위와 같이, 전달하고 싶은 값을 먼저 넣고, $event로 event 자체를 보낸다.
updateLastName(msg, event) {
event.preventDefault();
console.log(msg);
this.lastName = event.target.value;
},728x90
'FrontEnd/Vue' Related Articles
more
Comments