웹을 사용하는 사용자가 상호작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가할 수 있습니다.
이제 JS Bin을 실행하시고 코드를 직접 작성해 봅시다. https://jsbin.com/?html,js,console,output
JS Bin
Sample of the bin:
jsbin.com
먼저 바인딩할 메세지를 p태그로 명시해줍니다.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<p>{{message}}</P>
<button v-on:click="reversemessage"> 메세지 뒤집기 버튼</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>Javascript
var app = new Vue({
el : "#app",
data:{
message:"123456789"
},
methods:{
reversemessage: function(){
this.message = this.message.split('').reverse().join("")
}
}
})output
버튼클릭
위 예제는 직접적으로 DOM을 건드리지 않고 앱의 상태만을 업데이트 합니다.
Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.
htrml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>
Javascript
var app = new Vue({
el:"#app",
data:{
message:"이것은 기본 메세지입니다."
}
})output
메세지를 바꿨을때
이렇게 인풋 안의 값을 바꿨을때 아웃풋이 출력되는 것을 보면 데이터가 잘 바인딩 되어 있다고 볼 수 있습니다.
'IT > Font-end' 카테고리의 다른 글
| [Javascript-오리엔테이션]let, const, var 변수 (0) | 2020.06.04 |
|---|---|
| [Vue.js] 인스턴스, 속성 그리고 메서드 (0) | 2020.04.02 |
| [Vue.js] 디렉티브, 조건문과 반복문 (0) | 2020.03.31 |
| [Vue.js] 선언적 렌더링 (0) | 2020.03.30 |
| [Vue.js] 시작하기 (0) | 2020.03.30 |