vue学习笔记-写一个todolist

相信很多前端小盆友在刚刚过去的2016年都看到过这样一片文章
在 2016 年学 JavaScript 是一种什么样的体验？

图片来源于网络

确实在刚刚过去的一年前端方面涌现出许多新鲜的技术或者许多技术在社区取得了巨大的发展进步,社区资料显示出2016年最流行的前端框架是Vue.JS,因为公司项目没有涉及所以也没有深入了解,文档读了许多遍还只停留在前几节(惭愧状-_-||)

心塞塞

最近趁年后回来公司没什么任务好好的读了一下文档及许多前辈的博客,决定分享一下自己的学习心得然后写一个todolist算是对自己最近学习的整理和总结,也希望本文能帮助其他刚开始学vue的小伙伴对它有更好的理解,下面开始吧

不废话

vue的相关资料及优点我就不总结了,网上一堆堆bulabula...

一.步骤总结

用vue写项目大概可以总结为三个步骤

1.注册组件
2.应用组件
3.实例化

下面我们来举个栗子

举个栗子

1.注册组件(js)

2.应用组件(html)

3.实例化(js)

new Vue({
        el:"#vm"
 })

这样一个最基本的模板就好了
效果如下

简易组件

如果想把功能及效果写的更炫酷大家可以随着技术的成长和积累后续了解vue的相关API及语法,如props,watcher,methods,computed.......下面来做一个todolist的Demo

二.实现一个todolist

代码部分

    
    
    
    
    
    
    




    
{{title}}
    

        

            

                

                    添加任务事项
                    
                
               
                

                    
                        任务清单：
                    

                    
                        {{item.id}}
                        {{item.lable}}
                        √
                    

                
            
        
        

            

                
任务计划：
                

                    请在一周内完成这些计划！
                
                

                    清空任务计划
                
            
        
    

todolist.gif