The very first Vue.js example

by Ismail Ibraheem Shurrab

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
 <ul>
 <li v-for="color in colors">{{ color }} <a href="#" @click="get(color)"> get</a></li>
 <li v-if="item">{{item}}</li>
 </ul>
    <p>{{message.split('').reverse().join('')}}</p>
    <input v-model="item" >
    <button @click="btn">
     Press
    </button>
</div>

JavaScript

var data = {
    message: 'Hello Vue.js!',
    colors : ['red','white','blue'],
    item : ''
}

var demo = new Vue({
    el: '#demo',
    data: data ,
    methods : {
    btn(){
    alert(this.message);
    this.colors.push(this.item);
    this.item="";
    },
     get(color){
     i = this.colors.indexOf(color);
    alert();
    this.colors.splice(i,1);
    }
    
    }
})