Vue 2.0 Hello World

by pandigity

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p>{{ message }}</p></br>
  <span v-bind:title="hovermessage">
    There should be something here
  </span></br>
  <span v-if="seen">Now you see me</span>
  </br>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol></br>
<button v-on:click="show = !show">
    Toggle
  </button></br>
  <transition name="fade">
    <p v-if="show">Toggle me with transition</p>
  </transition></br>
  <p>{{ messageReversed }}</p>
  <button v-on:click="reverseMessage">Hit me</button></br>
  <p>{{ liveText }}</p>
  <input v-model="liveText"></br>
    <ol>
    <item></item>
    </ol>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    hovermessage: 'can you see me?',
    messageReversed: 'Reverse this text',
    liveText: 'Write something',
    seen: true,
    show: true,
    todos:[
    	{text: 'Learn Vue'},
      {text: 'wash underwear'},
      {text: 'play spiderman'}
    ],
  },
  methods: {
  	reverseMessage: function() {
    	this.messageReversed = this.messageReversed.split('').reverse().join('')
      }
    }
  }),
   Vue.component('item',{
    template: '<li>This is my list</li>'
    })