Learning Vuejs 3

Using Components with Vuejs

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id="vue-app">
  <div class="row">
    <div class="col-sm-12">
      <h1>My Todos</h1>
      <todo-item :todos="todos"></todo-item>
      <todo-item-2 :todos="todos"></todo-item-2>
    </div>
  </div>
  
  <template id="todo-list-template">
    <div>
      <ul class="list-group" v-for="todo in todos">
        <li 
          class="list-group-item"
          v-bind:class="{ 'completed' : todo.completed }">
            {{todo.title}} 
            <button class="btn btn-xs pull-right margin-right-10" 
            v-bind:class="{'btn-success' : todo.completed, 'btn-danger' : !todo.completed}"
            v-on:click="todoCompleted(todo)">{{todo.completed ? 'Completed' : 'Pending'}}</button>
          </li>
      </ul>
    </div>
  </template>
  
  <template id="todo-list-template-2">
    <div>
      <ul class="list-group" v-for="todo in todos">
        <li 
          class="list-group-item"
          v-bind:class="{ 'completed' : todo.completed }">
            {{todo.title}} 2
            <button class="btn btn-xs pull-right margin-right-10" 
            v-bind:class="{'btn-success' : todo.completed, 'btn-danger' : !todo.completed}"
            v-on:click="todoCompleted(todo)">{{todo.completed ? 'Completed' : 'Pending'}}</button>
          </li>
      </ul>
    </div>
  </template>
</div>

CSS

li.completed {
  text-decoration: line-through;
}

JavaScript

var TodoItems = Vue.extend({
	template: '#todo-list-template',
  
  props: ['todos'],
  
  methods: {
  	todoCompleted(todo) {
    	todo.completed = !todo.completed
    }
  }
});
var TodoItems2 = Vue.extend({
	template: '#todo-list-template-2',
  
  props: ['todos'],
  
  methods: {
  	todoCompleted(todo) {
    	todo.completed = !todo.completed
    }
  }
});
Vue.component('todo-item', TodoItems);

new Vue({
	el: '#vue-app',
  
  data: {
  	todos: [{id: 1, title: 'Go Shopping', completed: true}]
  }
});