Vue 2.0 Getting Started

Getting started on Vue.js based on the Get Started guide

by Musale Martin

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1">
  <p>{{ message }}</p>
</div>

<div id="app2">
  <p v-if="seen">I am seen</p>
</div>

<div id="app3">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<div id="app4">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage" v-on:dblclick="addMoreText">Reverse Message</button>
</div>

<div id="app5">
  <p>{{ message }}</p>
  <input type="text" v-model="message">
</div>

<div id="app6">
  <ol>
    <bey v-for="todo in groceryList" v-bind:key="todo.id" v-bind:todo="todo"></bey>
  </ol>
</div>

JavaScript

var app1 = new Vue({
  el: '#app1',
  data: {
    message: 'Hello Vue.js!'
  }
})

var app2 = new Vue({
  el: '#app2',
  data: {
    seen: true
  }
})

var app3 = new Vue({
  el: '#app3',
  data: {
    todos: [{
      text: "Beez"
    }, {
      text: "in"
    }, {
      text: "the"
    }, {
      text: "trap"
    }]
  }
})

var app4 = new Vue({
  el: '#app4',
  data: {
    message: 'neutron!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    },
    addMoreText: function() {
      this.message = "Okay who is neutron?"
    }
  }
})

var app5 = new Vue({
  el: '#app5',
  data: {
    message: "I am groot!"
  }
})

Vue.component("bey", {
  props: ["todo"],
  template: "<li>{{todo.text}}</li>"
})

var app6 = new Vue({
  el: "#app6",
  data: {
    groceryList: [{
      text: "Maize",
      id: 0
    }, {
      text: "Beans",
      id: 1
    }, {
      text: "Rice",
      id: 2
    }, {
      text: "Mdalazini",
      id: 3
    }]
  }
})
app3.todos.push({
  text: 'New item'
})