neilodiaz/vue-multiple-components.html

## vue-multiple-components.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Multiple Components</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="stylesheet" type="text/css" href="">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container" id="app">
        <h1>To Dos</h1>
        <todo-items :todos="todos"></todo-items>
        <add-new-todo :todos="todos"></add-new-todo>
    </div>

    <template id="todo-list-template">
        <div>
            <ul class="list-group">
                <li :class="{'completed':todo.completed}" class="list-group-item" v-for="(todo, index) in todos">
                    <span>{{ todo.title }}</span>
                    <button @click="deteTodo(index)" class="btn btn-warning btn-xs pull-right">Delete</button>
                    <button @click="toggleTodo(todo)" class="btn btn-xs pull-right">{{ todo.completed ? 'Completed':'Pending' }}</button>
                </li>
            </ul>
        </div>
    </template>

    <template id="add-new-todo">
        <div>
            <form @submit.prevent="addTodo()">
                <input class="form-control" placeholder="Add New Todo" type="text" v-model="tempTodo.title"/>
                <input class="btn btn-primary" type="submit"/>
            </form>
        </div>
    </template>

    <script type="text/javascript">
        var TodoItems = Vue.extend({
            template: '#todo-list-template',

            props: ['todos'],

            methods: {
                deteTodo(index) {
                    this.todos.splice(index, 1);
                },
                toggleTodo(todo) {
                    todo.completed = !todo.completed;
                }
            }
        });

        var AddTodo = Vue.extend({
            template: '#add-new-todo',

            props: ['todos'],

            data() {
                return {
                    tempTodo: {
                        title: '',
                        completed: false
                    },
                    allTodos: this.todos
                }
            },

            methods: {
                addTodo() {
                    this.allTodos.push(this.tempTodo);
                    this.tempTodo = {
                        title: '',
                        completed: false
                    }
                }
            }
        });

        Vue.component('todo-items', TodoItems);
        Vue.component('add-new-todo', AddTodo);

        new Vue({
            el: '#app',

            data: {
                todos: [{
                    title: 'Todo 1',
                    completed: false
                }]
            }
        });
    </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Multiple Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<link rel="stylesheet" type="text/css" href="">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js" type="text/javascript"></script>
	</head>
	<body>
	<div class="container" id="app">
	<h1>To Dos</h1>
	<todo-items :todos="todos"></todo-items>
	<add-new-todo :todos="todos"></add-new-todo>
	</div>

	<template id="todo-list-template">
	<div>
	<ul class="list-group">
	<li :class="{'completed':todo.completed}" class="list-group-item" v-for="(todo, index) in todos">
	<span>{{ todo.title }}</span>
	<button @click="deteTodo(index)" class="btn btn-warning btn-xs pull-right">Delete</button>
	<button @click="toggleTodo(todo)" class="btn btn-xs pull-right">{{ todo.completed ? 'Completed':'Pending' }}</button>
	</li>
	</ul>
	</div>
	</template>

	<template id="add-new-todo">
	<div>
	<form @submit.prevent="addTodo()">
	<input class="form-control" placeholder="Add New Todo" type="text" v-model="tempTodo.title"/>
	<input class="btn btn-primary" type="submit"/>
	</form>
	</div>
	</template>

	<script type="text/javascript">
	var TodoItems = Vue.extend({
	template: '#todo-list-template',

	props: ['todos'],

	methods: {
	deteTodo(index) {
	this.todos.splice(index, 1);
	},
	toggleTodo(todo) {
	todo.completed = !todo.completed;
	}
	}
	});

	var AddTodo = Vue.extend({
	template: '#add-new-todo',

	props: ['todos'],

	data() {
	return {
	tempTodo: {
	title: '',
	completed: false
	},
	allTodos: this.todos
	}
	},

	methods: {
	addTodo() {
	this.allTodos.push(this.tempTodo);
	this.tempTodo = {
	title: '',
	completed: false
	}
	}
	}
	});

	Vue.component('todo-items', TodoItems);
	Vue.component('add-new-todo', AddTodo);

	new Vue({
	el: '#app',

	data: {
	todos: [{
	title: 'Todo 1',
	completed: false
	}]
	}
	});
	</script>

	</body>
	</html>