Vue with this

by ChangJoo Park

HTML

<div id="app">
  <p>
    Open Developer tools :)
  </p>
</div>

JavaScript

new Vue({
  el: '#app',
  mounted() {
    console.log('%c========mounted() {}==========', 'background: #222; color: #bada55; font-size:20px')
    console.log('[mounted] : ', this.constructor.name)
    var aFunction = function() {
      console.log('[mounted#with Plain] : ',  this.constructor.name)
    }

    var bFunction = () => {
      console.log('[mounted#with Arrow] : ',  this.constructor.name)
    }

    var cFunction = function() {
      console.log('[mounted#with Binded this]  : ', this.constructor.name)
    }.bind(this)

    aFunction()
    bFunction()
    cFunction()
      // test with setTimeout
    setTimeout(function() {
      console.log('[mounted#setTimeout with Plain] : ',  this.constructor.name)
    }, 1000)

    setTimeout(() => {
      console.log('[mounted#setTimeout with Arrow] : ',  this.constructor.name)
    }, 1000)
    console.log('%c==================================', 'background: #222; color: #bada55; font-size:20px')
    console.log('%c=====TEST METHODS=====', 'background: #002b36; color: #fdf6e3; font-size:20px')
    this.plainMethod()
    this.arrowMethod()
    console.log('%c==================================', 'background: #002b36; color: #fdf6e3; font-size:20px')
    console.log('%c=====wait for setTimeout functions=====', 'background: #2aa198; color: #fdf6e3; font-size:20px')
    console.log('=== kr.vuejs.org ===')
  },
  created: function() {
    console.log('%c==========created: function () {}===========', 'background: tomato; color: white; font-size:20px')
    console.log('[created] : ',  this.constructor.name)
    var aFunction = function() {
      console.log('[created#with Plain] : ',  this.constructor.name)
    }
    var bFunction = () => {
      console.log('[created#with Arrow]  : ',  this.constructor.name)
    }
    aFunction()
    bFunction()
    console.log('%c==================================', 'background: tomato; color: white; font-size:20px')
  },
  methods: {
    plainMethod: function() {
     ...