Vue 2.0 Hello World

by pdcmoreira

HTML

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

<div id="app">
  <p>{{ welcome(salut) }}</p>
  
  <button
    @click="changeFirstName">
    
    Change first name
  </button>
  
  <button
    @click="changeSalut">
    
    Change salut
  </button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    salut: 'Hi',
    firstName: 'John',
    lastName: 'Doe'
  },
  
  computed: {
    welcome () {
      console.log('computed processed')

      return salut => {
        console.log('callback processed')
        
        return `${salut} ${this.firstName} ${this.lastName}`
      }
    }
  },
  
  methods: {
  	changeFirstName () {
    	console.log('changing first name')
      
    	this.firstName = 'Peter'
    },
    
    changeSalut () {
    	console.log('changing salut')
      
    	this.salut = 'Hello'
    }
  }
})