Vue.js - #5 사용자 입력 제어, v-on:click, 함수 사용

사용자의 입력 (클릭)을 사용하여 반응형으로 변하는 것을 만들어보자.

 

Vue에서는 단방향 즉, JS에서 message가 변경되면 HTML상의 {{ message }} 가 변경되는 단방향으로 데이터가 변경된다.

즉, 데이터가 변경되면 자동으로 HTML상의 보간된 데이터가 변경되는 것이다.

 

양방향, 즉 HTML상의 보간된 데이터가 JS에 정의한 message로 넘어갈 수 있다면 양방향이 된다.

양방향 데이터 바인딩을 위해서는 v-model 디렉티브를 사용할 수 있다.

 

HTML

<div id="app">
  <div class="box" v-bind:class="{active: toggle}"> {{ message }} </div>
  <button v-on:click="toggleElement">Toggle</button>
  <input type="text" v-model="message">
</div>

CSS

 

.box {
  width : 150px;
  height: 150px;
  background : royalblue;
  border-radius : 10px;
  cursor : pointer;
  transition : all 1s;
  color : white;
  display : flex;
  justify-content : center;
  align-items; center;
}

.box.active {
  width : 400px;
  background : tomato;
}

JS

const viewModel = new Vue({
  el : "#app",
  data : {
    toggle : false
  },
  methods : {
    toggleElement : function() {
      this.toggle = !this.toggle
    }
  }
})

 

직접 만들어보고 실행해보면 작동 원리를 느껴볼 수 있다.

 

methods에서는 함수를 정의하며, toggleElement :function() {}을

toggleElement () { }로 축약해서 사용할 수 있다.