JSFiddle - React, Tailwind, and code Playground

by realdev

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 섹션 2 - 1강 Example 1 -->
<div id="app">
  <!-- 텍스트 보간 -->
  <p> {{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

JavaScript

new Vue({
  el:'#app',
  data: {
    message: '안녕하세요 Vue!'
  },
  methods: {
    // 이벤트 핸들링
    reverseMessage: function(){
      this.message = this.message.split('').reverse().join('')
    }
  }
})