The very first Vue.js example

by Md. Atiquzzaman Soikat

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="demo">
    <button @click.prevent="edit">Edit</button>
    <button @click.prevent="cancel">Cancel</button>
    <template v-if="image.editing">
       <input v-model="message">   
    </template>
    <template v-else>
    <p>{{message}}</p>      
    </template>


</div>

Babel + JSX

var data = {
    message: 'Hello Vue.js!',
    image: {
    	editing: false
    },
    images: []
}

var demo = new Vue({
    el: '#demo',
    data: data,
    methods:{
			edit(){
      	this.image.editing = true;
      },
      cancel(){
      	this.image.editing = false;
      }
    }
})