rosd89 · August 22, 2017 12:11
diff --git a/vue_todo_5.html b/vue_todo_5.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>todo</title>
 </head>
 <body>
 <div id="root"></div>
 </body>

 <script src="https://unpkg.com/vue"></script>
 <script type="application/javascript">
  Vue.component('todo-content', {
    template: `
      <div class="todo-content">
         <h1>Todo List</h1>
         <slot></slot>
      </div>`
  });

  Vue.component('todo-list', {
    data() {
      return {
        inputItem: '',
        items: ['A', 'B', 'C']
      }
    },
    methods: {
      completed(item) {
        const items = this.items;
        const i = items.indexOf(item);
        items.splice(i, 1);
      },
      appendTodoItem() {
        if (!this.inputItem) {
          window.alert('할일을 입력해주세요.');
          return false;
        }

        this.items.push(this.inputItem);
        this.inputItem = '';
      }
    },
    template: `
      <div>
        <input class="input-text" type="text" v-model="inputItem"/>
        <button class="btn" @click="appendTodoItem">추가</button>
        <ul>
          <todo-item
            v-for="item in items"
            :key="item"
            :name="item"
            v-on:completed="completed"></todo-item>
        </ul>
      </div>`
  });

  Vue.component('todo-item', {
    props: ['name'],
    methods: {
      complete() {
        this.$emit('completed', this.name);
      }
    },
    template: `<li>{{name}} <button class="btn" @click="complete">완료</button></li>`
  });

  new Vue({
    el: '#root',
    template: `
      <todo-content>
        <todo-list></todo-list>
      </todo-content>`,
  });
 </script>

 <style>
  .todo-content {
    width: 720px;
    background: #dddddd;
    margin: 0 auto;
    padding: 1px 5px 10px 5px;
  }

  .btn {
    clear: both;
    float: right;
  }

  .input-text {
    width: 200px;
    margin-left: 20px;
  }
 </style>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>todo</title>
	</head>
	<body>
	<div id="root"></div>
	</body>

	<script src="https://unpkg.com/vue"></script>
	<script type="application/javascript">
	Vue.component('todo-content', {
	template: `
	<div class="todo-content">
	<h1>Todo List</h1>
	<slot></slot>
	</div>`
	});

	Vue.component('todo-list', {
	data() {
	return {
	inputItem: '',
	items: ['A', 'B', 'C']
	}
	},
	methods: {
	completed(item) {
	const items = this.items;
	const i = items.indexOf(item);
	items.splice(i, 1);
	},
	appendTodoItem() {
	if (!this.inputItem) {
	window.alert('할일을 입력해주세요.');
	return false;
	}

	this.items.push(this.inputItem);
	this.inputItem = '';
	}
	},
	template: `
	<div>
	<input class="input-text" type="text" v-model="inputItem"/>
	<button class="btn" @click="appendTodoItem">추가</button>
	<ul>
	<todo-item
	v-for="item in items"
	:key="item"
	:name="item"
	v-on:completed="completed"></todo-item>
	</ul>
	</div>`
	});

	Vue.component('todo-item', {
	props: ['name'],
	methods: {
	complete() {
	this.$emit('completed', this.name);
	}
	},
	template: `<li>{{name}} <button class="btn" @click="complete">완료</button></li>`
	});

	new Vue({
	el: '#root',
	template: `
	<todo-content>
	<todo-list></todo-list>
	</todo-content>`,
	});
	</script>

	<style>
	.todo-content {
	width: 720px;
	background: #dddddd;
	margin: 0 auto;
	padding: 1px 5px 10px 5px;
	}

	.btn {
	clear: both;
	float: right;
	}

	.input-text {
	width: 200px;
	margin-left: 20px;
	}
	</style>
	</html>