Vue 2.0 Hello World

by Yonathan Benitah

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <test-c></test-c>
</div>

JavaScript

var testC =  {
template: `<div class="message-box message-box-success animated fadeIn" id="message-box-success">
    <div class="mb-container">
      <div class="mb-middle">
        <div class="mb-title"><span class="fa fa-check"></span>&nbsp;{{title}}&nbsp;</div>
        <div class="mb-content">
          <p>{{successMessage}}</p>
        </div>
        <div class="mb-footer">
          <button class="btn btn-default btn-lg pull-right mb-control-close" @click.prevent="close">OK</button>
        </div>
      </div>
    </div>
  </div>`,
  name: 'SuccessMsg',
  props: {
    title: ''
  },
  data () {
    return {
      successMessage: 'success'
    }
  },
  methods: {
    show: function (message) {
      // in this line I'm getting undefined in console
      console.log(this.successMessage)
      // this.successMessage = message
      $('#message-box-success').addClass('open')
    },
    close: function () {
      $('#message-box-success').removeClass('open')
    }
  }
}


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
  testC
  }
})