VUEJS) v-on:click

v-on:click 사용법
js에서 html로 단방향으로 바인딩된다.

js

const vm = new Vue({
  el: '#app',
  data: {
    message: "안녕하세요! VueJS!"
   },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

methods안에 함수를 정의한다. this는 맨 위의 vm을 가리키고 this.message는 vm이 가지는 data의 message를 가리킨다. reverseMessage는 split('')을 통해 문자 단위로 쪼개고 reverse를 통해 뒤집고 join('')을 통해 다시 합친다.

 

html

<div id="app">
  <p v-if="message"> {{ message }} </p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

p태그는 반응형이기 때문에 버튼을 클릭했을때 바로 반응해서 화면에 출력된다.

 

실행결과