Vue 2.0 Hello World

by Teuta Koraqi

HTML

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

<div id="app">
  <p>{{ message }}</p>
   <input type="text" v-model="message">
  <button v-on:click="reverseMessage">Reverse Message</button>
<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
  ></todo-item>
</ol>

</div>

JavaScript

dsfVue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{todo.text}}</li>'
})

new Vue({
  el: '#app',
  data: {
    message: "I'm Teuta..",
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Hey dude, I just came back from school. When are we going there? I cannot wait to see u!' },
      { id: 3, text: 'Whatever else humans are supposed to eat' }
    ]
  },
  methods: {
    reverseMessage: function() {
      this.message =       this.message.split('').reverse().join('');
    },
    backToPlace: function() {
     this.message.split('').reverse().join('');
    }
  }
})