采用vue来构建一个简单的todolist demo

1.首先我们先在本地构建一个todolist

在命令行输入 vue create todolist

cd todolist

2.看一下我们目前生成的文件目录

文件夹目录

3.我们首先从main.js开始做

main.js

el是vue实例化的对象，提供一个已存在的的DOM元素作为Vue实例上的挂载点

4.App.vue

App.vue分为三个部分 template script css

首先我们来写script中的data

data

data是Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

之后我们在template里面加入一个h1标签，使用data，并且返回title，令其在页面之中显示

h1

这时页面效果如图

页面效果

5.接下来，我们添加列表来记录代办事项

列表

采用v-for来生成来生成列表项，此时在data里新增items数组数据

data

页面效果

采用v-bind绑定class属性，当items数组中的isFinshed为true时，则class为finished

简单修饰一下，若class为finished，则待办事项为黑色

6.再用v-on绑定一个点击事件，记录是否完成，点击事件的方法写在methods里面

methods

7.最后我们添加一个输入框，来动态输入，使用v-model进行双向绑定

在data中，items默认为空，newItem也为空，输入内容回车后items中push一条内容，其中的label为输入框输入的内容，isFinished默认为false，表示不带下划线，并且最后将输入框清空。

最终效果