Vue.js小Demo--todoList待办事项清单

Vue实现todolist整体思路:

1、创建vue项目(不包括router,不使用eslint检查语法)
2、修改为空白项目,去掉helloworld等
3、构思整体框架,创建一个DOM(标题appheader,输入栏input、展示列表list)通过css渲染
4、依次完成各个组件AppHeader、todoInput、todoItem,最后由APP.vue组合展示。
组件化思想是Vue的核心思想,将各个功能模块组件化,有利于在页面中引用。在每次刷新网页时,Vue的页面也是根据组件刷新,而不必刷新整个页面,提高了运行效率,节约网络资源。

一、标题部分–Appheader.vue

每个vue组件都包含template、script和css的style样式,后两者可缺省或外部引用。script中的name将作为组件名在APP.vue中引用

1
<template>
2
    <div id="title">
3
        <h1>番茄工作法todoList</h1>
4
    </div>
5
</template>
6
<script>
7
    export default {
8
        name: "AppHeader"
9
    }
10
</script>
11
<style scoped>
12
#title{
13
    color: burlywood;
14
}
15
</style>

app.vue引用情况(部分app.vue,最后给出整个app.vue)

1
template中:
2
<AppHeader></AppHeader>
3
script中:
4
import AppHeader from "./components/Appheader.vue";
5
export defalt{
6
name:"APP",
7
compponents:{
8
AppHeader,
9
}}
10
//1、注意区分vue的文件名(Appheader)和组件名(AppHeader),在引用时:import 组件 from 文件;默认情况下二者一样,自己修改时应注意。
11
//2、在components(组件)中要引用AppHeader组件,否组无法使用;

二、输入框–todoInput.vue

1
<template>
2
    <div id="input">
3
        <input id="inputtext" type="text" v-model="text" v-on:keyup.enter="addTodo" placeholder="输入事项,回车确定">
4
    </div>
5
    //监听enter,执行addTodo方法,
6
</template>
7
8
<script>
9
    export default {
10
        name: "TodoInput",
11
        data(){
12
            return{
13
                text:""
14
            };
15
        },
16
        methods:{
17
            addTodo(){
18
                this.$emit("add-event",this.text);
19
                //子组件上的点击事件成功后,通过 $emit 将事件add-event和数据text发送,
20
                //发送到add-event对应的method,在父组件APP.vue中对应add-event的方法是addTodo123,执行添加数据
21
                this.text="";
22
            }
23
        }
24
    }
25
</script>
26
27
<style scoped>
28
#inputtext{
29
    outline:none;
30
    /*box-shadow: none;*/
31
    border: none;
32
    border-bottom: 2px solid lightskyblue;
33
    border-top: 2px solid lightskyblue;
34
    width: 400px;
35
    line-height: 30px;
36
    margin:20px auto 20px auto;
37
    padding: 5px;
38
}
39
</style>

三、显示增加的事项,删除事项–todoItem.vue

1
<template>
2
    <div id="list">
3
        <button id="del-btn" v-on:click="removeTodo">删除</button>{{x.text}}
4
        //点击button,执行removeTodo
5
    </div>
6
</template>
7
8
<script>
9
    export default {
10
        name: "TodoItem",
11
        props:["x"],//props属性,
12
13
        methods:{
14
            removeTodo(){
15
                this.$emit("remove-event",this.x.id);
16
                //子组件执行removeTodo,通过emit发送remove-event事件和id给父组件app
17
                //在父组件中根据remove-event执行removeTodo321方法
18
            }
19
        }
20
    }
21
</script>
22
23
<style scoped>
24
#list{
25
    /*float: left;*/
26
    width: 400px;
27
    margin: 10px auto 10px auto;
28
    padding-right: 10px;
29
    border-bottom: 1px solid lightgray;
30
    text-align: left;
31
    line-height: 30px;
32
    font-weight: bold;
33
}
34
#del-btn{
35
    border: 2px solid grey;
36
    line-height: 18px;
37
    background-color: white;
38
    color: red;
39
    margin-right: 10px;
40
}
41
</style>

四、完整父组件APP.vue

1
<template>
2
  <div id="app">
3
    <div id="todo-wrapper">
4
      <AaappHeader></AaappHeader>
5
      <TodoInput v-on:add-event="addTodo123"></TodoInput>
6
      <TodoItem v-for="x in todos" v-on:remove-event="removeTodo321" v-bind:x="x" :key="x.id"></TodoItem>
7
      //v-for循环,展示现在data中的事项,和key配合使用
8
      //v-bind绑定数据,在子组中要定义props属性
9
    </div>
10
  </div>
11
</template>
12
13
<script>
14
import AaappHeader from "./components/Appheader.vue";
15
import TodoInput from "./components/todoInput.vue";
16
import TodoItem from "./components/todoItem.vue";
17
export default {
18
  name: 'app',
19
  components: {
20
    AaappHeader,
21
    TodoInput,
22
    TodoItem
23
24
  },
25
  data(){
26
    return{
27
      todos:[
28
              {id:0, text:"事项0"},
29
              {id:1, text:"事项1"}
30
      ],
31
      nextId:2,
32
    };
33
  },
34
  methods:{
35
    addTodo123(text){
36
      this.todos.push({id:this.nextId,text:text})
37
      this.nextId++;
38
    },
39
    removeTodo321(id){
40
      this.todos=this.todos.filter(x=>x.id!==id)
41
    }
42
  }
43
}
44
</script>
45
46
<style>
47
#app {
48
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
49
  -webkit-font-smoothing: antialiased;
50
  -moz-osx-font-smoothing: grayscale;
51
  text-align: center;
52
  color: #2c3e50;
53
  margin-top: 60px;
54
}
55
#todo-wrapper{
56
  width: 600px;
57
  min-height: 600px;
58
  margin: 100px auto 100px auto;
59
  border: 3px solid lightskyblue;
60
}
61
</style>

注:学习链接,b站上的一个外国小哥写的demo,全程飚英文,跟着敲,然后自己修改。侵删。
代码放在github上(下载可直接用):
https://github.com/4o4NotFoundd/Vue/tree/master/todoList
todoList