IT/Font-end

[Vue.js] 사용자 입력 핸들링

omaeng 2020. 3. 31. 10:40

웹을 사용하는 사용자가 상호작용할 수 있게 하기 위해 우리는 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

메세지를 바꿨을때

이렇게 인풋 안의 값을 바꿨을때 아웃풋이 출력되는 것을 보면 데이터가 잘 바인딩 되어 있다고 볼 수 있습니다.