频道导航

Vue制作Todo List网页

2019-01-03 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了Vue制作Todo List网页，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue学习完成Todo List网页，供大家参考，具体内容如下

跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。

Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与JS里的Vue实例进行双向绑定，只要Vue实例中的代理数据改变，HTML中的实际数据就会跟着变，这和原生的Js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制DOM的变化。什么意思呢？我们会在接下去的学习中慢慢实践。

Todo List这个网页用到了很多Vue的指令，在这里我贴出一部分代码，全部代码请戳我的

以下是HTML部分

{{unCheckedLength}}个任务未完成

所有任务未完成任务完成任务

添加任何任务

Vue实例部分

}
}
}
});

这是一个基本的Vue实例，el是和DOM元素连接的挂载点，data是代理数据，在DOM的内容中如果要用到代理数据就用{{xxx}}表示，比如{{list}}，{{visibility}}，而当data中的代理数据出现在DOM标签里的时候就不需要用花括号。

Vue要用大的方法都放在methods部分

还有计算属性

观察属性

自定义属性

}
}
}

在HTML中要绑定这些数据，Vue也提供了一套指令：

v-bind绑定一个或多个特性，一般用于绑定class和style， v-on 绑定事件， v-show，v-if都是根据条件渲染元素，v-for是渲染列表…等等，我就不一一赘述了。可以去nofollow" target="_blank" href="https://cn.vuejs.org/">Vue中文官网看，讲的很详细。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/vue/39693.html

List