采用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，表示不带下划线，并且最后将输入框清空。
最终效果
网友评论