Skip to content

Commit b1f21dd

Browse files
macmac
mac
authored and
mac
committed
할일 추가, 삭제, 목록 제작
1 parent 3f08c89 commit b1f21dd

11 files changed

+164
-77
lines changed

‎eslintrc.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
rules: {
3+
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
4+
}
5+
}

‎package-lock.json

+18-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@vue/compiler-sfc": "^3.0.0-0",
1919
"babel-eslint": "^10.1.0",
2020
"eslint": "^6.7.2",
21+
"eslint-loader": "2.1.2",
2122
"eslint-plugin-vue": "^7.0.0-0"
2223
},
2324
"eslintConfig": {

‎src/App.vue

+22-16
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js App"/>
2+
<div id="app">
3+
<Header></Header>
4+
<Input></Input>
5+
<List></List>
6+
<Footer></Footer>
7+
</div>
48
</template>
59

610
<script>
7-
import HelloWorld from './components/HelloWorld.vue'
11+
import Header from './components/header'
12+
import Input from './components/input'
13+
import List from './components/list'
14+
import Footer from './components/footer'
15+
16+
export default {
17+
18+
components: {
19+
'Header' : Header,
20+
'Input' : Input,
21+
'List' : List,
22+
'Footer' : Footer,
23+
}
824
9-
export default {
10-
name: 'App',
11-
components: {
12-
HelloWorld
1325
}
14-
}
1526
</script>
1627

1728
<style>
18-
#app {
19-
font-family: Avenir, Helvetica, Arial, sans-serif;
20-
-webkit-font-smoothing: antialiased;
21-
-moz-osx-font-smoothing: grayscale;
22-
text-align: center;
23-
color: #2c3e50;
24-
margin-top: 60px;
25-
}
29+
body {
30+
background-color: #E9F6FD;
31+
}
2632
</style>

‎src/components/HelloWorld.vue

-58
This file was deleted.

‎src/components/footer.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div>
3+
footer
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
10+
}
11+
</script>
12+
13+
<style>
14+
</style>

‎src/components/header.vue

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<header>
3+
<h1>TODO !</h1>
4+
</header>
5+
</template>
6+
<style scoped>
7+
</style>

‎src/components/input.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">
4+
<button v-on:click="addTodo">add</button>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
data: function() {
11+
return {
12+
newTodoItem: ""
13+
}
14+
},
15+
methods: {
16+
addTodo: function() {
17+
localStorage.setItem(this.newTodoItem, this.newTodoItem);
18+
this.clearInput();
19+
},
20+
clearInput: function() {
21+
this.newTodoItem = '';
22+
}
23+
}
24+
}
25+
</script>
26+
27+
<style scoped>
28+
</style>

‎src/components/list.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div>
3+
<ul>
4+
<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem">
5+
<input type="checkbox" v-on:click="toggleComplete"/>
6+
{{ todoItem }}
7+
<button v-on:click="deleteItem(todoItem, index)">x</button>
8+
</li>
9+
</ul>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data: function () {
16+
return {
17+
todoItems : []
18+
}
19+
},
20+
created: function() {
21+
let localStorageLength = localStorage.length;
22+
if (localStorageLength > 0) {
23+
for (let i = 0; i < localStorageLength; i++ ) {
24+
if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {
25+
this.todoItems.push(localStorage.key(i));
26+
}
27+
}
28+
}
29+
},
30+
methods: {
31+
deleteItem: function(todoItem, index) {
32+
console.log(this.todoItems, todoItem, index);
33+
localStorage.removeItem(todoItem);
34+
this.todoItems.splice(index, 1);
35+
// this.todoItems.pop(index);
36+
},
37+
toggleComplete: function() {
38+
39+
}
40+
}
41+
}
42+
</script>
43+
44+
<style>
45+
li {
46+
list-style: none;
47+
}
48+
</style>

‎src/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue todo</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="shortcut icon" href="/src/assets/favicon.ico" type="image/x-icon">
8+
<link rel="icon" href="/src/assets/favicon.ico" type="image/x-icon">
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script src="/dist/build.js"></script>
13+
</body>
14+
</html>

‎src/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3+
// import Vue from 'vue'
34

45
createApp(App).mount('#app')
6+
7+
// new Vue({
8+
// el: '#app',
9+
// render: h => h(app)
10+
// });
11+

0 commit comments

Comments
 (0)