Vue 2.0 Hello World

by Gaelle

HTML

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

<div id='app'>
    <p>
        {{message}}
    </p>
    <button v-on:click='reverseMessage'>
        Inverser !
    </button>
</div>

<div id='app-2'>
    <span v-bind:title='message'>
        Passez la souris sur moi.
    </span>
</div>

<div id='app-3'>
    <p v-if="seen">
        Yo !
    </p>
</div>

<div id='app-4'>
  <ol>
      <li v-for='todo in todos'>
          {{todo.text}}
      </li>
  </ol>
</div>

<div id='app-7'>
    <ol>
        <todo-item
        v-for='item in groceryList'
        v-bind:todo='item'
        v-bind:key='item.id'>
        </todo-item>
    </ol>
</div>

JavaScript

var app = new Vue({
		el: '#app',
    data: {
    		message: 'Et hop !'
    },
    methods: {
    		reverseMessage: function () {
        	this.message = this.message.split('').reverse().join('')
        }
    }
      
})

var app2 = new Vue({
		el: '#app-2',
    data: {
    		message: 'Nous sommes le ' + new Date() + '.'
    }
})

var app3 = new Vue({
		el: '#app-3',
    data: {
    		seen: true
    }
})

var app4 = new Vue({
		el: '#app-4',
    data: {
    		todos: [
        	{text: 'Apprendre JS'},
          {text: 'Apprendre Vue'},
          {text: 'Apprendre Python'}
        ]
    }
})

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

var app7 = new Vue({
		el: "#app-7",
    data: {
    		groceryList: [
        		{id: 0, text: 'LĂ©gume'},
            {id: 1, text: 'Fromage'},
            {id: 2, text: 'Miam'}
        ]
    }
})