test Vuejs

by Damilola_Adegunwa

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
  <my-component :msg='message'></my-component>
  <div>
    <input v-model="message" debounce="100">{{message}}
    <button v-on:click="addMessage">Add Message</button>
  </div>
  <ul>
    <li v-for="todo in todos">
       <span>{{ todo.text }}</span>
       <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
  a={{ a }}, b={{ b }}
</div>

JavaScript

// define
var MyComponent = Vue.extend({
	props: ['msg'],
  template: '<div>A {{msg}} custom component!</div>'
})
// register
Vue.component('my-component', MyComponent)
var vv=new Vue({
  el: '#app',
  data: {
  	a: 1,
  	message: '',
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  },
  computed:{
  b: function () {
      return this.a + 1
    }
  },
  methods: {
	  addMessage: function () {
    	if(this.message)
      {
      	this.todos.push({text:this.message});
        this.message='';
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
 }
})