todolist学习临时代码1

new_branch1
roger 2 years ago
parent 74898f3b83
commit 2cd6e16dbd
  1. 20
      20_脚手架/vue_code/src/App.vue
  2. 27
      20_脚手架/vue_code/src/components/School.vue
  3. 26
      20_脚手架/vue_code/src/components/Student.vue
  4. 13
      20_脚手架/vue_code/src/components/TodoBottom.vue
  5. 15
      20_脚手架/vue_code/src/components/TodoHeader.vue
  6. 25
      20_脚手架/vue_code/src/components/TodoItem.vue
  7. 20
      20_脚手架/vue_code/src/components/TodoList.vue

@ -1,25 +1,27 @@
<template> <template>
<div> <div>
<School/> <TodoHeader/>
<Student/> <TodoList/>
<TodoBottom/>
</div> </div>
</template> </template>
<script> <script>
import School from "./components/School.vue"; import TodoHeader from "./components/TodoHeader.vue";
import Student from "./components/Student.vue"; import TodoList from "./components/TodoList.vue";
import TodoBottom from "./components/TodoBottom.vue";
export default { export default {
name: "App", name: "App",
components: { components: {
School, TodoHeader,
Student TodoList,
TodoBottom
} }
} }
</script> </script>
<style> <style>
.title {
color: red
}
</style> </style>

@ -1,27 +0,0 @@
<template>
<div class="demo">
<h2 class="title">学校名称{{ name }}</h2>
<h2>学校地址{{ address }}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "修仙学院",
address: "长白山",
msg: "欢迎学校" // vc
}
},
}
</script>
<style lang="css" scoped>
.demo {
background-color: orange;
}
</style>

@ -1,26 +0,0 @@
<template>
<div class="demo">
<h2 class="title">学生名称{{ name }}</h2>
<h2>学生年龄{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "小强",
age: 18,
msg: "欢迎学生"
}
}
}
</script>
<style lang="css" scoped>
.demo {
background-color: skyblue;
}
</style>

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "TodoBottom"
}
</script>
<style scoped>
</style>

@ -0,0 +1,15 @@
<template>
<div>
<input type="text" placeholder="请输入你的任务名称,按回车确认">
</div>
</template>
<script>
export default {
name: "TodoHeader"
}
</script>
<style scoped>
</style>

@ -0,0 +1,25 @@
<template>
<li>
<input type="checkbox" class="TodoItem" >
<span>xxxxxxx</span>
</li>
</template>
<script>
export default {
name: "TodoItem",
data() {
return {
todoList: [
{id: "001", title: "产品", done: true},
{id: "002", title: "开发", done: true},
{id: "003", title: "测试", done: false}
]
}
}
}
</script>
<style scoped>
</style>

@ -0,0 +1,20 @@
<template>
<div>
<ul>
<TodoItem/>
<TodoItem/>
</ul>
</div>
</template>
<script>
import TodoItem from "@/components/TodoItem.vue";
export default {
name: "TodoList",
components: {TodoItem}
}
</script>
<style scoped>
</style>
Loading…
Cancel
Save